Jump to content

How to target 2nd page of BlogList with CSS

Recommended Posts

I'm using a custom Squarespace template. I have a blog list, and it's gone over onto two pages (I'd rather it didn't, but there seems to be no option to have it all on one page with the default template).

I'd like the latest entry to read "new" on the thumbnail, and I've made some CSS that works, but the problem is that it targets the top left article on both the first and the second page of blog entries (one of which is definitely not new).

I can see no CSS classes in the body or elsewhere that allow me to exclude either page of the blog list from my code. Am I missing something? Or are there really no unique classes depending on which page of blog list navigation you're looking at?

https://www.paulduffield.co.uk/firelightisle

Link to comment
  • Replies 3
  • Created
  • Last Reply

Hey Paul, cool art. Here is the code that might help you achieve the result:


<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
   <script>
     $(window).bind('load',function(){
       $.getJSON('/firelightisle/?format=json-pretty', function(data){
         $.each(data.items, function(i) {
           if(i == 0) {
             $('#post-'+this.id).addClass('latest');
           }
         })
       });
     })
   </script>

You need to add it to the footer of your "Code Injection" section.

This code basically adds the class "latest" to your most recent blog entry, which you can then use to add any custom CSS.

Link to comment

Thanks so much, alexbusk!! :D Both for the compliment and the code - it worked first time. Also didn't realise I could use jQuery, but it seems obvious now! For some reason I've been using full javascript, which I'm not great at XD Is there any reason I might not want to mix both - or favour one over the other?

Link to comment

No problem Paul, you can use both jQuery and JS both on the website, the advantage of jQuery is that it's easier to write on.However, Squarespace has Yahoo's YUI3 library built-in (similar to jQuery), so you can just use that instead of full JS.https://yuilibrary.com/

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.