Hover for Blog exerpt link

hansworks · January 7

Hello All-

Trying, unsuccessfully to style a link in Exerpts on a blog page. I would like to have a hover color, medium bold the link, and remove the underline. Is it also possible to have the web link open a new browser window the same behaviour as the passthrough-link?

Using inspector I can see that exerpt text is p.preFade.fadeIn but dont know where to go from there with code. Many Many thanks for any support.

https://playbook-nth.squarespace.com/communications

password: NTH2024#

First blog entry “Using Accessibility Features” is the entry I am working on

Edited January 7 by hansworks
added a function

tuanphan · January 9

You mean make this bold + change color on hover + open in new window?

hansworks · January 9

Thank you for your reply. Yes, that is correct: bold + change color on hover + open in new window

tuanphan · January 10

On 1/8/2024 at 3:53 AM, hansworks said:

Hello All-

Trying, unsuccessfully to style a link in Exerpts on a blog page. I would like to have a hover color, medium bold the link, and remove the underline. Is it also possible to have the web link open a new browser window the same behaviour as the passthrough-link?

Using inspector I can see that exerpt text is p.preFade.fadeIn but dont know where to go from there with code. Many Many thanks for any support.

https://playbook-nth.squarespace.com/communications

password: NTH2024#

First blog entry “Using Accessibility Features” is the entry I am working on

It looks like you changed url, the page doesn't work now

hansworks · January 15

Hi, apologies, we keep changing it after every meeting.

https://playbook-nth.squarespace.com/all-resources

pw: NHT2024

tuanphan · January 17

On 1/16/2024 at 1:41 AM, hansworks said:

Hi, apologies, we keep changing it after every meeting.

https://playbook-nth.squarespace.com/all-resources

pw: NHT2024

NHT2024

incorrect password now 😆

hansworks · January 17

Oh boy, I'm drinking too much coffee! Forgot the #

https://playbook-nth.squarespace.com/all-resources

NTH2024#

tuanphan · January 20

On 1/18/2024 at 12:09 AM, hansworks said:

Oh boy, I'm drinking too much coffee! Forgot the #

https://playbook-nth.squarespace.com/all-resources

NTH2024#

It shows this

hansworks · January 20

Apologies, url keeps changing as we work on the site. Also, just a note, we are using the excerpt only for text because we dont want user to go into details of the blog entry.

https://playbook-nth.squarespace.com/tech-resources PW: NTH2024#

Edited January 20 by hansworks

tuanphan · January 23

Add this code to Website Tools (under Not Linked) > Code Injection > Footer

<style>
  .blog-excerpt a:hover {
    font-weight: bold;
    color: #f1f;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.blog-excerpt a').attr('target','_blank');
});
</script>

hansworks · January 24

Amazing! Thank you sooooo much for the script, definitely outside my capacity. One question: How do I increase the weight and reduce the size of the "VIEW WEBSITE" link before hover effect?

Edited January 25 by hansworks

tuanphan · January 28

On 1/24/2024 at 11:47 PM, hansworks said:

Amazing! Thank you sooooo much for the script, definitely outside my capacity. One question: How do I increase the weight and reduce the size of the "VIEW WEBSITE" link before hover effect?

Edit top code <style> code to this

<style>
    .blog-excerpt a {
  	font-size: 10px;
    font-weight: 300;
  }
  .blog-excerpt a:hover {
    font-weight: bold;
    color: #f1f;
}
</style>

hansworks · February 5

That work perfectly, now I can fiddle with the colors and sizes to my heart's content. So grateful for your help!!!

hansworks · April 4

Looking for some help updating the above code

https://playbook-nth.squarespace.com/technology-resources. PW:NTH2024#

#collection-659613958b47182e64b137e0 was targeted in sitewide CSS to make changes as well as footer injection to create hover.

/*BLOG ADJUST SECTION:

remove accessibilty arrow on blog post title*/

.passthrough-link:after {

content: "" !important;

}

/* blog page title link hover color */

.passthrough-link:hover {

color: none;

}

// remove click through on categories

body#collection-659613958b47182e64b137e0 .blog-categories {

pointer-events: none;

}

/* remove click through on title */

body#collection-659613958b47182e64b137e0 .blog-title

{

pointer-events: none;

}

/* remove click through on tags */

body#collection-659613958b47182e64b137e0 .blog-tags

{

pointer-events: none;

}

(1) https://playbook-nth.squarespace.com/technology-resources/queens-connected-mobile-hotspot-lending-program Sitewide how can i block the "tags" from showing - see attached screen shot. I'm using Universal Filter if that makes any difference.

(2) https://playbook-nth.squarespace.com/social-services-referral-resources on this page only #collection-65afe261149961050212a96a could a hover be added to the accessability arrows? I have tried removing the code .passthrough-link:after {content: "" !important; but the arrows are not showing after removal. Could this be caused by Universal Plugin?

Grateful for the help!

Edited April 4 by hansworks

tuanphan · April 7

On 4/4/2024 at 11:26 AM, hansworks said:

Looking for some help updating the above code

https://playbook-nth.squarespace.com/technology-resources. PW:NTH2024#

#collection-659613958b47182e64b137e0 was targeted in sitewide CSS to make changes as well as footer injection to create hover.

/*BLOG ADJUST SECTION:

remove accessibilty arrow on blog post title*/

.passthrough-link:after {

content: "" !important;

}

/* blog page title link hover color */

.passthrough-link:hover {

   color: none;

}

// remove click through on categories

body#collection-659613958b47182e64b137e0 .blog-categories {

pointer-events: none;

}

/* remove click through on title */

body#collection-659613958b47182e64b137e0 .blog-title

{

pointer-events: none;

}

/* remove click through on tags */

body#collection-659613958b47182e64b137e0 .blog-tags

{

pointer-events: none;

}

(1)  https://playbook-nth.squarespace.com/technology-resources/queens-connected-mobile-hotspot-lending-program Sitewide how can i block the "tags" from showing - see attached screen shot. I'm using Universal Filter if that makes any difference.

(2) https://playbook-nth.squarespace.com/social-services-referral-resources on this page only #collection-65afe261149961050212a96a could a hover be added to the accessability arrows?  I have tried removing the code .passthrough-link:after {content: "" !important; but the arrows are not showing after removal. Could this be caused by Universal Plugin?

Grateful for the help!

#1. You can use this code to Technology Resources Page Header Code Injection

<style>
  .blog-meta-item.blog-meta-item--tags {
    display: none !important;
}
</style>

#2. You mean add an arrows after Website link?

hansworks · April 10

That worked perfectly! Thank you so much

For some reason the pre hover color (from higher up in the thread ) on the link "WEBSITE" is not displaying as a color. I am tring to have the pre-hover color as red and the hover color is set to blue using CSS. I think this is probably a SQSP site style issue as I cant find it in CSS.

Edited April 10 by hansworks

tuanphan · April 13

On 4/10/2024 at 11:42 PM, hansworks said:

That worked perfectly! Thank you so much

For some reason the pre hover color (from higher up in the thread ) on the link "WEBSITE" is not displaying as a color. I am tring to have the pre-hover color as red and the hover color is set to blue using CSS. I think this is probably a SQSP site style issue as I cant find it in CSS.

Use this CSS code

body#collection-659613958b47182e64b137e0 {
.blog-excerpt a {
    color: red;
}
.blog-excerpt a:hover {
    color: #6789d3 !important;
}}

hansworks · April 15

Thank you so much! This also allows me to repeat this for other blocks as well, so super useful.

Another related aspect of the blog has come up: On https://playbook-nth.squarespace.com/social-services-referral-resources pw NTH2024 I am trying to make a link on each blog excerpt jump to each the blog entry in the same way that the title links to the entry. link would be blue text that changes to red on hover.

I have attached a sample image below using 'NYC 988..." entry as an example. Many thanks.

tuanphan · April 18

On 4/16/2024 at 1:49 AM, hansworks said:

Thank you so much! This also allows me to repeat this for other blocks as well, so super useful.

Another related aspect of the blog has come up: On https://playbook-nth.squarespace.com/social-services-referral-resources pw NTH2024 I am trying to make a link on each blog excerpt jump to each the blog entry in the same way that the title links to the entry. link would be blue text that changes to red on hover.

I have attached a sample image below using 'NYC 988..." entry as an example. Many thanks.

Password is incorrect now

hansworks · April 19

So sorrry that's a typo, PW is NTH2024#

tuanphan · April 22

On 4/18/2024 at 3:41 PM, tuanphan said:

Password is incorrect now

I guess you can add additional link there, or what is problem here?

Edited April 22 by tuanphan
typo

hansworks · April 29

Hello! Thanks so much for your reply. I am trying to achieve 2 things:

1) In the screen shot above, can the text "Contact NYC 988" (below the hover "VIEW WEBSITE") be a 2 color hover link that takes user to the blog post? This would be for all the posts on this page only, not the rest of the site. Would these have to be linked manually or can this be done with code?

2) How can I add a 2 color hover to the titles on this page only? please see screenshot.

Many thanks

tuanphan · May 1

On 4/29/2024 at 10:34 PM, hansworks said:

Hello! Thanks so much for your reply. I am trying to achieve 2 things:

1) In the screen shot above, can the text "Contact NYC 988" (below the hover "VIEW WEBSITE") be a 2 color hover link that takes user to the blog post? This would be for all the posts on this page only, not the rest of the site. Would these have to be linked manually or can this be done with code?

2) How can I add a 2 color hover to the titles on this page only? please see screenshot.

Many thanks

2 color hover

You mean when hover >> change color, but will have 2 color, same as gradient color?

hansworks · May 1

Sorry I wasnt more precise, my terminology is not correct. Since the title "NYC 988..." is a link, I am trying to achive the same hover behavior as "VIEW WEBSITE".

Does this help explain the funtionality I am looking for?

Edited May 2 by hansworks

tuanphan · May 4

On 5/2/2024 at 12:19 AM, hansworks said:

Sorry I wasnt more precise, my terminology is not correct. Since the title "NYC 988..." is a link, I am trying to achive the same hover behavior as "VIEW WEBSITE".

Does this help explain the funtionality I am looking for?

You can use this CSS code

h1.blog-title a:hover {
    font-weight: 500;
    color: #fa522b;
}

Hover for Blog exerpt link

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

hansworks

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources