Questions regarding color scheme and stylesheet

Community Forums Forums Design Tips and Tricks Questions regarding color scheme and stylesheet

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  nutsandbolts 6 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #104963

    kvancio
    Member
    Post count: 8

    I have two questions pertaining to the site I am doing for a friend. The theme/framework only gives a few select choices for color schemes, (the lack of white color for the header is boggling) but I want to make the header color background maroon, which definitely isn’t in the drop down list.

    Secondly, I know i can do this on the main home page for the background color, but how would I make it so all the individual pages also had this custom background color, or image. I can’t seem to figure out the stylesheet spot to make all the individual pages a custom color as well.

    I will attach the link to this post.

    Thank You,
    KVancio

    http://www.pickfishstudios.com
    #104968

    nutsandbolts
    Keymaster
    Post count: 3187

    Here’s a tutorial (screenshots and video) that will show you how to find and change CSS elements with Chrome’s Inspector in case you aren’t familiar with it: http://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

    If you aren’t using one of the color options provided in the theme, you can actually remove that entire section from the stylesheet – that helps reduce clutter and makes it easier to find what you’re looking for. You can then customize the “main” CSS rules as you like.

    Here is the easiest way to change the header background color on every page:

    (1) Remove the header image from Appearance > Header (we’re going to add it back, I promise!)

    (2) Find this rule in your stylesheet:

    .site-header {
    margin: 0 auto;
    max-width: 1140px;
    }

    and change it to this:

    .site-header {
    background: #800000 url(http://www.pickfishstudios.com/wp-content/uploads/2014/05/left_logo2.png) no-repeat !important
    margin: 0 auto;
    max-width: 1140px;
    }

    What that does is add the header image manually so that you can assign a background color that will show across the entire site. It shouldn’t change any other part of the header.

    You’ll want to change that #800000 to the hex code for the color you want to use – I just grabbed one at random.

    (3) Add the same background color to .head .wrap in your stylesheet. Find this:

    .optimal-black .head-wrap {
    background: #000;
    }

    and change #000 to the color you want.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

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

You must be logged in to reply to this topic.