separate styling for sideboxes

[ilsita]

I would like to have the top padding in the left and right sideboxes set to different values, but both seem to be bound together in the .centeredcontent area.

How do I style these separately?

Thank you!

ilsita

[ilsita]

Sorry, I mean .sideboxcontent not .centeredcontent

[kdays]

Hi ilsita

Each sidebox has been given a div id. You just need to add this (along with your required styling) to your stylesheet.css.

For example, if you want the Categories sidebox styled differently to the others, add something like:

#categories {
color: #94cd666;
text-align: right;
}


#categoriesHeading {
text-transform: lowercase;
text-align: right;
}

That should do the trick.

[ilsita]

Thank you kdays!

I think I need something a little more complicated :)

My categories is a list of ezpages, and I took down my regular "categories" list. Then, I added a new image to the title of the ezpages, and adjusted the .sideboxcontent padding to accomodate it, but the change takes effect in both sideboxes...

I hope that makes sense.

[kdays]

Still should be the same thing, you're just styling #ezpagesHeading and #ezpagesContent instead as the sidebox you want to style differently.

[ilsita]

I must have really hashed things up.

The only thing that seems to adjust the padding of the ezpages categories list is .sideboxcontent. But that adjusts both columns at once. (Using #categories didn't seem to have any effect at all.)

I think what I might have to do is add a couple of classes, to distinguish one from the other?

The left column says this:

#ezpages .leftboxcontainer
#ezpagesheading .leftboxheading
#ezpagescontent .sideboxcontent

And the right column says this (same for "search", "manufacturers" etc):

#searchcontent .sideboxcontent
.centeredcontent

[gjh42]

CSS classes and ids are case sensitive. You need to follow the capitalization exactly for a selector to be recognized.

#ezpagescontent .sideboxcontent

is not the same as

#ezpagesContent .sideBoxContent

Your stylesheet appears to do this correctly, so that's not the problem. (except for this:)

.leftboxheading {
background-image: url("..images/categorieshd.gif");
margin-bottom: 20px;
}

You have lots of different rules that can apply to the same sidebox elements, scattered over your stylesheet. I don't have time to examine them all now, but you should make sure that the specific ones for the ezpages sidebox are after all generic .sideBoxContent rules and the like.

[ilsita]

Oh my gosh, I know I have made a complete mess in there. I tend to tinker before I know what the heck I'm doing. Sort of bombsaway!

OK, I'll go back in and try to straighten things up.

Thank you!

CSS classes and ids are case sensitive. You need to follow the capitalization exactly for a selector to be recognized.

#ezpagescontent .sideboxcontent

is not the same as

#ezpagesContent .sideBoxContent

Your stylesheet appears to do this correctly, so that's not the problem. (except for this:)

.leftboxheading {
background-image: url("..images/categorieshd.gif");
margin-bottom: 20px;
}

You have lots of different rules that can apply to the same sidebox elements, scattered over your stylesheet. I don't have time to examine them all now, but you should make sure that the specific ones for the ezpages sidebox are after all generic .sideBoxContent rules and the like.