Changing ALL hyperlinks to a different color (7.1)

Site URL: https://www.wisdom2be.com/

I'd like to change the look of my hyperlinks to one universal color (on all pages).    Presently, they lack presence.  Ideally I'd like of of them on every page to be a dark red — and an added  hover effect.   I've included a JPG of what those links presently look like. 

This tutorial can help you with a number of hyperlink style changes:

Hello,

Unfortunately, the tutorial addressed the issue (changing hyperlink color) with 7.0☹️.  

Add to Design > Custom CSS

#page a {
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    color: red;
}
#page a:hover {
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    color: green;
}

Wow!  That works fine.  Now to be nit-picky, the red is TOO bright a red — I would like to have is a muted red (I'll send an example).

Also, on a different issue, can the heigth of my bottom header be lessened?  10 is the lowest I can adjust.

Another example of a dark red (my old site:

Another example:  https://encycolorpedia.com/a40000

Find the hexadecimal code for the color you want and the replace the word 'red' with '#' and the 6 character code.

for example:

a {
    color: #cd0e2a;
}

Interestingly, I changed "red" to "brown".  Much Better...

Fantastic!  Your efforts are deeply appreciated.

Ooops,  There is a problem.  All of my titles on my tow blog pages are "reded out!"  Take a look: https://www.wisdom2be.com/essays-insights

Here's what ti looked like prior to...

I have resolved the issue without code.

Thanks again for your efforts.

Keith

Hello @Lecreesma and @ajbajb  - may I ask how you managed to resolve the issue without code? I"m having some trouble and the code provided by user:ajbajb has resulted in the same 'blocking out' issue you encountered

On 9/7/2021 at 3:59 AM, ABA said:

Hello @Lecreesma and @ajbajb  - may I ask how you managed to resolve the issue without code? I"m having some trouble and the code provided by user:ajbajb has resulted in the same 'blocking out' issue you encountered

Can you share link to your site? We can take a look

I would have loved to know the answer to this! I too am having the same problem right now. 

18 hours ago, Melbaspence said:

I would have loved to know the answer to this! I too am having the same problem right now. 

Add this to Design > Custom CSS

a {color: red !important;}

On 4/6/2022 at 3:30 AM, tuanphan said:

Add this to Design > Custom CSS

a {color: red !important;}

 

Thanks for this! I'm curious about how to edit this a little bit more. 

 Is it possible to make a link underlined in a color and then on hover make it solid ... like here:

https://www.nationalgeographic.com/history/history-magazine/article/angkor-wat-the-worlds-biggest-religious-complex-served-two-faiths

On 4/9/2022 at 9:13 AM, MLS108 said:

Thanks for this! I'm curious about how to edit this a little bit more. 

 Is it possible to make a link underlined in a color and then on hover make it solid ... like here:

https://www.nationalgeographic.com/history/history-magazine/article/angkor-wat-the-worlds-biggest-religious-complex-served-two-faiths

Possible. Can you share link to page where you use link? We can tweak the code for your site easier

1 hour ago, tuanphan said:

Can you share link to page where you use accordion?

Yes of course!

Here is an example page: https://onion-snail-wjhl.squarespace.com/artist-landing-page-template

I'd love this type of hover link to only happen in the body of the webpage. Not in the menu section. 

Thank you as always! Your help is appreciated beyond words.

On 4/11/2022 at 8:31 AM, MLS108 said:

Yes of course!

Here is an example page: https://onion-snail-wjhl.squarespace.com/artist-landing-page-template

I'd love this type of hover link to only happen in the body of the webpage. Not in the menu section. 

Thank you as always! Your help is appreciated beyond words.

Add to Artist Page Header

<style>
  p a {
    position: relative;
    z-index: 0;
}
p a:after {
    content: "";
    background-color: yellow;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
    z-index: -1;
    left: 0;
}
p a:hover:after {
    height: 15px;
}

</style>

Thank you again! I appreciate your support beyond words.

#page a {text: linear-gradient(to right,currentColor 100%,currentColor 0);
    color: red;}

this code works, you can change color: choose your colour