callout settings advanced. 2 Questions

BB Theme
1

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.

Hans.

2

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.

Best,
Billy

3

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,

Hans.

4

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!

Ben

5

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,

Hans.

6

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!

Ben