Jump to content

Change behaviour/looks of blog preview title links

Recommended Posts

Site URL: https://marcoracanelli.com/analisi-dei-dati-con-python

Hello,

I am trying to change the behavior of the blog post titles on this page (https://marcoracanelli.com/analisi-dei-dati-con-python)

Ideally, when hovering over them, they'd slightly change color and get a color background, to emphasize that they are links.

I had done in the past something similar to the blog summary section with the following code:

.summary-title-link:hover {
  color: #0b1a4e;
  background-color: #D6F3E7;
}

.summary-title-link:active {
  background-color: #f4adae;
}

.summary-title-link:visited {
  color: #0a6883;
 }

However, I am not able to replicate this in the desired blog page.

Could you help?

thank you,
Marco

Link to comment
  • Replies 3
  • Views 339
  • Created
  • Last Reply

Top Posters In This Topic

On 10/23/2021 at 1:12 AM, mracanelli said:

Site URL: https://marcoracanelli.com/analisi-dei-dati-con-python

Hello,

I am trying to change the behavior of the blog post titles on this page (https://marcoracanelli.com/analisi-dei-dati-con-python)

Ideally, when hovering over them, they'd slightly change color and get a color background, to emphasize that they are links.

I had done in the past something similar to the blog summary section with the following code:

.summary-title-link:hover {
  color: #0b1a4e;
  background-color: #D6F3E7;
}

.summary-title-link:active {
  background-color: #f4adae;
}

.summary-title-link:visited {
  color: #0a6883;
 }

However, I am not able to replicate this in the desired blog page.

Could you help?

thank you,
Marco

Edit above post >> Add a Code Block on top of blog post >> Paste this code

<style>
  article.BlogList-item a:hover {
    color: red;
    background-color: green;
    padding: 5px;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 11/8/2021 at 8:31 PM, mracanelli said:

@tuanphan it worked beautifully, thank you

I see search icon in header is black color, while nav items and logo is white color, you can add this CSS to make search to white

/* header search icon */
header.Header svg.Icon.Icon--search--small {
    filter: brightness(0) invert(1);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.