WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Styling pages in a certain "category" (9 posts)

  1. danielle_r
    Member
    Posted 1 year 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.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year 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?

  3. danielle_r
    Member
    Posted 1 year 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,

  4. esmi
    Theme Diva & Forum Moderator
    Posted 1 year 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.

  5. danielle_r
    Member
    Posted 1 year 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

  6. danielle_r
    Member
    Posted 1 year 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.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try using

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

    You can't combine a class and an id in a selector like that...

  8. danielle_r
    Member
    Posted 1 year 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.

  9. danielle_r
    Member
    Posted 1 year 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.

Topic Closed

This topic has been closed to new replies.

About this Topic