[Ying-Fu LiParticipant]

Hi,

I have set link colors site wide to purple and green. I know how to customize those colors per page using the custom css function in Cornerstone but is also possible to target one specific link on a page? Like, I have two links on a page: one is just fine with the colors set site wide but the other I want to change the hover color. Custom css targets all links on that page so that won’t work 😉

[Prasant RaiModerator]

Hello Ying,

Thanks for writing in!

We request you to please share exact URL of where you want to change link color.

Thanks.

[Ying-Fu LiParticipant]

Sorry 😉

Here it is: http://www.heldenopreis.nl/training/

As you can see the links are purple, when hovered they are green. The first one however has as background color that exact same green so I would like the hover color on that particular instance to be other than green. In de the section beneath the link is also purple and green but on white background so no change is needed there.

[DarshanaModerator]

Hi there,

You can assign a special unique class to your links and then add corresponding CSS rules to target that class.

You can use Raw Content element to add direct HTML.
<a class="my-special-link" href="#55">My Link</a>

Example CSS:

.my-special-link {
    color: #ff0000;
}

.my-special-link:hover {
    color: #336699;
}

Hope that helps.

[Ying-Fu LiParticipant]

But how can I use raw content when the link is within the text block?

[Rue NelModerator]

Hello There,

When the link is within a text block, you can still add a custom class in your text block and then use this custom css

.my-text-block a {
    color: #ff0000;
}

.my-text-block a:hover {
    color: #336699;
}

Hope this helps.

[Ying-Fu LiParticipant]

Ah, okay, you fooled me with ‘Raw Content element’ 😉

[Ying-Fu LiParticipant]

Oops, one problem 😉 I already have the link assigned to a class, namely to have it sliding the panel. Don’t seem to work? I use this custom html already: <a href="#" class="nks_cc_trigger_element nks_toggle_tab_2" target="_blank" style="color: rgb(0,255,0)"><font color="4f0b7b">info@heldenopreis.nl</font></a>

[Rue NelModerator]

Hello There,

You can have this html code instead:

<a href="#" class="nks_cc_trigger_element nks_toggle_tab_2" target="_blank">info@heldenopreis.nl</a>

And then you can use this custom css for the color and hover color:

.nks_cc_trigger_element.nks_toggle_tab_2 {
  color: #4f0b7b;
}

.nks_cc_trigger_element.nks_toggle_tab_2:hover {
  color: red;
}

Feel free to change with the right colors. Hope this helps.

[Ying-Fu LiParticipant]

Yes, but then it would target both links on that page…;-)

[NicoModerator]

Hi There,

You could try adding class on the button so that you can make it unique on certain class. For example.,

<a href="#" class="first nks_cc_trigger_element nks_toggle_tab_2" target="_blank">info@heldenopreis.nl</a>

and for the other one,

<a href="#" class="second nks_cc_trigger_element nks_toggle_tab_2" target="_blank">info@heldenopreis.nl</a>

Then use the class in your custom CSS.

Other way you could try is adding id on the custom CSS.

For example.

#x-section-4 .nks_cc_trigger_element.nks_toggle_tab_2{
color:#FFF;
}

Hope it helps.

Let us know how it goes.

Thanks.

[Author]

Posts