callout settings advanced. 2 Questions

Hi there,

This is very basic. In the callout module I want to modify the header text in the boxes.
Example: in top left box of my site: the header is: etc* = Marktonderzoek
I would like the “etc*” part to be orange and bold. Something like you what see below.

{ text-align: left; color: #FD5407; font: 35px Helvetica, Verdana, Helvetica, Verdana, arial, sans-serif; font-weight: bold; }

(My knowledge of css is limited, but I can figure things out)

Question 1:
How would I use the 2 css selector boxes. i.e. exactly what would I put in the top box and what would I put in the box below? Once I have an example I can come up with variations myself.

Question 2:
When I select an icon to be shown in the heading, I have the option to place it -Left of Heading- , however when I select a photo to be shown I do not have the -Left of Heading- option?? Can that be modified in the Advanced css section?

Thank you for your help.


Hi Hans,

Thanks for getting in touch! For question 1, I typically use the ID field and put in a class that makes sense like custom-callout, go over to the child theme, target that class and apply the CSS needed. You can also insert custom CSS in the customizer > code section if you like. Let us know if you need anything further here, we’re happy to help!

On question 2, unfortunately, that isn’t modifiable. The left of text/heading option is the only one available for the photo option and that is by design. Icons can be a lot smaller than images so it makes sense to keep an image left of text and heading as opposed to just one.


Hi Billy,

Thank you. I tried very hard, but I couldn’t get it to work.
I know it’s not your job to teach me css, but given what I’m trying to do, could you tell me what the css that I should put into the child theme actually looks like? (I do understand that I should put something like: custom-callout in the callout settings, advanced, id section).

Thank you so much,


Hey Hans,

We need to be able to target that certain word via CSS so we need to place a class on it. On your Callout module, try placing this on the header. <span class="orange-bold">etc*</span> = Marktonderzoek Then on your stylesheet, you can place something like this.

.orange-bold { 
  text-align: left; 
  color: #FD5407; 
  font: 35px Helvetica, Verdana, Helvetica, Verdana, arial, sans-serif; 
  font-weight: bold; 

Let us know how it goes!


Hi Ben,

Thank you so much! Worked like a charm. I didn’t realize you could put code in the header area.
I was messing with the css selectors in the advanced section.

Have great day,


Hey Hans,

No worries! The CSS selectors applies to the entire row/column/module you placed it on. Since we only needed to change that one word, we can place inline with the text. :slight_smile: Have fun!