Target the Background of a Content Block in Order to Change the Color?

Darter02

I'm currently playing around with my homepage a bit. I didn't like the way I had it. I'm attempting to make it more "personal."

Anyway, one of the things I'd like to do is to see if I can change the background color of the Feed Block. I'm curious if having it be a different color will look nice. I can't test what I see in my mind because I can't seem to sort out what to target with CSS.

The feed block.



I also think it could be useful to target the space taken up by HTML blocks. I use them for titles, text fields, etc.



I don't want to just embed a block of color rigidly on the page, and hope it lines up with my content block. If I can get the actual background of a block to be a different color, I'd not have to worry about the content "sliding off" of it when seen on different screen sizes.

As always, any help is super appreciated.

Allen

Every widget block as a unique class name so you should be able to define the background.

Darter02

I tried this code as an experiment to see if I could change the feed background, but no dice. Am I using the wrong modifiers, or whatever you call the command lines to change things?

.sm-page-widget .sm-page-widget-feed .sm-page-widget-358353 {
background-color: rgba(175, 0, 190, 0.6);
padding: 20px;
}

Allen

You only need this unique name.
.sm-page-widget-358353
Try it without all the rest.

Then add !important

background-color: rgba(175, 0, 190, 0.6) !important;
padding: 20px !important;

Darter02

WOW! THAT worked! That color is one crazy purple...

Thanks, now to refine the color.

If you ever go birding in lower/western Wisconsin, I'll meet up with you and buy you one of our fine malt beverages.

Darter02

This what I used, and it worked perfectly. Also, just a heads up on padding for anyone else who may try this. Since the content block is a set size the padding can't extend beyond it. Instead, the higher your padding number, the more the content scales down INSIDE the box.

.sm-page-widget-358353 {
background-color: rgba(57, 60, 51, 0.25) !important;
padding: 1px!important;
}