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

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

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

Edited by chriscc
retag

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 3

Nick Scolas solution worked perfectly for me when edited to


h1, h2, h3{
 a{
   color:#d99a30 !important;
   &:hover{ color:#37404e !important;}
 }
}      


Motion Graphics & Interactive Design http://www.staus.me

Share this post


Link to post
  • 2

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


h2, h3 {
color: #0c08c1;

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

Edited by Nick Scola

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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;}

Share this post


Link to post
  • 0

how did you create the normal size font with colour hyperlinks and underline?I would like to have it the same way, but with red text.

Edited by Ari

Share this post


Link to post
  • 0

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.

Edited by HaloGirl

Share this post


Link to post
  • 0

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.

Edited by Nick Scola

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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".

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...