Streaming live at 10am (PST)

Add custom CSS for specific CMS item


#1

Hello. I have a collection of posts, I’d like to create a custom ordered list style for one of the posts inside the collection, how can I do this? Is it possible to assign a custom class to a specific post for example?

I’d like to style ordered lists differently in this one post. The posts use rich text to display the content.

Thank you.


#2

do you have a demo of your site? need specific examples to suggest a solution


#3

How would I make all the H1’s on just one of the posts’s content pink for example?
https://preview.webflow.com/preview/flexible-template-example?utm_source=flexible-template-example&preview=1c3cc9398cd87ed859a9c5cdb4a81d19

Thanks


#4

jQuery is loaded for you already. Just add a class to elements you need to change. Style the class on an existing element on a comp page. You could create a field in the cms for markup. JQuery as an example, then in the page template, add the field as content in the markup you add to the template footer.


#5

You don’t even need JavaScript/jQuery for this…

<style>
.post-pod[href="/posts/5-great-web-design-resources"] h2 {
    color: hotpink;
}
</style>

#6

That looks excellent, never seen that before. I’ll give it a try.


#7

Hi Sam – I think you’ve misunderstood. That Href selector is for targeting the Href attribute of a link element, not the web address of the page. So unfortunately, looks like we’re back to a JavaScript solution for this.


#8

Oh, I misread. You should have linked directly to the page http://flexible-template-example.webflow.io/posts/5-great-web-design-resources

Here you go:

<script>
if(location.pathname === '/posts/5-great-web-design-resources') {
  $('h2').css('color', 'hotpink');
}
</script>