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

Change hover colour throughout a Blog


LV-OZ

Question

Site URL: https://lobster-ray-g42d.squarespace.com/knowledge-news

Hi!

I would like to change the hover colour of text links  and 'Read More' links in my blog section. I cannot seem to change the hover colour in Site Styles, and currently when I hover the text 'disappears' as it becomes the same colour as my background.

Currently, I am trying this code!?!?

section[data-section-id="60b02fef63cb4154a2416bdf"] a:hover {
    color: #d85820;
}

Places you can see this occurring: 

https://lobster-ray-g42d.squarespace.com/knowledge-news

https://lobster-ray-g42d.squarespace.com/knowledge-news/protecting-indigenous-communities-from-covid-19

pw: youcanenter

 

Thank you for your help!

Louisa

Link to comment
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

Try:

.blog-title a:hover {
	color: #d85820 !important;
}

if it's only going to be for that specific section, you would add the section ID before the other selectors, separated by a space:

section[data-section-id="60b02fef63cb4154a2416bdf"] .blog-title a:hover {
	color: #d85820 !important;
}

 

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 0
1 hour ago, IgnitePerth said:

Try:

.blog-title a:hover {
	color: #d85820 !important;
}

if it's only going to be for that specific section, you would add the section ID before the other selectors, separated by a space:

section[data-section-id="60b02fef63cb4154a2416bdf"] .blog-title a:hover {
	color: #d85820 !important;
}

 

Thank you Ignite - I am trying to change the hover colour however in the actual blog entries.  Any thoughts on how that could change? Thanks!

Link to comment
  • 0
1 hour ago, IgnitePerth said:

When you say in the actual blog entries, do you mean on a page like this.

Are you referring to the text on the bottom that takes you to the next blog?

I mean on the page where the blog content sits.  See pic below. The links within the paragraphs when you hover over them turn the colour of the background, I am trying to change them to a different colour on hover.

NOT the text on the bottom that takes you to the next blog.

 

Thank you!

Screen Shot 2021-07-22 at 5.57.14 PM.png

Link to comment
  • 0

The link you provided to that page does not work for me, so as a guess, the below code will change links, on hover, in blog pages only.   Replace blue with the color code you would like to have it change to on hover.

 

.blog-item-content .sqs-block-html a:hover {
    color: blue !important;
}

 

If you would like to change the colour of links in general (when not hovered) you can do this by editing your site styles (click the paintbrush icon in the top right of your page).

Check which style is applied to the sections you want to change - in the below image it is LIGHTEST 1.  click the pencil icon on Lightest 1 to edit the colour pallette, and look for links > text links.

Screenshot_2021-07-23_10-57-26.png

Screenshot_2021-07-23_10-59-03.png

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 0
2 hours ago, IgnitePerth said:

The link you provided to that page does not work for me, so as a guess, the below code will change links, on hover, in blog pages only.   Replace blue with the color code you would like to have it change to on hover.

 

.blog-item-content .sqs-block-html a:hover {
    color: blue !important;
}

 

If you would like to change the colour of links in general (when not hovered) you can do this by editing your site styles (click the paintbrush icon in the top right of your page).

Check which style is applied to the sections you want to change - in the below image it is LIGHTEST 1.  click the pencil icon on Lightest 1 to edit the colour pallette, and look for links > text links.

Screenshot_2021-07-23_10-57-26.png

Screenshot_2021-07-23_10-59-03.png

Thank you so much, that worked perfectly.

Is there a way also to change the 'Read More' hover colour too on this page?

https://lobster-ray-g42d.squarespace.com/knowledge-news

Thank you!

 

 

Screen Shot 2021-07-23 at 1.53.06 PM.png

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...