• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How Do I change the color of my header?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How Do I change the color of my header?

This topic is: resolved
  • This topic has 14 replies, 3 voices, and was last updated 9 years, 10 months ago by amzzzg.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 17, 2013 at 1:46 am #28500
    amzzzg
    Member

    I have the Agency theme and the header is black. It's all done in code, not by color so I can't simply look for "black" obviously. I've tried a few places and cannot figure out where. IS it under Header? Wrap? I just do not know. My site isn't live to be able to post it here for someone to look at the black but it has to be a common change that I as a newbie cannot grasp. Can someone please post the code and a changed code with a diff color than black> That way I can locate it and change it to the color I want.

    Thank you

    March 17, 2013 at 4:12 am #28514
    bandj
    Member

    Agency uses a background image in the body which repeats all the way across so the header doesn't have a background.

    body {
    background: #f1f1f1 url(images/bg.png) repeat-x;

    }

    the #header also is 960px wide so it doesn't stretch across the whole screen. You can give the header a color by adding
    background: yourcolor;

    to the #header

    March 17, 2013 at 6:43 pm #28710
    amzzzg
    Member

    Bandj- I added a color to the background of the image and that did help some, thank you very much! I am still having trouble with the rest of header area being black. I did add the color  code I want to the background area and still nothing. Can you tell me where to replace the code with my preferred color?  I just cannot figure this out, it's been hours. Here is the code:

    /* Body ------------------------------------------------------------ */

    body {  background: #e5e9ee url(images/bg.png) repeat-x; }

    /* Wrap ------------------------------------------------------------ */

    #wrap {  margin: 0 auto;  width: 1000px; }

    /* Header ------------------------------------------------------------ */

    #header {  margin: 0 auto;  min-height: 200px;  overflow: hidden;  text-shadow: 1px 1px #000;  width: 110%; }

    #title-area {  float: left;  min-height: 100px;  overflow: hidden;  padding: 15px 0 0;  width: 350px; }

    #title {  font-family: 'PT Sans', sans-serif;  font-size: 60px;  line-height: 1;  margin: 0;  text-transform: uppercase; }

    #title a, #title a:hover {  color: #fff;  text-decoration: none; }

    #description {  font-family: 'PT Sans', sans-serif;  font-size: 14px;  text-transform: uppercase; }

    p#description {  color: #777; }

    #header .widget-area {  float: right;  padding: 40px 0 0;  width: 500px; }

    /* Image Header - Partial Width ------------------------------------------------------------ */

    .header-image #title-area, .header-image #title, .header-image #title a {  display: block;  float: left;  height: 115px;  overflow: hidden;  padding: 0;  text-indent: -9999px;  width: 350px; }

    .header-image #description {  display: block;  overflow: hidden; }

    /* Image Header - Full Width ------------------------------------------------------------ */

    .header-full-width #title-area, .header-full-width #title, .header-full-width #title a {  width: 100%; }

    /* Navigation Constants ------------------------------------------------------------ */

    li:hover ul ul, li.sfHover ul ul {  left: -9999px; }

    li:hover, li.sfHover {  position: static; }

    li a .sf-sub-indicator {  position: absolute;  text-indent: -9999px; }

    /* Header / Primary / Secondary Navigation ------------------------------------------------------------ */

    .menu-primary, .menu-secondary, #header .menu {  margin: 0;  padding: 0;  overflow: hidden;  width: 100%; }

    .menu-primary li, .menu-secondary li, #header .menu li {  float: left;  list-style-type: none;  text-transform: uppercase; }

    #header .menu {  float: right;  width: auto; }

    .menu-primary li a, .menu-secondary li a, #header .menu li a {  color: #1d3b6c;  display: block;  font-size: 14px;  padding: 6px 15px 4px;  position: relative;  text-decoration: none; }

    .menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a, .menu-secondary li a:active, .menu-secondary li a:hover, .menu-secondary .current_page_item a, .menu-secondary .current-cat a, .menu-secondary .current-menu-item a, #header .menu li a:active, #header .menu li a:hover, #header .menu .current_page_item a, #header .menu .current-cat a, #header .menu .current-menu-item a {  -moz-border-radius: 5px;  -moz-box-shadow: 0 1px 0 #cb4d56;  -webkit-border-radius: 5px;  -webkit-box-shadow: 0 1px 0 #cb4d56;  background-color: #1d3b6c;  border-radius: 5px;  box-shadow: 0 1px 0 #cb4d56;  color: #cb4d56; }

    .menu-primary li li a, .menu-primary li li a:link, .menu-primary li li a:visited, .menu-secondary li li a, .menu-secondary li li a:link, .menu-secondary li li a:visited, #header .menu li li a, #header .menu li li a:link, #header .menu li li a:visited {  -moz-border-radius: 0;  -webkit-border-radius: 0;  background: none;  border-bottom: 1px dotted #333;  border-radius: 0;  box-shadow: none;  color: #cb4d56;  font-size: 13px;  padding: 5px;  position: relative;  text-transform: none;  width: 138px; }

    .menu-primary li li:last-child a, .menu-secondary li li:last-child a, #header .menu li li:last-child a {  border: none; }

    .menu-primary li li a:active, .menu-primary li li a:hover, .menu-secondary li li a:active, .menu-secondary li li a:hover, #header .menu li li a:active, #header .menu li li a:hover {  color: #fff; }

    .menu-primary li ul, .menu-secondary li ul, #header .menu li ul {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  background-color: #1d3b6c;  border-radius: 5px;  height: auto;  left: -9999px;  margin: -5px 0 0;  padding: 3px 10px 5px;  position: absolute;  width: 148px;  z-index: 9999; }

    .menu-primary li ul a, .menu-secondary li ul a, #header .menu li ul a {  width: 130px; }

    .menu-primary li ul ul, .menu-secondary li ul ul, #header .menu li ul ul {  margin: -34px 0 0 149px; }

    ul.menu li:hover>ul, ul.menu li.sfHover ul, #header .menu li:hover>ul, #header .menu li.sfHover ul {  left: auto;

     

     

    March 17, 2013 at 7:57 pm #28718
    bandj
    Member

    you can add a color to

    #header {

    color: yourcolor;

    }

    but it won't fill the whole screen. It will fill the 960px area only. You would have to change the background image if you wanted it to go all the way across like the demo.

    The only other thing you could do would be to adjust the widths of all the divs and wraps.

    March 17, 2013 at 9:33 pm #28733
    amzzzg
    Member

    Thank you for your time but adding color isn't what I'm trying to do. I just want the image to go up there and all the black around my image to go away. I do appreciate your time though.

    March 18, 2013 at 9:17 am #29003
    Pinky
    Member

    All the black is coming from the background image - not the header.

    So if that's what you are looking to get rid of you need to change this:

    /* Body ———————————————————— */
    
    body {  background: #e5e9ee url(images/bg.png) repeat-x; }
    

    to this:

    /* Body ———————————————————— */
    
    body {  background: #e5e9ee; }
    

    At least I think that's what you mean (?)


    cheers

    Pinky

    March 18, 2013 at 4:42 pm #29196
    amzzzg
    Member

    I put the mess of a site live so you can see what I'm talking about. The logo is NOT supposed to be this huge mess on there that you will see it is. We have tried to reduce the image many different ways and it keeps distorting. All the black area around the already screwed up header is what I am talking about. Can you also tell me what to do about the size of the logo? We have spent days and days trying. So frustrating.

    http://www.usmcfamilies.org

     

    site is just a complete mess.

    March 18, 2013 at 5:21 pm #29210
    bandj
    Member

    your link goes to this

     
    Briefly unavailable for scheduled maintenance.

    March 18, 2013 at 5:43 pm #29218
    Pinky
    Member

    hehe we'd love to be able to help you... can you please turn off maintenance mode so we can see your site


    cheers

    Pinky

    March 18, 2013 at 6:00 pm #29225
    amzzzg
    Member

    I am so sorry to both of you. I think I have lost so much sleep trying to figure this out that I thought I disabled it--- it is now disabled so you can see the mess I have.  I cant get logo to shrink without distortion. I cant get a filler to fill up all that black space and now I cant get the slider to work right either! I am so dismayed.  I had this site designed by a developer and paid good money and she wiped it out when we downsized. Do upsetting.

    March 18, 2013 at 6:19 pm #29238
    bandj
    Member

    your background image is 960x389 so...

    in your #header

    change min-height to 389px

    and then to make it scale down as the window gets smaller add this also.

    background-size: contain;

    March 18, 2013 at 8:39 pm #29280
    amzzzg
    Member

    Thank you very much- that helped me fill the color in and get the whole logo to show!!!!!!     That logo is far too big for the header. When I am using photoshop elements to reduce it- terrible distortion occurs. Do you know a way for me to make it smaller? The developer only gave us one size and that was for print she said. We don't know what to do.

    March 19, 2013 at 4:31 am #29359
    bandj
    Member

    I'm not familiar with options in elements. Print to web usually have to change dpi (300 to 72) mode (cmyk to rgb). Resample image type (bicubic smoother, bicubic sharper). Save for web...I don't know that elements have these features.

    One other thought. Open your site and do a screen capture, open that in elements, cut out the image and go from there. If you're using chrome (not sure if firefox does this) you can hold down the option key and hit the + key to enlarge the image before you do the screen grab.

    March 20, 2013 at 4:25 pm #29810
    Pinky
    Member

    I often use Picture Resize Genius from lonking.com (not an affiliate)

    It's quick and easy and will do bulk image resize, rename and more

    I can usually do a few hundred images in around 15 seconds!


    cheers

    Pinky

    March 22, 2013 at 8:55 pm #30615
    amzzzg
    Member

    Thank you all for your help. Bandj- that worked! Pinky- I am using that now for another part of the site thank you for suggesting!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble