Need help? Check out our Support site, then


Change Individual Page Colors with CSS

  1. 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.

  2. 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;
    }

  3. 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!

  4. 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.

  5. That should say, "…opening body TAG for the page ID selector."

  6. 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!

  7. 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).

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

  9. Yes, exactly. Is that possible to change?

  10. 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.

  11. "… 4 different images… "

  12. 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 :)

  13. 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.

  14. 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!

  15. thesacredpath
    Staff

    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.

  16. 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?

  17. thesacredpath
    Staff

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

  18. 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;
    }

  19. thesacredpath
    Staff

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

  20. 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!

  21. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic