[dalatarzanParticipant]

Hi.
I want to know if you could help me to change the text link color on certain text only?
The..
.page .entry-content a {
color:#ffffff;
}
…makes ALL link white. I dont want that.
I have made a class for the color: white-class. Can the same class be used for the link color?
Example: I have a text that I want to link, I add the white-class so it overides the default theme setting. So far its good. But then link color is taking the default value. I want to overide that. Preferably by the same class but any other solution is good enough. Maybe you have a better idea?
Im not skilled in development so please take it slow and easy. 🙂
Web site, example T-SHIRT: http://www.b-light.se

Thanks
Jonas

[DarshanaModerator]

Hi there,

Thanks for writing in! To change the default link colors, please head over to Appearance -> Customize -> Typography -> Site Links section.

Hope that helps.

[dalatarzanParticipant]

Hi.
I dont think you understood me. “But then link color is taking the default value. I want to overide that”
It the default link color I want to change for a particular class for element Text in Cornerstone.

Jonas

[dalatarzanParticipant]

I have made a class for the color: white-class. Can the same class be used for the link color?
Example: I have a text that I want to link, I add the white-class so it overides the default theme setting. So far its good. But then link color is taking the default value. I want to overide that. Preferably by the same class but any other solution is good enough. Maybe you have a better idea?

I want the link text to be white. The default them settings is orange, which is correct.

Any idea?

Jonas

[ZeshanMember]

Hi Jonas,

In that case, you can add a separate class, i.e., link-color-white to each of the link that you want to change color of and then add following CSS code under Custom > CSS in the Customizer:

.link-color-white {
    color: #fff !important;
}

Hope this helps. 🙂

Thank you!

[dalatarzanParticipant]

Thanks, that would be very good. But unfortunately it doesn’t work. I have tried several syntax in Custom CSS but with no success. See attached file please.

[FriechModerator]

Hi There,

Please check your whole custom CSS here first. And resolve all the the missing brackets errors. Any custom css rule that is place after a syntax error won’t work.

Hope it helps, Cheers!

[dalatarzanParticipant]

Thank. I was giving Lint a try but was not able to solve it. Im not a developer myself. From what I can see the trouble starts from line 82. Tried several optioins but wasnt able to get rid of the erros. Is it possible you can help out with those? I send the CSS code attached. It would make my day if it could be solved.

Regards
Jonas

[dalatarzanParticipant]

By taking away the !important; I now only have one error left. (Some warnings though)

body .x-scroll-top {
82 border: 3px solid #ff7b24;
83 color: #ff7b24;
84 opacity: 1
85 filter: alpha(opacity=100)
86 zoom: 1
87 }

Expected RBRACE at line 85, col 9. = filter: alpha(opacity=100)
I tried several options with no good result.

(Im sorry to all developers who may laugh now)

[RupokMember]

Hi there,

Thanks for updating. It seems you are placing !important on wrong place (it should be before closing quotation). Here goes the corrected CSS :

.h-landmark, .entry-title.h-landmark {
    letter-spacing: 3px;
}
.current-cat {
    font-weight: bold;
}
current-cat
.entry-thumb, .x-highlight, .x-recent-posts .x-recent-posts-img:after, .x-portfolio-filters {
    background-color: #ccc;
}
.single-post .x-sidebar.left {
display: none;
}
.single-post .x-main.right {
width: 100%;
}
.blog .x-main.right {
width: 100%;
}
.blog .x-sidebar.left {
display: none;
}
@media only screen and (min-width: 980px) {

.archive.woocommerce .x-main.left {
    float: right;
}

.archive.woocommerce .x-sidebar.right {
    float: left;
}
.single.woocommerce .x-main.left {
    float: right;
}

.single.woocommerce .x-sidebar.right {
    float: left;
}
}
.widget_pages {
 height:500px;
 overflow-y: scroll;
}
div.owl-buttons {
    position: absolute;
    top: -56px;
    right: 3px;
}
.owl-theme .owl-controls .owl-buttons div {
    padding: 3px 14px;
    line-height: 38px;
    height: 45px;
    font-size: 34px;
}
.x-social-global a {
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: rgba(255,255,255,0.4);
    border-radius: 100em;
}
.x-social-global .facebook{background-color:#3b5998}
.x-social-global .twitter{background-color:#00abf0}
.x-social-global .google-plus{background-color:#d84b35}
.x-social-global .linkedin{background-color:#1a81ad}
.x-social-global a:hover.xing{background-color:#006567}
.x-social-global .foursquare{background-color:#0f6bb6}
.x-social-global .youtube{background-color:#cc181e}
.x-social-global .vimeo{background-color:#44bbff}
.x-social-global .instagram{background-color:#3f729b}
.x-social-global .pinterest{background-color:#cd1f28}
.x-social-global .dribbble{background-color:#ea4b8b}
.x-social-global .flickr{background-color:#ff0084}
.x-social-global .behance{background-color:#1769ff}
.x-social-global .tumblr{background-color:#36465d}
.x-social-global .soundcloud{background-color:#ff5500}
.x-social-global .rss{background-color:#fe6e00}
.center-img {
margin:0 auto;display:block;
}
body .x-scroll-top {
  border: 3px solid #ff7b24!important;
  color: #ff7b24!important;
  opacity: 1 !important;
  filter: alpha(opacity=100)!important;
  zoom: 1 !important;
}
.white-class p {
Color:#ffffff!important;
}
.link-color-white {
color:#ffffff!important;
}

Hope this helps.

Cheers!

[dalatarzanParticipant]

Hi. A big thanks for the help. Unfortunately the link color remains unchanged. Ive tried putting the link-color-white class on the Section, Column and the text itself. No success. See attached images.

Regards
Jonas

[dalatarzanParticipant]

I tried another approach that seem to work just fine. I did this on the Text TAB:
<p><span style=”color:white”>T-SHIRT</span></p>

🙂

[Rue NelModerator]

Hello There,

I have checked your custom css and there are no longer any errors in it. I also saw the custom css for making the text to white. When you apply it, you can use just like what you’ve done or you can also use this: <p class="link-color-white">T-SHIRT</p>.

Hope this helps.

[GregorParticipant]

Hi dalatarzan and X-Team,

I think I know what the problem is as I was just experiencing the same issue and believe to have found the solution.

This is when adding a text element in which a link appears. Simply adding the class name in the “Class” input box for the text element doesn’t help. I believe this is because when doing so the color attribute is applied to the text and not the link.

Instead when you write text in the text element and add the link add “class=link-color-white” to the link tag, so e.g.

<a href="#YOURLINK" class=link-color-white>YOUR LINK TEXT</a>

This works for me.

Kind regards,
Gregor

[ZeshanMember]

Thank you so much for chiming in and posting your solution! 🙂

Have a great day!

[Author]

Posts