How to add shadow area beneath the text on slides

Free Joomla module to create slideshow on your website which includes different data like part of articles or text defined by user.
Rate this topic: Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.
GK User
Wed May 27, 2015 4:37 am
I'd like to know whether it is possible to add a shadow area beneath the text on slides. It will add the readability of slideshow. My temporary way is to create the area by customizing the slide picture itself, but it is not good when you read it through mobile device, because the shadow area is fixed, not responsive. Do you have any other solution to fix that? Please check my web site (www.me-bi.com) for the detail. Thanks
User avatar
Fresh Boarder

GK User
Wed May 27, 2015 7:13 am
Hi,
if you have imagination and some skills all is possible.
Start from that:
.gkIsWrapper-gk_university figcaption p, .gkIsWrapper-gk_university figcaption a {
color: #fff;
text-shadow: 1px 1px 1px #222;
}
User avatar
Platinum Boarder

GK User
Thu May 28, 2015 9:02 am
Hi Thanks for your post, but which css file should I put those code? I put it in override.css, but no effect.

Oscar E wrote:Hi,
if you have imagination and some skills all is possible.
Start from that:
.gkIsWrapper-gk_university figcaption p, .gkIsWrapper-gk_university figcaption a {
color: #fff;
text-shadow: 1px 1px 1px #222;
}
User avatar
Fresh Boarder

GK User
Thu May 28, 2015 9:05 am
Because you forgot to enable using override.css,
if you don't mind ....read that: https://www.gavick.com/documentation/jo ... a-template

you can simply add into template settings, there also Custom CSS code field :whistle:
Even more visible will be:
.gkIsWrapper-gk_university figcaption p, .gkIsWrapper-gk_university figcaption a {
color: #fff;
text-shadow: 2px 1px 1px #111;
}
User avatar
Platinum Boarder

GK User
Thu May 28, 2015 9:43 am
I tried but still not work. Can you help me to figure out what's wrong with that? I've PM you the account info. Thanks!

Oscar E wrote:Because you forgot to enable using override.css,
if you don't mind ....read that: https://www.gavick.com/documentation/jo ... a-template

you can simply add into template settings, there also Custom CSS code field :whistle:
Even more visible will be:
.gkIsWrapper-gk_university figcaption p, .gkIsWrapper-gk_university figcaption a {
color: #fff;
text-shadow: 2px 1px 1px #111;
}
User avatar
Fresh Boarder

GK User
Thu May 28, 2015 10:46 am
but you have now shadow under text
here.jpg

but
If you want to have sort of background.... I will add into your code, in next few seconds.
User avatar
Platinum Boarder

GK User
Thu May 28, 2015 10:50 am
Ok, now you have also BG color with transparency, I added extra line after my previous code
User avatar
Platinum Boarder

GK User
Thu May 28, 2015 11:02 am
It works! That's what I need. Thank you so much for your support!

Oscar E wrote:Ok, now you have also BG color with transparency, I added extra line after my previous code
User avatar
Fresh Boarder

GK User
Thu May 28, 2015 2:36 pm
First you asked about shadow and I didn't thought that we are talking about background :)
I used rgba color, it's quite simple to use, described in all books about CSS3.
User avatar
Platinum Boarder


cron