Content slider

Beaver Builder
1

Experimenting with content slider.

I would like to add shadow to some text in the slider, however it doesn’t seem to work when I try to do it in BeaverBuilder. Any advise on how to proceed?

I would also like to move the paragraph text a bit closer to the slider heading - say 5-10px. Is this possible somehow?

FYI: I am thinking of having the slider here: https://www.isci.one/all-forums/

2

Hey Michael,

How were you trying to add shadow to the texts? Via custom CSS? Re moving the paragraph texts, this should also be done via custom CSS. It would really help if you placed your content slider there so we can actually see what you mean. :slight_smile:

Ben

3

First please try to refresh on your end to see the content slider. The site is hosted in Europe so it may take some time to update in the US via CDN :slight_smile:

This is how I have been trying to add shadow to text:
Beaver Builder -> Content slider settings -> Edit slide -> Style -> Text shadow -> Yes

It seems to work but I would like a bit more punch on the shadow.

I have found the relevant CSS in Firefox inspector:
.fl-node-560c3bf3dee3d .fl-slide-0 .fl-slide-title, .fl-node-560c3bf3dee3d .fl-slide-0 .fl-slide-text {
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

I want it changed to:

{
text-shadow: 0px 3px 5px rgba(0, 0, 0, 1);
}

Do I need to include all references ‘’.fl-node-560c3bf3dee3d .fl-slide-0 .fl-slide-title, .fl-node-560c3bf3dee3d .fl-slide-0 .fl-slide-text’’ in custom.css?

As for changing the distance between header text and paragraph text the relevant CSS code still eludes me. Perhaps you can be of some assistance?

Michael

4

Hey Michael,

Yes, you’ll have to include those selectors so they have the same specificity but your custom CSS should be given priority. By default your title is given a bottom margin of 20px. You can override that by using a similar selector for your title above…

.fl-node-560c3bf3dee3d .fl-slide-0 .fl-slide-title {
  margin-bottom: 10px !important;
}

Ben

5

I see that I need to do it for every single slide:

.fl-node-560c3bf3dee3d .fl-slide-0 .fl-slide-title, .fl-node-560c3bf3dee3d .fl-slide-0 .fl-slide-text {
text-shadow: 0px 3px 5px rgba(0, 0, 0, 1);
}

.fl-node-560c3bf3dee3d .fl-slide-1 .fl-slide-title, .fl-node-560c3bf3dee3d .fl-slide-1 .fl-slide-text {
text-shadow: 0px 3px 5px rgba(0, 0, 0, 1);
}

… and so on…

Is there a nicer way of doing this?

6

Right, forgot about that. Try the snippet below instead.

.fl-content-slider .fl-slide .fl-slide-content .fl-slide-title, 
.fl-content-slider .fl-slide .fl-slide-content .fl-slide-text {
  text-shadow: 0px 3px 5px rgba(0, 0, 0, 1);
}

Ben

7

Thanks!

It seems to be working with:

.fl-content-slider .fl-slide .fl-slide-content .fl-slide-title,
.fl-content-slider .fl-slide .fl-slide-content .fl-slide-text {
text-shadow: 0px 3px 5px rgba(0, 0, 0, 1);
margin-bottom: 0px !important;
}

8

Awesome! Enjoy BB! :slight_smile:

Ben