Halp!

[megwrites]

I'm trying to customize my layout. I'm using For The Bold, and what I'd like to do is take each section of the side bar and make it a different color.

So, the top part with my icon would be, say, red, and then the navigation would be blue and the recent entries green, and so on and so forth. I'm not sure how to do this in CSS. Any help you can give would be really great!

Comments

[branchandroot]

You need to check the html source to see what the specific name (class) of each module is. Inside "module-section-one" div, each module has an individual name, and you use those to specify the background color. The start would look like this:

.module-userprofile { background-color: red; }
.module-navlinks { background-color: blue; }
.module-calendar { background-color: green; }

And so on down the line. Put that in your Custom CSS box, and you should be good to go.

I expect you'll also want to add:

#secondary .inner:first-child { background-color: transparent; }

to get rid of the whole-sidebar color.

This is a general overview of what to do, do not be afraid to admit not knowing what it means

[foxfirefey]

Question: what is your CSS level, and are you familiar with using browser developing tools to see what CSS is doing?

Basically, you are going to have to:

* Reset the color set here to nothing, because you are doing each one individually, and the border radius to nothing, since you will put that onto the individual modules:

#secondary > .inner:first-child, 
.three-columns #tertiary > .inner:first-child, 
.one-column #tertiary > .inner:first-child {
    background-color: #D93D04;
    border-radius: 5px 5px 5px 5px;
}

* Also take away the padding, you will have to add it into the modules instead:

#secondary > .inner:first-child, 
#tertiary > .inner:first-child {
    padding: 2px 10px;
}

* Then, go through the things on your sidebar and add the colors. You can do it using the classes of each module (http://wiki.dwscoalition.org/wiki/index.php/S2_CSS:_Module_ids_and_classes -- this list might need updating, come to think of it). This way would probably be easier conceptually, and work in old browsers, but you'd have to manually do it for every color.

* Or you can use CSS3 selectors for the module classes: http://reference.sitepoint.com/css/pseudoclass-nthchild If you do this, you can make repeating colors that are in the right sequence no matter how you rearrange the modules on the side or no matter how many modules there are, without doing them all individually.

* You will also need to add the border radius to the top and bottom modules, for the right corners. This, too, can be done with individual module selectors or CSS3 last and first child selectors.

Re: This is a general overview of what to do, do not be afraid to admit not knowing what it means

[megwrites]

My CSS level is...uh. Not good?

I don't understand most of this, and I've been trying to without any luck for the last two days. Are there any references for people who need to start from the ground up in understanding these things?

I think I'm more confused than I was when I started.

Thanks for taking the time to answer my original question in such detail though!

Re: This is a general overview of what to do, do not be afraid to admit not knowing what it means

[foxfirefey]

Okay in this case, you're going to need to specifically lay out your requirements, I think, so we can make you something that works for you. Aka, be very specific about what you want--list of order of specific background colors for modules.

There are some things that are very easy to point out to people with not-so-good CSS levels but this particular instance has just a couple things that make it really tricky to teach but not-that-hard doable to somebody who knows CSS.

If you want to start learning some CSS from the ground up, I did the first half of a CSS styles course under this tag before life subsumed me: http://style-system.dreamwidth.org/tag/!style+making+class

And it would pretty much get you started, I think!