Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Change text color Thumb slider for each image

Featured Lock Resolved Task
Hello, is it possible to select the text color for each image that appears in the Thumb Slider? Some images have a light background and others have a dark background, so in some images the text is clearly visible in others and is confused with the details of the image in the background. What I need is to be able to choose the right text color for each image to have the right contrast with the background

5 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Try to use this CSS code inside on your custom.css file.


.sppb-addon-thumb-gallery #slider .slides > li:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}


-Thanks

promaster

More than a month ago #Permalink
Hi Toufiq, the code you showed me should change the color of the text on all images, I need the color of the text that appears on each image is the most suitable to be pleasantly seen, for easy reading.
For each image the color of the most suitable text.
A specific field should be provided in the Add-on to choose the color of the superimposed text.

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Download the site.php zip file and replace site.php file below location.

templates/shaper_revibe/sppagebuilder/addons/thumb_slider/site.php


.slider-item-1 h1.slider-title {
color: red;
}
.slider-item-1 p.slider-sub-title {
color: red;
}


.slider-item-2 h1.slider-title {
color: green;
}
.slider-item-2 p.slider-sub-title {
color: green;
}



.slider-item-3 h1.slider-title {
color: black;
}
.slider-item-3 p.slider-sub-title {
color: black;
}



.slider-item-4 h1.slider-title {
color: yallow;
}
.slider-item-4 p.slider-sub-title {
color: yallow;
}


-Thanks

Attachments (1)

  • site.zip 2.9 KB

promaster

More than a month ago #Permalink
Hi Toufiq, I replaced the site.php file and added the css code above in the custom.css file, now everything works as I wanted. I noticed that you could also choose the color of the title and subtitle from the Front-End of the AddOn.
Best regards!

.sppb-addon-thumb-gallery .flexslider .slider-title-wrap { top:81%!important;}

/* Colori Slider */
.slider-item-1 h1.slider-title { color: white; }
.slider-item-1 p.slider-sub-title { color: whitesmoke; }

.slider-item-2 h1.slider-title { color: white; }
.slider-item-2 p.slider-sub-title { color: whitesmoke; }

.slider-item-3 h1.slider-title { color: #4AA208; }
.slider-item-3 p.slider-sub-title { color: #063D17; }

.slider-item-4 h1.slider-title { color: #CF5309; }
.slider-item-4 p.slider-sub-title { color: #612C00; }

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Thanks for your reply. You are most welcome & Thanks.

-Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 146
Sifat

Sifat

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 45
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 2
RV

RAFFAELE VIOLA

Total Accepted Answers: 1

116

Templates

298823

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us