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

Site URL: https://rosalindbrookman.com/blog

I'd like to apply different colours to my links in blog post summaries depending on what category the post is in. So for example if a post has the category of 'Business' then the blog post title and read more link would be green on the summary, if the category is 'Writing' then it's red etc.

Many thanks for any help you can offer.

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

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

or

Quote

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

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

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?

@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?

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.

@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?
 

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?
 

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

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

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.

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

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

@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)

@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

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