A bit of CSS help, please

[Yon (Yon Resch)]

I’m trying to get a background image to be center/center in the Image Card stack, from @weavium, link to site with card.

I can change the CSS in the actual stack plugin to get this, but that is a really poor method. Could someone explain how to find the container information from a browser, and write the CSS to paste on the page? Teach a man to fish…

This is the CSS in the Image Card Stack. Changing top to center works.

And this is the what I see in Firefox > inspect element

In both, I’ve highlighted the part I want to alter.

Thanks,
Yon

[DLH (Don H)]

This CSS will adjust the position of the background of any Weavium Image Card stack to center/center. You can place it in either the page or site-wide CSS area in RW. If you only want to target specific Image Card’s then we’d probably want to add a CSS class to the Image card and target specific Image Cards that way.

.com_weavium_stacks_Image_Card_stack .card-center .card-inner {
    background-position: center center !important;
}

[Yon (Yon Resch)]

Thank you so much Don. I’ll try it out.

Could you explain how you found the container name that you are targeting? I know enough to be dangerous, but not enough to do this myself. And that my just be where I am at as an ex-coder, but new Rapidweaver

[rolisize (r)]

Take a look at

Codafy stack for RapidWeaver

Or

Elemental stack for RapidWeaver

May help you

[DLH (Don H)]

I just used Inspector to confirm where the background image was applied and then worked my way back up in steps until I found the main Weavium class for the Card Image stack.

Class selectors start with a “.”, and I added the classes in order until back down to where the background image is applied. I needed the “!important” to override the more specific ID selector of “card-stack_in_4”. Those tend to change as you add or copy stacks around, so I try to avoid targeting with them.

[Yon (Yon Resch)]

Thank you. That was exactly where I was going wrong in earlier attempts, targeting the “stack_in” class. I may be a bit closer to understanding. More things to try out.

Your CSS above worked perfectly.

[Yon (Yon Resch)]

I’ll check those stacks out, rollsize. Of course Mr. Woodgate would provide a free way to help us along. Thank you for sharing that.

Note: Here is what S4S Elemental shows on this class. Not sure if Don’s “#2” and “#3” above are required, depending on browser? But that code worked and so did just targeting “.card-inner” Fun, fun.