Custom body class for colour scheme

  • Resolved idm

    (@idmtn)


    12 years, 8 months ago

    Hi everyone

    I have customised the twenty twelve theme to match the website I have designed.

    The website has 3 sections, and its own colour style. ie the title colour is different for each section.

    Whats the best way to do this? Should I duplicate the template with its own CSS file, so there are three templates (template green, template red and template blue)

    Or is there a way where when you create a new page, under Page Attributes where you can select the Page Template; maybe have a drop down selecting the colour scheme and this updates the body tag with the colour class? <body class=”red”> Having an option to select the css file or adding the colour the body tag – is this possible?

    I have 3 different page templates so I don’t duplicate each of those 3 template for the colour style… if that makes sense?!

    Hope someone can guide me the the right way to do this!

    Many thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • esmi

    (@esmi)

    12 years, 8 months ago

    I do hope you either created a child theme or forked 2012 into a new standalone themes.

    Thread Starter idm

    (@idmtn)

    12 years, 8 months ago

    Yes I did, I duplicated the twenty twelve theme….

    Any advice on the post?

    esmi

    (@esmi)

    12 years, 8 months ago

    You should be able to do this using pure CSS. Have a look at the classes being generated on the <body> tag.

    Thread Starter idm

    (@idmtn)

    12 years, 8 months ago

    <body class="page page-id-1 page-template-default custom-background single-author">

    I completely understand all this can be done using css, but all the classes are the same on all pages… this is where I could do with a bit of help…

    When the client adds a new page they want to be able to choose which colour scheme (out of three) they want to use…

    esmi

    (@esmi)

    12 years, 8 months ago

    all the classes are the same on all pages

    No they are not. All of your Pages do not have an id of 1, therefore page-id-1 will change from Page to Page.

    Thread Starter idm

    (@idmtn)

    12 years, 8 months ago

    Yea I know that too..

    But the client can’t add code to the CSS and add the page id to the colour they want…

    [No bumping. If it’s that urgent, consider hiring someone.]

    esmi

    (@esmi)

    12 years, 8 months ago

    So setup three custom page templates and apply the CSS to the template-specific class that will be generated on the body tag.

    Thread Starter idm

    (@idmtn)

    12 years, 8 months ago

    Yes I considered that as mentioned in my first post.

    Its not just 3 templates – it’ll be 9 – possibly more that’s why I was hoping there was a better way.

    thank you for your help anyway

    paulwpxp

    (@paulwp)

    12 years, 8 months ago

    This shouldn’t have been a question at all. The body_class() automatically injects almost if not all the classes you ever need.
    http://codex.wordpress.org/Function_Reference/body_class

    If your customized Twentytwelve also contain body_class() in its <body> like the original Twentytwelve, you’d have all the classes you want.

    Michael

    (@alchymyth)

    12 years, 8 months ago

    Or is there a way where when you create a new page, under Page Attributes where you can select the Page Template; maybe have a drop down selecting the colour scheme and this updates the body tag with the colour class?

    you could use custom fields (or possibly one of the custom field plugins) to add a color class choice to the pages, and via a ‘body_class’ filter, add the corresponding body_class…

    Thread Starter idm

    (@idmtn)

    12 years, 8 months ago

    Looks like I haven’t properly explained what I’m trying to do 🙁

    but…

    alchymyth – I think you understand what I am trying to achieve here! Thanks for the suggestion – I’ll look into this and report back! Many thanks! 🙂

    Thread Starter idm

    (@idmtn)

    12 years, 8 months ago

    alchymyth – thank you so much for suggesting using custom fields. That works great. So now when the client adds a new page all they’ll have to do is type in the colour (either red, blue or green) of the page they want – without having to add code of each page id to the CSS.

    Many thanks!

    Also while researching and learning about custom fields I came across a plugin called “custom classes” which works great too! 🙂 Just thought I’d mention.

    Have a good day!

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Custom body class for colour scheme’ is closed to new replies.