Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
paulduffied

How to target 2nd page of BlogList with CSS

Question

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

Edited by paulduffied
Initial Revision

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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/

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...