Docs

[ottobono]

Hi, I would like to change callout colors. I assigned my column the custom class “mycallout”. I am using integrity dark. What I want are following properties (they must be valid only for the callout wiht class “mycallout” and not globally!):

1) no border (the frame around the callout)
2) inside background (not around border but background on the inside) color white
3) title (h2) color #a47c47
4) text (p) color #a47c47

I attached a pic. How is it possible to do it with css? Thank you! 🙂

[ottobono]

Hi, I forgot to put in the image that I wanted the inside background color to be changed to white

[Rue Nel]

Hello There,

Thanks for writing in! To change the colors of the callout element, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-callout:before {
    background-color: #fff;
}

.h-callout,
.p-callout {
    color: #a47c47;
}

Please let us know if this works out for you.

[ottobono]

aye, it did the trick, thank you! 😉

p.s. why the :before and how can I reference a specific class (like mycallout) instead of modifying all callouts?

[Rue Nel]

Hello There,

To make sure that your customizations will only affect your custom callout, please use this code instead:

.mycallout.x-callout:before {
    background-color: #fff;
}

.mycallout .h-callout,
.mycallout .p-callout {
    color: #a47c47;
}

Hope this helps.

[ottobono]

thank you, it worked! 😉

[John Ezra]

You’re most welcome! 🙂

[Author]

Posts