Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

How do I change Heading (ie H2, H3) Hyperlink Color ?


BigInScience

Question

Hello,

My website is BigInScience.com, and I'd like to make H2 & H3 heading hyperlinks the same in appearance as regular text hyperlinks. Specifically, my links appear blue (#0c08c1) and turn orange (#fc8002) when hovered over and active. I'd like H2 & H3 heading hyperlinks to appears the same. Here are a couple of CSS codes I've tried unsuccessfully:


// Attempt 1
h2 a:link {color:#0c08c1;}    
h2 a:visited {color:#0c08c1;} 
h2 a:hover {color:#fc8002;}   
h2 a:active {color:#fc8002;}

h3 a:link {color:#0c08c1;}    
h3 a:visited {color:#0c08c1;} 
h3 a:hover {color:#fc8002;}   
h3 a:active {color:#fc8002;}

//Attempt 2
#content h2 a:link {color:#0c08c1;}    
#content h2 a:visited {color:#0c08c1;} 
#content h2 a:hover {color:#fc8002;}   
#content h2 a:active {color:#fc8002;}

#content h3 a:link {color:#0c08c1;}    
#content h3 a:visited {color:#0c08c1;} 
#content h3 a:hover {color:#fc8002;}   
#content h3 a:active {color:#fc8002;}

Any help would be much appreciated!

Thank you,

Brian

Link to comment
  • Answers 13
  • Created
  • Last Reply

13 answers to this question

Recommended Posts

Hi guys. I'm using the Five template and for some reason this didn't work for me. This is the page I'm having issues with: https://jessica-stuart-z1ha.squarespace.com/ I'm trying to make the linked text in my paragraph of h3 copy a different color than the grey, and I'm also trying to have my link hover color match the hover color I'm using on the site for normal text (which happens to be #cc0000). I've tried to inject the following CSS into the Page Header for that page:

h3{ a{ color:#cc6600 !important; &:hover{ color:#cc0000 !important;} }}...and it doesn't work. Any ideas?

Link to comment

Use this code to make all links have a custom color and hover color:


a { 
    color: #fff; 
    &:hover, &:visited, &:active { color: #696969; }
 }

You can then choose what type of text to target for this by wrapping the code above in another bracket and the heading type you're targeting. These are the options:

  • p = body text
    • h3 = heading 3
    • h2 = heading 2
    • h1 = heading 1

So, for example, if you wanted to target just body text links it would look like this:


p {
a { 
        color: #fff; 
        &:hover, &:visited, &:active { color: #696969; }
     }
}

You can target as many of those as you'd like at a time, separated by commas "p, h2".

Link to comment

I tried both code options above and only replaced the heading references and color codes according to what I want, and nothing happened. I'm a complete CSS novice. Am I missing something here?

I'd like H1 on this page to be blue like my links: Portfolio page.

UPDATE: Searching the CSS code finally gave me the correct format for my template.

Link to comment

Yes, the code should work for every single template. You might have to add !important every once in a while depends. Some templates have a different active link class.

.active-link a { color: #fc8002; } is an example. You can find out if you inspect the element with the browser or firebug.

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment

h1 { font-size: 24px; font-weight: 600; color: #333; }

h2 { font-size: 21px; font-weight: bold; color: #222; }

h3 { font-size: 18px !important; font-weight: normal; color: #333; }

That should work no matter what. If the changes don't show just add an important tag.

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment

Hello everybody:

Just solved the answer to my question. Here is the code I used:

body #page-body-wrapper h2 a:link,

body #page-footer-wrapper h2 a:link,

body #page-body-wrapper h2 a:visited,

body #page-footer-wrapper h2 a:visited { color: #0c08c1 ;}

body #page-body-wrapper h2 a:hover,

body #page-footer-wrapper h2 a:hover,

body #page-body-wrapper h2 a:active,

body #page-footer-wrapper h2 a:active { color: #fc8002;}

body #page-body-wrapper h3,

body #page-footer-wrapper h3 { color: #0c08c1;}

body #page-body-wrapper h3 a:link,

body #page-footer-wrapper h3 a:link,

body #page-body-wrapper h3 a:visited,

body #page-footer-wrapper h3 a:visited { color: #fc8002;}

body #page-body-wrapper h3 a:hover,

body #page-footer-wrapper h3 a:hover,

body #page-body-wrapper h3 a:active,

body #page-footer-wrapper h3 a:active { color: #0c08c1;}

Link to comment

To make your code A LOT MORE SIMPLE use this for example:


h2, h3 {
color: #0c08c1;

a { 
   color: #fc8002; 
   &:hover, &:visited, &:active { color: #fc8002; }
}
}

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...