I've added some blocks created by the Views module. Now I'd like to change the way the blocks display. I'd like to change the background and outline of the blocks. What file should I modify? Or copy. It's a CSS file, right? Should I add something to style.css?

Advice is welcome, or point me to the forum entry that already explains what I need to know. Or step-by-step instructions - that'd be nice.

Thanks.

Comments

jeremy_a’s picture

Hi Arthur,

You can change the CSS of blocks with the .block class. So in your style.css file, add:

.block 
{
background-color: pink;
}

This will change all of your blocks to pink. Then you can isolate the right class/div for your view, and add this to the css: eg, the class .views-view-grid (this will pick up all grid views in blocks)

.block .views-view-grid
{
background-color: yellow;
}

For example, you can drill down to the specific title of your page, eg h3

.block .views-view-grid h3
{
color: red;
}

See how it cascades?

I recommend the Firebug Firefox plug-in to help you write the CSS of your pages. You can study CSS here. Good luck

ArthurC’s picture

Thanks, Jeremy. That was helpful and it worked well. I set the values for the class selector ".view-content". Much appreciated.