How Do I change the color of my header?

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

This topic is: resolved

This topic contains 14 replies, has 3 voices, and was last updated by  amzzzg 1 year, 5 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #28500

    amzzzg
    Participant
    Post count: 16

    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

    #28514

    bandj
    Participant
    Post count: 163

    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


    #28710

    amzzzg
    Participant
    Post count: 16

    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;

     

     

    #28718

    bandj
    Participant
    Post count: 163

    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.


    #28733

    amzzzg
    Participant
    Post count: 16

    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.

    #29003

    Pinky
    Participant
    Post count: 95

    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:

    [css]
    /* Body ———————————————————— */

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

    to this:

    [css]
    /* Body ———————————————————— */

    body { background: #e5e9ee; }
    [/css]

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


    cheers

    Pinky

    #29196

    amzzzg
    Participant
    Post count: 16

    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.

    #29210

    bandj
    Participant
    Post count: 163

    your link goes to this

     
    Briefly unavailable for scheduled maintenance.


    #29218

    Pinky
    Participant
    Post count: 95

    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

    #29225

    amzzzg
    Participant
    Post count: 16

    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.

    #29238

    bandj
    Participant
    Post count: 163

    your background image is 960×389 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;


    #29280

    amzzzg
    Participant
    Post count: 16

    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.

    #29359

    bandj
    Participant
    Post count: 163

    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.


    #29810

    Pinky
    Participant
    Post count: 95

    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

    #30615

    amzzzg
    Participant
    Post count: 16

    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!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.