Jump to content

I'd like to apply different colours to my links in blog post summaries depending on what category the post is in.

Recommended Posts

  • Replies 11
  • Views 1.2k
  • Created
  • Last Reply

If you add this text to blog link, you can use code easier.

eg this post https://rosalindbrookman.com/blog/seeing-daniel-wakeford-live-is-a-joyous-experience

edit link to

Quote

or

Quote

then add this to Home > Design > Custom CSS to change all post title has "writing" text in link

.blog-title [href*="writing"] {
    color: red;
}
a.blog-more-link[href*="writing"] {
    color: red;
}

 

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
1 hour ago, tuanphan said:

If you add this text to blog link, you can use code easier.

eg this post https://rosalindbrookman.com/blog/seeing-daniel-wakeford-live-is-a-joyous-experience

edit link to

or

then add this to Home > Design > Custom CSS to change all post title has "writing" text in link


.blog-title [href*="writing"] {
    color: red;
}
a.blog-more-link[href*="writing"] {
    color: red;
}

 

Can I change the url slug to include the category on all post using the Post URL Format setting somehow? Or do I have to go through every individual blog post?

Link to comment
Just now, ryandejaegher said:

@EllyCobbett Are you referring to automatically adding the current category based on the URL?

I.e. if someone is on the "writing" post, the category URL and text will automatically be added?

I think so. Based on tuanphan's answer I need to get the category assigned to each blog post in the url. I'm not the person writing the blog and I know it will probably get forgotten when I hand over to my client if it's not automated somehow. The Post URL Format setting seems the most likely place to make this happen, but it doesn't appear to be an option.

Link to comment
1 minute ago, ryandejaegher said:

@EllyCobbett, you can style the category text based on the href with CSS but that won't handle dynamically adding the category. 

To make sure I understand correctly, you manually added the category link at the top of the post right?image.thumb.png.8e009b060fcf162efe01ae74a071f814.png
 

The categories have been assigned to each post already. What I'm looking for is a way to make this:

48881670_Screenshot2020-06-14at15_38_25.thumb.png.50a11680d1d78ee82e5fd7ed352d4e3e.png

 

Look more like this in terms of the title and read more colours:

 

1896053824_Screenshot2020-06-14at15_40_43.thumb.png.6cb080f60ceb314b4737f8f85ae0bd70.png

 

I thought I might be able to do that based on the different categories already assigned to the posts, but I'm struggling to find a way. Any suggestions gratefully appreciated.

Link to comment

@EllyCobbett I see, you're able to display the meta for the blog posts correct? 

What I would do is to make this visible, then what you can do is add some code that will target the blog posts based on the category, if they match a specific category then you can apply a class that will style the content of the post. 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
4 minutes ago, ryandejaegher said:

@EllyCobbett I see, you're able to display the meta for the blog posts correct? 

What I would do is to make this visible, then what you can do is add some code that will target the blog posts based on the category, if they match a specific category then you can apply a class that will style the content of the post. 

Ok, so if I swap Author out for Category in the displayed meta data, then I should be able to do it with css? (I only have two available slots to display meta content and I have to keep the date).

Link to comment

@EllyCobbett you'll still need some custom code/JavaScript to target elements other than the category text. You won't necessarily have to show the category, you can hide it with CSS but the JavaScript will still be able to target it (even though it's hidden)

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 10 months later...

@EllyCobbett, I'm looking for the same solution. I would love to know if you ever get it to work?

I want to italicize certain posts based on the category. I really thought you could use css to target adjacent items, but the category name is just to deep in the structure to enable it. 

I found some javascript code but it didn't work for me. StackOverflow: https://stackoverflow.com/questions/66090012/squarespace-change-css-elements-depending-on-blog-tag

Link to comment
On 5/2/2021 at 8:00 PM, belindaleebriggs said:

@EllyCobbett, I'm looking for the same solution. I would love to know if you ever get it to work?

I want to italicize certain posts based on the category. I really thought you could use css to target adjacent items, but the category name is just to deep in the structure to enable it. 

I found some javascript code but it didn't work for me. StackOverflow: https://stackoverflow.com/questions/66090012/squarespace-change-css-elements-depending-on-blog-tag

Can you share link to a blog page? We can check easier

I think we can try target on links

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

Archived

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

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