WordPress.org

Forums

[resolved] Twenty Twelve Page specific styles (18 posts)

  1. lynnema
    Member
    Posted 2 years ago #

    Hi everyone -

    I have developed a number of sites using Twenty Eleven. I'm familiar with using child themes, etc. For a new project, I'm checking out Twenty Twelve.

    I'm having the hardest time with the simplest thing - making template specific styles. In the past, I've created a custom page template, created a custom header and pointed that header at a specific stylesheet.

    I'm completely lost as to how to do this in this new setup. I also was trying to create page specific styles, but I don't seem to be able to create them.

    Here is a sample page: http://69.195.124.71/~indusuf6/company/

    I tried using this: .page-template-page-inner-php body {background: none repeat scroll 0 0 #000;} and .template-page-inner body {background: none repeat scroll 0 0 #000;} Neither worked.

    The page template name is page-inner

    I don't want to have to use the page ID, because I'm going to have a number of different pages, and this won't be extensible. I really want it to be by page template.

    Any help would be greatly appreciated. Thanks in advance!

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Your CSS selectors are wrong.
    Remove the body selector. Do you understand why this was wrong?

  3. lynnema
    Member
    Posted 2 years ago #

    Hi Andrew -

    No, I really don't - I want to change the body background color, but only on pages with that template.

    Can you tell me what the line should be, and why?

    Thanks!

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Look at this W3Schools example on how to add styles to a <p> tag with a class http://www.w3schools.com/cssref/sel_class.asp

  5. lynnema
    Member
    Posted 2 years ago #

    I guess what I'm having trouble with is knowing what the page class is :-)

    when I look at the page in Firebug, I see:

    <body class="home page page-id-5 page-template page-template-page-home-php custom-background custom-font-enabled single-author">

    Is there a way to use the template name as a selector?

    Edited for page specific body class
    <body class="page page-id-7 page-template page-template-page-inner-php custom-background custom-font-enabled single-author">

  6. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    For CSS-specific support, consider CSS-specific forums.

  7. lynnema
    Member
    Posted 2 years ago #

    Hi Andrew -

    I just really need to know how to pull the proper class out of the WordPress page... I know css and how to use it. That isn't my problem.

    Can you tell me what the page template specific class is?

  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    You can pull classes out of websites by using a browser inspector tool like Firebug.

  9. lynnema
    Member
    Posted 2 years ago #

    Hi Andrew - I attached the code that I pulled out using Firebug - i just don't know which part of that line is the class selector. Thanks!

    Edited for page specific body class
    <body class="page page-id-7 page-template page-template-page-inner-php custom-background custom-font-enabled single-author">

  10. WPyogi
    Forum Moderator
    Posted 2 years ago #

    To target only that page, you would use:

    body.page-id-7
  11. lynnema
    Member
    Posted 2 years ago #

    Thanks WpYogi -

    Is there any way to do this by template name instead of page id?

  12. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Sorry, just reread your OP... Did you try body.page-inner

  13. Andrew
    Nuh uh moderator
    Posted 2 years ago #

  14. lynnema
    Member
    Posted 2 years ago #

  15. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Is there any way to do this by template name instead of page id?

    Yes, follow my first post.

  16. lynnema
    Member
    Posted 2 years ago #

    Great Andrew - what is the template name selector in the above example? Is it:

    page-template-page-inner-php
    or
    page-inner-php
    or
    page-inner

    That is what I can't figure out. Thanks!

  17. alchymyth
    Forum Moderator
    Posted 2 years ago #

    this html code:

    <body class="home page page-id-5 page-template page-template-page-home-php custom-background custom-font-enabled single-author">

    translates for instance for the css into:

    body.page-template-page-home-php { ... }
    or
    .page-template-page-home-php { ... }
    or
    .home.page-template-page-home-php { ... }
    or in extreme
    body.home.page.page-id-5.page-template.page-template-page-home-php.custom-background.custom-font-enabled.single-author { ... }
    etc.

    w3school.com is good reference site - review those links posted by @Andrew Nevins - this will save you a lot of trouble in the future.

    you can't build a dream castle without proper foundations.

  18. lynnema
    Member
    Posted 2 years ago #

    So, I finally got it figured out. If anyone else is trying to figure out what the class is for template based pages, it is:

    page-template-page-inner-php

    So - what follows page-template and before php.

Topic Closed

This topic has been closed to new replies.

About this Topic