Jump to content

Different Blog Title Color based on category - 7.1

Go to solution Solved by tuanphan,

Recommended Posts

Hi - I'm trying to give each blog category page different colored blog titles   

 

eg all of these titles red.  https://www.here-ism.com/hereisms?category=SOUNDS

But all of these titles blue https://www.here-ism.com/hereisms?category=VISIONS
 

And also the titles of the actual blog post - eg this is within 'SOUNDS'

https://www.here-ism.com/hereisms/cocaine-rhinestones-okie-from-muskogee

 

I'm on a business plan so we can use javascript, it seems the only way as 7.1 blogs have taken the categories out of blog slugs? Also this is a project I'm handing over to a client so I want a set and forget solution for him. 

help!

PW to view the site is 'oneders'

 

 

 

 

 

Screenshot 2024-05-23 at 12.27.17 PM.png

Link to comment
  • Replies 6
  • Views 432
  • Created
  • Last Reply

Top Posters In This Topic

Hey @tuanphan - i was able to figure out half the solution.

I was able to make the colors on the individual blog pages using some code here https://stackoverflow.com/questions/66090012/squarespace-change-css-elements-depending-on-blog-tag

 

But I still haven't been able to work out how to target the overall collection and tag pages - mainly because they all use the same section ID - because each "page" is actually just a filtered version of the main blog, not a page itself....

 

Eg all the blogs tagged with the category 'words' have a red header font, but I can't get the page https://www.here-ism.com/hereisms/category/WORDS to display the headers as red...

 

 

 

Link to comment

Try some code like this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(function() {
  var loc = window.location.href; // returns the full URL
  if (/\/category\/WORDS\/?/.test(loc)) {
    $('body').addClass('words');
  }
});
</script>
<style>
  body.words .blog-title a {
    color: red;
}
</style>

image.thumb.png.7214e8001d2cda2380c75c07945f9a34.png

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

Thank you so much @tuanphan - this worked perfectly! 🙏🏻

I have two more similar problems I need to solve - 

1. I also want to do the same with the Tag pages -  should the above code work if I just swap out the word 'category' for tag?

2. My client wants all of the text in each homepage blog excerpt to match the corresponding color of the category, is this even possible? I assume It would require adding some kind of class to the except and then targeting it, but it's beyond my knowledge. 

the website is live now so it's easier to view. 

https://www.here-ism.com

Link to comment
  • Solution
On 6/5/2024 at 6:53 AM, ClaireWard said:

Thank you so much @tuanphan - this worked perfectly! 🙏🏻

I have two more similar problems I need to solve - 

1. I also want to do the same with the Tag pages -  should the above code work if I just swap out the word 'category' for tag?

2. My client wants all of the text in each homepage blog excerpt to match the corresponding color of the category, is this even possible? I assume It would require adding some kind of class to the except and then targeting it, but it's beyond my knowledge. 

the website is live now so it's easier to view. 

https://www.here-ism.com

#1. If both have same structure, you can share link to a tag page, I can check easier

#2. Use this code to Website Tools > Custom CSS. This code for Journal and Sound

article.blog-single-column--container.entry.blog-item:has(a.blog-categories[href*="/category/JOURNAL"]) * {
    color: #007f5f !important;
}
article.blog-single-column--container.entry.blog-item:has(a.blog-categories[href*="/category/SOUND"]) * {
    color: #5a189a !important;
}

Repeat similar for other categories.

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.