How to Target the Header Text in the CallOut Module

Beaver Builder
1

Hi,

I am having a devil of a job trying to change the colour of the font in the Callout header but not the icon. (The header text is EXPRESS DELIVERY) The CSS via the browser is

<h3 class=“fl-callout-title”>
span class=“fl-icon”>
<span EXPRESS DELIVERY</span>

I am using the class textred and writing
.textred h3.fl-callout-title {
color: red;
}

but the icon and the header text go red when I just want the header text to go red. I have tried using the word span before and after the CSS class without success.

Any advice would be gratefully received ! Many thanks

Stephen

2

[Content Hidden]

3

Cracked it at last. Here is the solution I used for anyone else with the same problem. If there is a better way then please say.

With icon and heading changed to one colur - then apply css to get the icon back to whatever colour you want as follows:

.textred span {
color: red;
}
.textred .icon-truck {
color: black;
}
.textred is the class I used for the callout. icon-truck is the class of the icon.

4

Hey Stephen,

Glad you figured it out! And thanks for sharing your method, we really appreciate it. :slight_smile:

Enjoy!

Ben