Theme Option - Typography - Site Link color is overriding the code on the page

[jfairbbt]

I added code to the text I created and the theme option seems to be taking precedence over the page code. How do I force it to use the text code?
https://beachbumtanningnyc.com/manhattan-promotions/

[prakash_s]

Hi Jonathon,

Thanks for writing to us.

I would suggest you add Site links colour and Site links hover colour from theme options. The code you added in the style tag at the text element works the same as options of theme options. The colours render for all anchor tags. You don’t need to add the same colour multiple times in elements.

Thanks for understanding.

[jfairbbt]

But I want the links on that specific page to be different then the the rest of the theme’s site links and site hovers. My question is I change the colors to something else and it is not taking on the website but shows the colors in the typography. How do I force the links on that specific page to reflect the colors in the code of that page?

[marc_a]

Hi Jonathan,

To apply the CSS code to the specific page, I suggest that you will add your CSS to this page only https://beachbumtanningnyc.com/manhattan-promotions/, don’t add it in the Global CSS because it can affect your whole website. To do that, please edit your page using Pro, then at the center-left, there’s a CSS for a specific page.

Hope that helps.

Thank you.

[jfairbbt]

Is this code correct? I added it but no change.

.quicklink{
color:#fcd80b;
}

.quicklink:hover{
color:#48b4be;
}

[marc_a]

Hi Jonathan,

Can you give us a screenshot on where on the page do you want to change the color? so that we can better help you with your concerns.

Thank you.

[jfairbbt]

I want to be able to change the link text color and hover color, I highlighted the areas in red boxes.

currently its showing yellow (link) to dark gray (hover) which is same as the background even though the Typography has light blue (link) and dark blue (hover)

[tristup]

Hi Jonathan,

If you want to change the color and hover color for the specific section that is marked in the screenshot, you need to add custom CSS code into the Elements CSS of that specific element, options under the Customize tab.

Please change the color according to your need.

$el a:link
{
    color:#ff0000;
}
$el a:hover
{
    color:#00ff00;
}

To know more about how to use the Element CSS, please go through this article: https://theme.co/docs/element-css
Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[jfairbbt]

@tristup

$el a:link
{
    color:#ff0000;
}
$el a:hover
{
    color:#00ff00;
}

That worked. Thank you for your help.

[tristup]

Hi Jonathan,

Glad that it works for you.

Thanks