Support » Themes and Templates » Styling pages in a certain "category"

  • Resolved danielle_r

    (@danielle_r)


    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)

    Forum Moderator

    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?

    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)

    Forum Moderator

    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.

    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

    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)

    Forum Moderator

    Try using

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

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

    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.

    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.