Color block behind Multiple Photos widget

Jana Bess · July 18, 2019

I'm trying to do my homework. Looking at Mike and Aaron's CSS customizations before I ask (plus search here). Didn't find this one.

How can I create a color block behind a Multiple Photos widget on my homepage. I placed it at the top to make it easier:
https://www.sexynaveen.com >>>> "Instinct Season Two Episode 3 caps"

I would like to add a percentage to the color block behind the photos (to make it transparent) and specify the color. All of this to make the dark photos more visible - (there's a trend towards darker scenes in movies/TV, I think).

I think I found the correct widget (see attachment): sm-page-widget-GzNX2m4b

QUESTION #2: I moved the Multiple Photos Widget to the top of my homepage to make it easier to learn how to find the widget number, then I will move it back down aways. Will the widget number stay the same when I move it?

Major thanks as always.

Hikin' Mike · July 19, 2019

You're close to finding the widget. It's .sm-page-widget-25661081. The one you selected changes each time the page is loaded. For question #2, if you move it, the CSS stays the same.

So, this will put a "black" background behind those images at 50%.
.sm-page-widget-25661081 {background: rgba( 0, 0, 0, .5 ) ;}

Jana Bess · July 19, 2019

Wow, works great! Looks fantastic. >>> https://www.sexynaveen.com/

Can I add some code to increase the top and bottom margins of the color block (especially to be below the "Load more" button)?

Hikin' Mike · July 19, 2019

@Jana Bess said:
Can I add some code to increase the top and bottom margins of the color block (especially to be below the "Load more" button)?

Yes. Depending on what you want it to look like, you can add margin to increase the spacing between the widgets. Adding padding will increase the content within the widget. If you want to add padding, you'll have to add it via CSS. If you want to add margins, you can just add that to the widget.

This will add 20px top/bottom and none left/right.

.sm-page-widget-25661081 {
    background: rgba(174, 168, 211, .3);
    padding: 20px 0;
}

Jana Bess · July 19, 2019

Fantastic! Thanks much, Mike.

Color block behind Multiple Photos widget

Comments