Hello -

URL: saintsabina.org/

A 2 part question:

1.
Is there an easy way for me to add an overlay behind the white "intro text" in the Colourshift Homepage Banner slideshow so that the text will be more visible. I would prefer not to have the image completely under an overlay but that might work. I would prefer to keep using the special "Colourshift styling"

2.
The Zen Tools 2module slideshow under settings offers a choice for the hover effect between 'white" and "black" overlays. Can I change the black choice to a very dark blue with custom CSS?

Sharon

URL: saintsabina.org/

1. something like

.backstretch-wrapper .zt-text-intro {background: rgba(215, 210, 44, 0.1); }

with the title as well something like

.backstretch-wrapper .zt-title h2, .backstretch-wrapper .zt-text-intro {background: rgba(215, 210, 44, 0.1); }

Thanks. I will try it.

That worked pretty well. Can I also add the overlay to the read more?
Or add some vertical padding or margin so the rectangle covers the readmore?

For the readmore

.backstretch-wrapper .zt-readmore {....

adding that to one of the existing lines with the background blue

To position the readmore a bit

#bannerwrap .colourshift .backstretch-title .zt-readmore {margin:0; padding:1em}

Removing space above with the margin removed and adding padding to add space back above and below the readmore

I'd probably try centering the title

#bannerwrap .colourshift .backstretch-title .zt-title * {text-align:center;}

Bit problematic adding padding to the title as some have empty p tags and some not

Not 100% but actually you might be able to center the title in the module itself

Cheers
Paul

Thank you. I will try this and let you know.
Sharon

You're welcome

Best of luck

Cheers
Paul

This looks much better. I think it might look even better still if the blue overlay extended the entire width of the slideshow keeping it same height. Could that be done by adding custom css for the navigation buttons too?

sharon

Do you mean something like

.slideshow-nav-container {background: rgba(003, 087, 160, 0.5); }

Cheers
Paul

That is a possibility, but i would really rather have something that didn't completely cover the image, but just reached across horizontally

Similar to this image: sabina100.cloudaccess.host/images/outreach-orgs/violence-prevention/violence-invention-thumb.png

You could try

@media screen and (min-width: 620px) {
#bannerwrap .colourshift .backstretch-title {width: 100%;}
}

and then center the title in the module settings

Thank you. Working fine.

Sharon

no problem

Cheers
Paul

you might want to check on mobiles - you may need to add a media query for pushing the title down

Cheers
Paul