Twenty Twelve Page specific styles

  • Resolved lynnema

    (@lynnema)


    12 years, 2 months 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: https://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!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter lynnema

    (@lynnema)

    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!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter lynnema

    (@lynnema)

    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">

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter lynnema

    (@lynnema)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter lynnema

    (@lynnema)

    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”>

    To target only that page, you would use:

    body.page-id-7

    Thread Starter lynnema

    (@lynnema)

    Thanks WpYogi –

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

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Here’s what a selector is
    https://www.w3schools.com/cssref/css_selectors.asp

    Thread Starter lynnema

    (@lynnema)

    I did Wpyogi – no dice

    https://69.195.124.71/~indusuf6/company/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Yes, follow my first post.

    Thread Starter lynnema

    (@lynnema)

    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!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Twenty Twelve Page specific styles’ is closed to new replies.