Style div inner for different pages

[treestone]

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

[Jared Williams]

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:

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

---

Website | Twitter | Instagram | Google +

[Chris Cree]

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:

.nopadding #inner {
        padding: 0;
}

[cavemedia]

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.

🙂

[cavemedia]

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;
}

[Author]

Posts