[The-TriunesParticipant]

How do I change the color of this callout class? It is currently black. I’m using Integrity number 3.

[callout class=”mvn” type=”center” title=”Ready to Get Started?” message=”If you’re ready to finally take your site to the next level, click below to purchase X.” button_text=”Click to Purchase” href=”#” target=”blank” button_icon=”flag”]
[/content_band]

What would be the code, and where do I make the changes.

Thank you.

[CousettMember]

Change the code a bit to be the following:

[callout class="mvn" style="color: red;" type="center" title="Ready to Get Started?" message="If you're ready to finally take your site to the next level, click below to purchase X." button_text="Click to Purchase" href="#" target="blank" button_icon="flag"]
[/content_band]

Change “red” for whatever color you are looking for either in its short name or hex value.

[The-TriunesParticipant]

Thanks, that changes the font color. I need to change the box and border color.

[ChristopherModerator]

Hi there,

Please add the following CSS code under Customize -> Custom -> CSS:

.x-callout.mvn:before {
background-color: #ff0000;
border:1px solid #ff0000;
}

Hope it helps.

[The-TriunesParticipant]

Thanks again. That worked, however there seems to be a border around the border that is still black

[RadModerator]

Hi there,

Would you mind providing url address and screenshot?

Thanks.

[The-TriunesParticipant]

http://magickal-mysteries.com/ – you can see the border on this page, if not I’ll get the screenshot

[ChristianModerator]

Hey there,

Please try

.x-callout.mvn {
background-color: red;
}

Hope that helps. 🙂

[The-TriunesParticipant]

Thanks that did it – you guys do have the best support… however, what I was calling a small border is actually a shadow, it’s black. I’ve put in the codes above as is. Check it out…

http://magickal-mysteries.com/

[ChristianModerator]

Please add the CSS below in the Appearance > Customize > Custom > CSS to eliminate the shadow.

.x-callout:before {
-webkit-box-shadow: none;
box-shadow: none;
}

If you want to change the color, please use and modify the code

.x-callout:before {
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.035),0 1px 2px rgba(0,0,0,0.45);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.035),0 1px 2px rgba(0,0,0,0.45);
}

Notice the first rgba(255,255,255,0.035). 255,255,255 is white and 0.035 is the opacity. That is the color of the first shadow. The second one is rgba(0,0,0,0.45). 0,0,0 is black and 0.45 is the opacity. Please modify the RGB values (first three numbers) and the opacity value (max is 1). Please see http://cloford.com/resources/colours/500col.htm for RGB color values or you can use the tool http://www.colorpicker.com/.

Thanks.

[AtahualpaSeyffertParticipant]

Hi,

i want to do something similar.
But i just want to change the color of just this one section, not the entire class.

what would i have to change/insert here:

[callout type=”left” button_icon=”home” title=”Unser Gourmet Restaurant” message=”Lassen Sie sich verzaubern vom einzigartigen Ambiente des Schlosses und der vielfach ausgezeichneten Küche von Martin Scharff.” button_text=”Unsere Speisekarte” button_style=”color: #5E2154;” href=”http://schlossweinstube.heidelberger-schloss-gastronomie.de.w011aefd.kasserver.com/”]

Or can i achieve this by inserting the code into the “(Optional) Enter inline CSS” Field in the options of the callout shortcode?

[CousettMember]

Yes this will add inline CSS so that others stay the same.

[AtahualpaSeyffertParticipant]

Sorry,

i explained it wrong.
I wanted to change the button color.
Both the color and the hover color. The rest should stay as is.

Thank you!

[CousettMember]

Could you provide us with your URL so we can best assist you with the custom code needed.

[AtahualpaSeyffertParticipant]

Sure, here you go:

http://www.heidelberger-schloss-gastronomie.de.dd34128.kasserver.com

[Author]

Posts