Styling pages in a certain "category"

  • Resolved danielle_r

    (@danielle_r)


    13 years, 6 months ago

    Hi,
    In my website I’m using a structure of pages. Most of the pages and their children are styled green but for two page subjects I want to use different colours. I have for example the parent called “inspiration”. I want the parent and all its children to use orange on the background and the menu.
    I thought it would be easy just looking for the category and then replacing it with the appropriate style sheet. But pages don’t use categories, only posts do. So how do I go about creating the different looks for different subjects in my site? Do I have to make templates or can it be solved with css only? Note, I just want to change the colours, not the layout or functionality.

    I hope someone can put me on the right track. Thanks very much in advance for your help, best, danielle.

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

    (@esmi)

    13 years, 6 months ago

    Have you tried looking at the source markup of the generated pages for any classes that you could use. Does your theme use the body_class() function, for example?

    Thread Starter danielle_r

    (@danielle_r)

    13 years, 6 months ago

    Hi esmi,

    Thanks for your quick response. I use a custom child theme for the twentyeleven theme. I kept most of the classes in place.
    If I understand you correctly you suggest to use custom classes for the different subject in for example the page div? How/where would I indicate when to use other colour set?
    Where can I find the body_class function?

    Thanks again, best,

    esmi

    (@esmi)

    13 years, 6 months ago

    you suggest to use custom classes for the different subject in for example the page div?

    Twenty Eleven uses the body_class() function to generate a whole list of classes on the body tag of the generated pages. You can use these classes to target your new CSS at specific pages.

    Thread Starter danielle_r

    (@danielle_r)

    13 years, 6 months ago

    OK, esmi, thanks that pretty powerful!
    So you can target the parent by using its page id like this:
    .page-id-7 element {/*style*/}
    And all the children:
    .parent-pageid-7 element {/*style*/}
    To target the classes at the same time like this:
    .page-id-7 .parent-pageid-7, element {/* style */}

    I’ll have to dive into the styling a little more but the basics are clear. Thanks again. Best, danielle

    Thread Starter danielle_r

    (@danielle_r)

    13 years, 6 months ago

    Hmm, I think I was a bit too optimistic with my styling results. The above code styles the element on _every_ page. I’m trying to work out how to target a specific element in for example page-id-7.
    On the page there’s div element called logo. If I want to change properties of the div with the id logo how do I go about it? I’ve tried (among other things):

    #logo.page-id-7 {
    background-color: #000;
    }
    This is the logo in the css file:
    #logo{
    width:340px;
    height:177px;
    background-color:#66CCCC;
    text-align:center;
    padding:19px 0;
    float:left;
    }

    But the background colour doesn’t change. FYI this is the link to the website: http://awarenesslab.nl/inspiratie/

    Hope someone can put me on the right track, TIA, danielle.

    WPyogi

    (@wpyogi)

    13 years, 6 months ago

    Try using

    .page-id-7 #logo {
    background-color: #XXXXXX;
}

    You can’t combine a class and an id in a selector like that…

    Thread Starter danielle_r

    (@danielle_r)

    13 years, 6 months ago

    Hi WPyogi,
    Thanks a lot, works like a charm. One more question. If I want to style both .page-id-7 and .parent-pageid-7 the same way is there a way of combining them? I’ve tried .parent-pageid-7, .page-id-7 #logo and .page-id-7, .parent-pageid-7 #logo but always only one works…

    So can you combine classes or do I have to put everything twice in the css file?

    Thanks very much in advance for your help, best, danielle.

    Thread Starter danielle_r

    (@danielle_r)

    13 years, 6 months ago

    OK, I had a brainwave, this is the answer:
    .parent-pageid-7 #logo, .page-id-7 #logo{
    background-color: #FF9933;
    }
    So you have to repeat both the class and other item. HTH someone. Cheers.

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

The topic ‘Styling pages in a certain "category"’ is closed to new replies.