• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Background in site title area in Genesis Sample

Last Updated on May 22, 2018 Favorited: 0 times

Have you ever tried to do something special for your .title-area ? Like this

not know how to do this? We could use some CSS to make it beautiful. Add this in your CSS file.

.title-area {
    background-color: #000;
    padding-right: 15px;
    padding-left: 20px;
    margin-left: -30px;
}

.title-area a {
    color: #fff;
}
.title-area a:hover {
    color: #fff;
}

(old) The bad method :*

.title-area {
    background-color: #000;
    padding-right: 15px;
}
.site-header:before {
    background-color:  #000;
    float:  left;
    padding: 0px 10px 70px 20px;
    margin-left: -30px;
    z-index: 9999;
}


.title-area a {
    color: #fff;
}

.title-area a:hover {
    color: #fff;
}

You can edit it according to your needs and result be like this.

I would love to see your designs using the above CSS.

Related Posts

  • Featured Post Widgets in Columns
  • Site Inner with container background in Genesis Sample
  • Add Logo Between Site Title Area in Genesis
  • Expanding Search Box in Genesis
  • Add Custom Class to the Site Title in Genesis

Categories: Free Content, Genesis Tutorials Tags: Background, CSS

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service