Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Colourshift: Overlay for banner slideshow behind white text

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

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
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
Last Edit: 2 years 2 months ago by ssartjb.
The administrator has disabled public write access.
URL: saintsabina.org/
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
1. something like

.backstretch-wrapper .zt-text-intro {background: rgba(215, 210, 44, 0.1); }
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
with the title as well something like

.backstretch-wrapper .zt-title h2, .backstretch-wrapper .zt-text-intro {background: rgba(215, 210, 44, 0.1); }
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks. I will try it.
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
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?
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
Last Edit: 2 years 1 month ago by ssartjb. Reason: edit
The administrator has disabled public write access.
For the readmore

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

adding that to one of the existing lines with the background blue
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 2 years 1 month ago by manh.
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I'd probably try centering the title

#bannerwrap .colourshift .backstretch-title .zt-title * {text-align:center;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Bit problematic adding padding to the title as some have empty p tags and some not
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Not 100% but actually you might be able to center the title in the module itself

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you. I will try this and let you know.
Sharon
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
You're welcome

Best of luck

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
Do you mean something like

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

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
You could try

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

and then center the title in the module settings
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you. Working fine.

Sharon
  • ssartjb's Avatar
  • ssartjb
  • 12 Month Developer
  • 343 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
no problem

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
you might want to check on mobiles - you may need to add a media query for pushing the title down

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers