Docs

[jennymbutterfield]

Hello!

url: http://www.jennybutterfield.com
X Version: 4.6.4

I have a call out box on my home page that does not fit into my branding’s color scheme… but I cannot find the controls that govern those colors.

Could you either tell me where to look or give me the CSS to change the primary, secondary, and font colors in the call out boxes? Thank you!

Jenny

[Jade]

HI Jenny,

Would you mind providing us with the direct link where the callout box is so that we can check it?

Thank you.

[jennymbutterfield]

Home

It’s at the bottom of the page on my home page. If you need anything else, please let me know.

[Prasant Rai]

Hello There,

Please try using following CSS and let us know how it goes:

.x-callout a.x-btn {
    border-color: #ddd;
    background-color: #c0c0c0;
    text-shadow: 0 0.075em 0.075em rgba(200, 200, 200, 0.5);
    box-shadow: 0 0.25em 0 0 #8a7c7b, 0 4px 9px rgba(192, 192, 192, 0.75);
    color: #000;
}

Thanks.

[jennymbutterfield]

Thank you for the code.

I put the code into the Global CSS in the “Customize” section… no change.

Please make another suggestion. Thank you!

Jenny

[Lely]

Hi Jenny,

Unfortunately, I didn’t see a callout element. See this:http://screencast-o-matic.com/watch/cbeDiU6BLC
The page contains an image, videos and woocommerce shortcode. Did I miss something here?

[jennymbutterfield]

Hi Lely,

The box is in your video… the blue box at the bottom of the page, the “Modern Woman Warrior” definition box is the element that I’m talking about.

When I’m in the “edit page” mode for my home page, that element is a wc_box in my short code menu.

I hope that helps!

Jenny

[Lely]

Hello Jenny,

Thank you for the clarification. I am expecting a callout box like this:http://screencast-o-matic.com/watch/cbebfL6g9c. That is the reason above CSS is not working. It is for a button on that element not on what you currently have which is a wc-shortcodes. Please use the following CSS instead:

.wc-shortcodes-box.wc-shortcodes-box-inverse {
    background-color: #e4ecf3; /*change to your preferred background color*/
    border: 1px solid #428bca; /*change to your preferred border color*/
}
.wc-shortcodes-box.wc-shortcodes-box-inverse p:first-child>span, .wc-shortcodes-box.wc-shortcodes-box-inverse p:first-child>span>strong {
    color: red !important; /*change to your preferred font color for MODERN WOMAN WARRIOR text*/
}
.wc-shortcodes-box.wc-shortcodes-box-inverse p:first-child>span>em {
    color: yellow !important; /*change to your preferred font color for noun text*/
}
.wc-shortcodes-box.wc-shortcodes-box-inverse p>span {
    color: green !important; /*change to your preferred font color for other text*/
}

Feel free to remove my comments on the CSS
Hope this helps.

[jennymbutterfield]

Thanks, Lely!

That worked like a charm! Thanks again.

Jenny

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts