Style div inner for different pages

Community Forums Forums Design Tips and Tricks Style div inner for different pages

This topic is: not resolved

Tagged: 

This topic contains 4 replies, has 4 voices, and was last updated by  cavemedia 1 year, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7767

    treestone
    Participant

    Hi,

    How can I use my general theme but change the css class per page.

    This is the css I have

    #inner {
    background: url(images/bg-top.jpg) repeat-x top;
    padding: 40px 0 20px;
    overflow: hidden;

     

    but on some pages I would like it to be

    #inner {
    background: url(images/bg-top.jpg) repeat-x top;
    overflow: hidden;
    (remove the padding)

    Thanks

    #8184

    Jared Williams
    Participant
    Post count: 47

    On you individual pages look under “Layout Settings”. There you can define a Body Class.

    So, if your page was an About page that you wanted styled differently, you could add “about” (no quotes) in the Body Class field, then style it accordingly using:

    [css]
    .about #inner {
    background: url(images/bg-top.jpg) repeat-x top;
    overflow: hidden;
    padding: 0;
    }
    [/css]


    #8206

    Chris Cree
    Participant
    Post count: 147

    Or you can use the same custom body class for all the pages to keep things simpler for you. Something like a body class of nopadding might be less confusing instead of the page title.

    Add the style like Jared said with the “generic” class instead. As long as it is below your existing #inner definition in your stylesheet you only need to add the bit(s) you want to change. In this case it’s the padding. So you can simplify it to this:

    [css].nopadding #inner {
    padding: 0;
    }[/css]


    #10302

    cavemedia
    Participant
    Post count: 12

    This is just what I was looking for… except that I’d like to set a different tag for the home page (Enterprise Child Theme). The home page is not listed.

    :)

    #10370

    cavemedia
    Participant
    Post count: 12

    Answer to my own question above…

    I looked at the body tag on the home page and noticed it included a class called “home”, so I simply created a tag called .home #inner with the new style defined.

    NOTE: You Must define all style elements on the new style in order to cancel out the first style:

    For example, if your inner style includes a background…
    #inner{
    background: url(/wp-content/uploads/bg-inner.png);
    border: 1px solid #fefadb;
    }

    The background will NOT be removed unless you define the background as none
    .home #inner {
    background: none;
    border: none;
    }

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.