Need help with header area

Community Forums Forums Design Tips and Tricks Need help with header area

This topic is: resolved

This topic contains 9 replies, has 3 voices, and was last updated by  Tonya 4 months, 4 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #112146

    susanjanec
    Participant
    Post count: 10

    I’m trying to change the colors on the Crave theme, and I can’t seem to figure out how to make the top header all pink. Right now there is green on the sides and I want that whole area to be the pink color. Can anyone help?

    Screenshot: http://www.cakeb0t.com/Screen%20Shot%202014-06-30%20at%201.55.30%20PM.png

    Thanks!

    #112151

    AC
    Blocked
    Post count: 7712

    Look for this and change the color:

    body {
        background-color: #cdefec;
    }
    #112155

    susanjanec
    Participant
    Post count: 10

    That didn’t work.

    #112158

    AC
    Blocked
    Post count: 7712

    Please turn the site on so we can take a look.

    #112162

    susanjanec
    Participant
    Post count: 10

    I went ahead and turned the site on. But I will have to put it back on maintenance mode as the new look is not ready for the public.

    #112167

    Tonya
    Member
    Post count: 190

    Hi Susan,

    Right now the <header> is set to a fixed width, which is why the pink color stays in that area only. To make it go full-width, please do the following within your style.css file:

    .site-header {
    margin: 0 auto;
    overflow: hidden;
    width: 100%; /* 1000px; */
    background-color: #cdefec; /* Add the background color here */
    }
    .site-header .wrap {
    width: 1000px;
    }

    Notice we are making the .site-header full width (100%) while moving the fixed width to the .site-header .wrap tag.

    You need to make changes for the mobile responsive areas too within the style.css file (add the .wrap after .site-header):

    @media only screen and (max-width: 1024px) {
    	.site-inner,
    	.site-header .wrap, 

    The rest are fine as they are already set to 100% for mobile.

    Cheers


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    #112170

    susanjanec
    Participant
    Post count: 10

    That seemed to work but now the header text is not in line with the content body area. I want to kind of mimic this site – http://musingssahm.com/

    #112477

    Tonya
    Member
    Post count: 190

    Sorry about, Susan. I forgot to have you add the following lines to the .site-header .wrap styling within your style.css file.

    .site-header .wrap {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    }

    Give that a go.


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    #112505

    susanjanec
    Participant
    Post count: 10

    Thank you Tonya! That worked!!

    #112506

    Tonya
    Member
    Post count: 190

    You’re very welcome!

    If you’d do me a favor, please set this thread to Resolved.

    Enjoy your day :)


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

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

The topic ‘Need help with header area’ is closed to new replies.