Change Individual Page Colors with CSS

  • Author
    Posts
  • #1201581

    jaclynmuns
    Member

    HI there. I know basically nothing about CSS but would like to change the color of each page (tab) on my site. I have bought the CSS upgrade and tried researching online, but haven’t found anything easy enough for me to know how to do it. I’m using the Adventure Journal theme and would basically like to change the color of the middle section (beneath the header image and above the bottom section with my log and social feeds). Is this possible and if so, could someone send me code to put into CSS Stylesheet editor? Many, many thanks!

    The blog I need help with is marketingfemaleathletes.com.

    #1201697

    What you have to do is to look at the source code and get the ID for each individual menu item and it will appear in the source as something like menu-item-27. Since that is an ID, in the CSS it has to start with the # sign, so you would use #menu-item-27. You identify the correct ID for each menu item and then create the selectors like below. (The colors I’ve specified are of course, just examples.)

    #menu-item-25 {
    background: #CC0000;
    }
    
    #menu-item-22 {
    background: #003388;
    }
    
    #menu-item-23 {
    background: #3FC700;
    }
    
    #menu-item-96 {
    background: #8800C7;
    }
    
    #menu-item-130 {
    background: #C78800;
    }
    
    #menu-item-24 {
    background: #00A2c7;
    }

    Do note that you will have to create a new rule in the CSS for each additional top level menu item you add.

    If you need to adjust the colors for the text, then you would do this for each one you need to change the font color on. (Example only)

    #menu #menu-item-25 a {
    color: #333333;
    }

    #1201711

    jaclynmuns
    Member

    Thanks so much. I did this and it only changed the background of the word in the menu bar – I was wanting to change the actual page color of those pages. I’m assuming it’s changing the “#menu-item” part to some thing else, but I’m just not sure what? Thanks so much for your help!

    #1201723

    Oh, my bad, I misunderstood. What you have to do is to look in the opening body selector for the page ID selector. In the case of your about page, that is class “page-id-2”. You would thens do this for each page (changing out the page-id-2 bit for each specific page) and edit the color:

    .page-id-2 .entry-title {
    color: #AC4E06;
    }

    Sorry for my misunderstanding.

    #1201724

    That should say, “…opening body TAG for the page ID selector.”

    #1201903

    jaclynmuns
    Member

    I’m so sorry, I really am a starter at this. Where do I find the opening body selector? I’m not sure exactly what that is/where to find it? Thanks so much for all your help!

    #1201904

    jaclynmuns
    Member

    OH, nevermind, I found it! However, that is only changing the color of the title of the page, not the actual background part of the part (not the entire site background, but the inset part of each page (About Us, Services, Athlete Gallery, etc).

    #1201905

    Are you talking about the light colored background behind the header image and content?

    #1201906

    jaclynmuns
    Member

    Yes, exactly. Is that possible to change?

    #1201911

    That is made up of 3 different images, it isn’t just a color.

    Top left: http://s0.wp.com/wp-content/themes/pub/adventure-journal/images/header-top.png
    Top right corner:http://s0.wp.com/wp-content/themes/pub/adventure-journal/images/header-top.png
    Content body: http://s0.wp.com/wp-content/themes/pub/adventure-journal/images/mp-sprite-content-bg.png
    Footer: http://s0.wp.com/wp-content/themes/pub/adventure-journal/images/footer-background.jpg

    You would have to recreate those four images, in the exact size of the original, for each and every page, in the colors that you desired.

    You could dump them and just go back to a standard color declaration, but then that short of takes away what makes Adventure Journal unique.

    #1201912

    “… 4 different images… ”

    #1201946

    jaclynmuns
    Member

    Thank you so much, that makes sense. Sounds pretty complicated, so I’ll stay away from that. What about changing the entire pages background color for each page? I.E. right now, it’s a dark gray on every page – can I change that color for each page (About Us, Services, etc), so it changes when I click from one page to the next? Thanks again for all your help :)

    #1201947

    You have to find the page ID selector for each page. For your main blog page (home) it would be “blog” so you would do this:

    body.blog {
    background: #cc0000 !important;
    }

    You would create rules for each additional page you have on your site. If you look at the source code for each page (view source in your browser) you will see classes listed in the opening body tag. For example, your about page is page id 2, so you would do this for your about page:

    body.page-id-2 {
    background: #3FC700;
    }

    Continue on with all of your other pages. If a color does not take, and there are no syntax errors, add the “!important” attribute as I have on the first example above for the main page.

    #1201950

    jaclynmuns
    Member

    Thank you so very much – this was so helpful!

    Just one more quick question, that I actually was almost able to figure out. For the site title and tagline, is there a way to make that box thinner so it doesn’t cut into the header images on each page? Like, maybe cut the height of it in half? Thanks again!

    #1201951

    You can adjust the top and bottom padding for #logo to regain some of it.

    #logo {
    padding-bottom: 22px;
    padding-top: 22px;
    }

    I might suggest possible a re-crop on the image to move the athlete down into the image a little further.

    #1201952

    jaclynmuns
    Member

    Ok, perfect. Thank you.

    Probably another dumb question, but once I make one set of changes (to the backgrounds), how do I then make another set of changes? Just continue in on the same .css edit box, below the first changes?

    #1201953

    Yes, just add in all the rules for all the different pages one right after the other in the CSS edit window.

    #1201954

    jaclynmuns
    Member

    Ok, see, I finished all the page color coding and now want to make the changes to the site title and tagline – can I do all that in the same CSS edit window? I’m trying to do it, but the site title changes aren’t being made? Content codes are below…

    body.blog {
    background: #8080;
    }

    body.page-id-2 {
    background: #E39725;
    }

    body.page-id-19 {
    background: #DC143C;
    }

    body.page-id-14 {
    background: #1A1F4A;
    }

    body.page-id-95 {
    background: #DAA520;
    }

    body.page-id-118 {
    background: #8B0000;
    }

    body.page-id-10 {
    background: #5E2270;
    }

    #logo {
    padding-bottom: 22px;
    padding-top: 22px;
    }

    #1201955

    Did you edit the 22px values? Those are the original top and bottom padding values.

    #1201957

    jaclynmuns
    Member

    thank you soooooo very much! i got it and it’s exactly how the owner wants it. i greatly appreciate all of your patience and help!

The topic ‘Change Individual Page Colors with CSS’ is closed to new replies.