Change colour of Call Out title

Support
#1

How can I change the colour of the Call Out title? Thanks

[callout type=“left” title=“Visit Ubud Monkey Forest” message=“Find out everything you need to know about visiting the Ubud Monkey Forest & check out the cutest semi-wild monkey photos you’ve ever seen!” button_text=“Read more” href=“https://diytravelhq.com/ubud-monkey-forest/” target=“blank”]

#2

Hello Sheena,

Thanks for writing in! The Callout Title will inherit the color of the headings which you have set in X > Theme Options > Typography > Headings. If you want to display a different color, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-callout .h-callout {
    color: red;
}

.x-callout .p-callout {
    color: green;
}

I used red and green to easily see the changes. Feel free to change it to your desired color that matches your site.

#3

Thanks. I made the change (see below) but the title colour hasn’t changed.

I also tried the below code (as per a previous thread) but that doesn’t work either:

.x-callout .x-btn {
color: #ff6600 !important;
}

#4

Hello Sheena,

All the code that we have given were tested first in our local testing servers. You may have inserted an invalid css which created an issue and why the code did not work. As I have inspected the css code, you added this:

@media (max-width:979px){
    .masthead-stacked .x-btn-navbar{
        color:#333;
    }
    .home .x-anchor-button{
        font-size:0.7em !important;
    }
    .home .x-anchor-button span{
        padding:5px 3px !important;
        margin-top:5px;
    }
    .home .x-grey-img{
        margin-bottom:30px !important;
    }
    @media (max-width:600px){
        .e12137-4.x-text .x-text-content-text-primary{
            padding:20px 40px;
            font-size:1.5em;
            line-height:1.3;
        }
        .e12137-5.x-text{
            font-size:1.5 em;
        }
        .e12137-18.x-image{
            width:auto !important;
        }
        .e12137-19{
            text-align:center;
        }
    }
    @media (max-width:600px){
        .e12137-19{
            padding-top:30px;
        }
        .e12137-25.x-anchor{
            box-shadow:none;
        }
        .e12137-35 .h-custom-headline{
            font-size:calc(20px + 5vw);
        }
        @media (max-width:600px){
            .e12137-25.x-anchor .x-graphic-icon,.e12137-26.x-anchor .x-graphic-icon,.e12137-27.x-anchor .x-graphic-icon,.e12137-28.x-anchor .x-graphic-icon{
                font-size:3em !important;
            }
            .e12137-19.x-column{
                text-align:center;
            }
            @media only screen and (max-width:600px){
                .alert-name{
                    margin-top:20px !important;
                }
                .x-callout .h-callout{
                    color:red;
                }

There were missing curly braces in the code above. If I have to correct the code, it should probably be like this:

@media (max-width:600px){
    .e12137-4.x-text .x-text-content-text-primary{
        padding:20px 40px;
        font-size:1.5em;
        line-height:1.3;
    }
    .e12137-5.x-text{
        font-size:1.5 em;
    }
    .e12137-18.x-image{
        width:auto !important;
    }
    .e12137-19{
        text-align:center;
    }
}

@media (max-width:600px){
    .e12137-19{
        padding-top:30px;
    }
    .e12137-25.x-anchor{
        box-shadow:none;
    }
    .e12137-35 .h-custom-headline{
        font-size:calc(20px + 5vw);
    }
}

@media (max-width:600px){
    .e12137-25.x-anchor .x-graphic-icon,.e12137-26.x-anchor .x-graphic-icon,.e12137-27.x-anchor .x-graphic-icon,.e12137-28.x-anchor .x-graphic-icon{
        font-size:3em !important;
    }
    .e12137-19.x-column{
        text-align:center;
    }
}

@media only screen and (max-width:600px){
    .alert-name{
        margin-top:20px !important;
    }
}

.x-callout .h-callout{
    color:red;
}

Hope this helps. Please let us know how it goes.

#5

Yes it works now! Thank you so much RueNel! :slight_smile:

#6

You are most welcome!
We’re glad we were able to help you out.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.