Edit classic callout element

Support
#1

Is it possible to edit the classic callout? I would like to make the boxes transparent if possible but cant seem to be able to edit them in Cornerstone

#2

Hi there,

There is no option to make the boxes of the callout element transparent. But you can do it with custom CSS code. Kindly add the transparentcallout class to the callout element:

And add the code below to X > Launch > Options > CSS:

.x-callout.transparnetcallout,
.x-callout.transparnetcallout:before {
    background-color: transparent;
}

That will do it. If you need further assistance kindly get back to us with the exact page URL that you have the callout and the exact changes you want.

Thank you.

#3

Thank you, I see how that works now. Ideally I would like the call out to look very similar but to have degree of transparency rather than being totally transparent, is that easy to do?

Actually my terminology may be wrong, on further research I think opacity may be what I’m looking for.

#4

Hey Christian,

Don’t use opacity because that will reduce the opacity of the content also. Instead, replace transparent with RGBA

Thanks.

#5

Thank you, do I do that in the same way as before? Apologies this is all new to me.

#6

Yes, like this:

.x-callout.transparnetcallout,
.x-callout.transparnetcallout:before {
    background-color: rgba(0,0,0,0.5);
}
#7

Hi There Christian, thats it yes thank you.

#8

Glad that er could be of a help :slight_smile:

#9

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