custom CSS applied to custom page templates

  • Resolved lijitimit

    (@lijitimit)


    9 years, 10 months ago

    I have created 2 new page templates in a child theme, working on local server. I am looking to have custom colours and backgrounds for each template. what is the general CSS call for TEMPLATES, not page id. I’ve searched and search through tutorials on creating custom page templates, but the css for them seems to never be present.

    Here is the relevant body class from source: page page-id-5231 page-template page-template-page-whistler-php

    If I use body.page-id-5231 {some rad css} I achieve my goal (sort of) as the changes are applied to THAT page, but any new pages under that template will have to be added to the stylesheet if I want to apply the css changes.

    So, the question is: What is the general css that can be used to apply changes to the template?
    Tried body.page-template page-template-page-whistler-php {some rad css} and other variations. Do I need to call a file path some where in there?

Viewing 4 replies - 1 through 4 (of 4 total)
  • stephencottontail

    (@stephencottontail)

    9 years, 10 months ago

    Do you call post_class() in your custom page template? If so, you can pass a string to post_class() and all pages that use that custom page template will have that additional class which you can target for CSS.

    Thread Starter lijitimit

    (@lijitimit)

    9 years, 10 months ago

    Thanks for stepping in @stephencottontail
    Here are the paste bins. the header parent theme uses this file header
    and the child theme custom page template uses this custom page template

    The main thing I want to change is the body background, so there will be one for PAGE TEMPLATE 1, another for PAGE TEMPLATE 2, and the usual for everything else.

    stephencottontail

    (@stephencottontail)

    9 years, 10 months ago

    Your theme calls body_class(), so this should work:

    body.page-template.page-template-page-whistler-php {
   ...CSS code...
}

    The reason that body.page-template page-template-page-whistler-php (note the space instead of the dot) doesn’t work is because that code looks for an HTML tag with the class “page-template-page-whistler-php” that’s contained within a <body> tag with the class “page-template”. Aren’t CSS selectors fun?

    Thread Starter lijitimit

    (@lijitimit)

    9 years, 10 months ago

    YAY!!!! It worked! Seriously, someone needs to do a tut on this. Couldn’t find it anywhere on the net. The space messed it up. Works great. Thanks and marking as resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘custom CSS applied to custom page templates’ is closed to new replies.