Lightbox previous & next arrows: changing the color and opacity

Sometimes changing style of something in Blocs is kind of difficult. Case in point: the previous and next arrows for the lightbox. Although Blocs does provide a handy subclass for doing this, it doesn’t give me access to the opacity:

blocs-css

The opacity here seems to set the initial display of the arrows. So if I need to increase the contrast between the arrows and the surrounding area, I have to resort to hand writing some CSS code.

Since I’m not really much of a coder, it also confuses me that sometimes the CSS seems to be written differently like “background” vs. “background-color”. Are they the same thing?

You can use opacity through the class editor. When you edit the carousel controls just select an actual colour for the controls and then use the opacity slider in Mac’a standard colour picker. You won’t see the changes in design mode, but you will see the changes in preview mode.

1 Like

Thanks, although I’m already aware of that. The opacity, however is not affected by that. The value doesn’t get overwritten by my CSS. If you look at the code screenshots above you will see that I set the opacity in Blocs to .9, but there is an opacity already/still set to .4 - I had to hand code the cSS and write the opacity tag myself - then it worked.

This might be a job for a sub class.

‘background’ supports lots of different properties like image, colour, placement etc.

‘background-color’ is only the colour property.

If your writing CSS manually then ‘background’ can be good for reducing the lines in the CSS. But if you were targeting just to override a colour you would likely just use ‘background-color’

1 Like

hey thanks dude!