[Tim FParticipant]

Hi X Team,

I am using Icon and have a callout box w/a background color that is the same as my Site Link color (blue). I’m using white text inside the callout box and when I link some of the text it washes out since it turns blue. How can I override the hyperlinks to maintain the white text? You can see what I’m talking about at http://www.pmastore.com/about/…hover on the text in #’s 1 and 2 and you’ll see the hyperlinks reappear. I’m sure this has an easy answer but it has me perplexed.

Thank you in advance for your help!

Tim

[Tim FParticipant]

P.S. In reading the forum it appears that the social icons can be used as social sharing buttons also, but I can’t figure out how to turn them on. Do I need a plug-in like Share Buttons by AddToAny or can I accomplish that with X? All I’m wanting to do is have some share buttons at the end of my blog posts. Thanks again.

Tim

[ChristopherModerator]

Hi there,

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

.calloutbox a {
color: white;
}

Please follow this thread http://theme.co/x/member/forums/topic/social-sharing-buttons-on-posts/

Hope it helps.

[Tim FParticipant]

Thanks…that brought the white text back. Is there a way to better show it as a link now? Say with an underline that stays on the hyperlink all the time? BTW, here’s the code I now have in my CSS…

.calloutbox {
border: 1px solid #CCC;
background-color: #1E73BE;
width: 40%;
float: left;
padding: 15px;
font-size: 16px;
color: #fff;
margin: 10px 20px 20px 0;
}

.calloutbox a {
color: white;
}

[Kosher KMember]

Hi There,

You can add an underline to links by adding text-decoration: underline; to a link element

should be

.calloutbox a {
color: white;
text-decoration: underline;
}

Hope that helps,

Have a great day

[LeannaParticipant]

Hi, I need to change the bg color of the Callout box, but for me the codes I’ve found so far only make the border transparent, the main body of the callout box still remains white. I want to know:
1) How to change the color of the callout box bg
2) How to change the color of the callout box title text (currently it is white and therefore not visible against the white bg – to see it plz scroll to the bottom of this page: http://www.leannacinquanta.com.

Code tried so far includes various adaptations on:

.x-callout {
background-color: transparent;
}

.calloutbox {
background-color: #000000;
}

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

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

[Kosher KMember]

Hi There,

for #1,

use this selector,

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

These are the original style you can override,

.x-callout {
position: relative;
margin: 2.626em 0;
border: 1px solid #ebebeb;
padding: 2.35em;
font-size: 21px;
font-size: 2.1rem;
background-color: #f7f7f7;
border-radius: 0.5em;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.95),0 1px 3px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.95),0 1px 3px rgba(0,0,0,0.05);
}

.x-callout:before {
content: "";
display: block;
position: absolute;
top: 14px;
left: 14px;
right: 14px;
bottom: 14px;
border: 1px solid #ebebeb;
background-color: #fff;
border-radius: 0.275em;
z-index: 0;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.05),0 1px 0 0 rgba(255,255,255,0.95);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05),0 1px 0 0 rgba(255,255,255,0.95);
}

For number two, use this selector h-callout

e.g.

.h-callout {
 color: #000;
}

Hope that helps,

Cheers

[LeannaParticipant]

Excellent, thank you! That worked great.
You know, I wouldn’t be bothering you folks as much if I could find out where to access the basic CSS behind the theme and shortcodes (as you’ve kindly pasted some of it here which I quickly copied out to my database of X-theme code snippets). The Stylesheet has nothing in it that looks familiar to me so where can i find this base code?

[Kosher KMember]

Hi There,

This might help -> http://www.youtube.com/watch?v=cnWL2d9bGPk

We have also mentioned it here -> https://theme.co/x/member/kb/css-class-index/

Cheers

[LeannaParticipant]

Thanks will check it out.

[John EzraMember]

You’re welcome! Contact us again anytime!

[oclorenParticipant]

This thread helped me but I have a question regarding #1. I want to change the BG color of a callout in one location, not all.

I added

.x-callout, .x-callout:before {
 background-color: 0878BA;
}

Then I attempted to add a custom CSS name but got lost. What would I change in the above code and what would I add to the callout CSS attribute?

Thanks

[FriechModerator]

Hi There,

You can add the page id class in your selector. So it would only affect the specific page

.page-id-34 .x-callout,
.page-id-34 .x-callout:before {
 background-color: 0878BA;
}

Here’s how to locate post IDs

Hope it helps, Cheers!

[Author]

Posts