1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress: Client Wants Each Individual Page To Have It's Own Color Scheme?

Discussion in 'Web Design' started by MeetTheVirus, Jan 9, 2013.

  1. MeetTheVirus

    MeetTheVirus Regular Member

    Joined:
    Dec 25, 2011
    Messages:
    242
    Likes Received:
    98
    Occupation:
    SEO/SEM
    As the title suggest the can anyone recommend an easy way to do this? Or even a Theme that can do this on it's own? So for instance homepage is red, contact us page is blue, about us page is green. I found one that kind of does this:

    http://themeforest.net/item/colors-premium-wordpress-theme/2036427


    but it's not really 100% what he wants and won't really fit well with my client's business model. :(

    Thanks in advance!
     
  2. NojWang

    NojWang Newbie

    Joined:
    Dec 19, 2011
    Messages:
    42
    Likes Received:
    15
    Occupation:
    Entrepreneur
    Location:
    Canada
    Since you are using WordPress then the best way would be to use conditional tags in the theme. This will allow you to test for the specific page (contact us/about us) and then apply the proper CSS to that individual page.

    codex(dot)wordpress(dot)org/Conditional_Tags

    Hope this helps
     
    • Thanks Thanks x 3
  3. davids355

    davids355 Jr. VIP Jr. VIP Premium Member

    Joined:
    Apr 25, 2011
    Messages:
    8,796
    Likes Received:
    6,360
    Home Page:
    Yea, I was going to say same, have main CSS sheet, then have the changables in a separate sheet - and have sheet for each page, then just have if statement in the head to call the particular CSS sheet on a per page basis.

     
    • Thanks Thanks x 1
  4. digithemes

    digithemes Newbie

    Joined:
    Dec 21, 2012
    Messages:
    12
    Likes Received:
    2
    WordPress has "body_class" function that generate certain classes to the body tag.. you can use that class as selector on your CSS

    body.page-id-xx {
    background: red;
    }
     
    • Thanks Thanks x 1