Jump to content

Reverse pagination & add additional pagination

Recommended Posts

Site URL: https://cbwebb.squarespace.com/blanco

Password for page is "test"

Hello! I'm wondering if I can add additional pagination items to the blog navigation. I would like to add a "first" (which would link to whatever my static first blog post would be) and "last" (which could just link to the blog's landing page) pagination so users could easily jump to the first and last page, along with the already existing previous and next.

I was also wondering if the order of the pagination could be reversed, so previous was on the left, and next was on the right.

Ideally, I'd like it to look and function in the following order: First & previous together on the left, and next & latest latest links together on the right.

Thanks for any help!

Link to comment
  • Replies 15
  • Views 1.4k
  • Created
  • Last Reply

Hi,

Q1. Do you use Personal or higher plan?

Q2. Add to Design > Custom CSS

/* reverse pagination */
nav.blog-list-pagination {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.blog-list-pagination .newer a {
    justify-content: flex-end;
}
.blog-list-pagination .older a {
    justify-content: flex-start;
}

 

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
On 3/29/2021 at 6:13 AM, tuanphan said:

Hi,

Q1. Do you use Personal or higher plan?

Q2. Add to Design > Custom CSS




/* reverse pagination */
nav.blog-list-pagination {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.blog-list-pagination .newer a {
    justify-content: flex-end;
}
.blog-list-pagination .older a {
    justify-content: flex-start;
}

 

Hi Tuan,

Q1. I have a higher (business) plan, so I'm ready if I need to do some code injection for the additional pagination items!

Q2. This part worked perfectly, thank you. Now we're just down to adding the additional first and last items. Hooray!

Thank you so much for your help so far!

Link to comment
  • 1 month later...
On 5/3/2021 at 1:32 AM, Ceeb said:

I’m still looking for help for my first question in this post (adding the additional items to the blog pagination), should anyone have any ideas!

Thanks for any time and help!

Add to Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<a href="https://beaverhero.com">Link 1</a>').insertAfter('.newer>a:first-child');
  	$('<a href="https://squarespace.com">Link 2</a>').insertAfter('.older>a:first-child');
	});
</script>

 

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
9 minutes ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<a href="https://beaverhero.com">Link 1</a>').insertAfter('.newer>a:first-child');
  	$('<a href="https://squarespace.com">Link 2</a>').insertAfter('.older>a:first-child');
	});
</script>

 

Hooray, thank you! This works perfectly functionally, however, the new items are out of alignment with the old ones. Is there any way for them to all be on the same line?

Link to comment
On 5/4/2021 at 9:09 AM, Ceeb said:

Hooray, thank you! This works perfectly functionally, however, the new items are out of alignment with the old ones. Is there any way for them to all be on the same line?

Sorry, missing your comment, add this code

.older {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

https://cbwebb.squarespace.com/blanco

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
26 minutes ago, tuanphan said:

Sorry, missing your comment, add this code


.older {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

https://cbwebb.squarespace.com/blanco

This worked perfectly. Everything looks great now and works perfectly. You were such a huge help. Thank you so much!

Link to comment
On 5/6/2021 at 9:58 AM, Ceeb said:

This worked perfectly. Everything looks great now and works perfectly. You were such a huge help. Thank you so much!

Do you want to improve these?

Site URL – https://cbwebb.squarespace.com/

1. (Tablet-Homepage) Make text in same line?

cbwebb.squarespace.com-01-min.png

2. (Overlay Menu) Change Logo color? – Center icons?

cbwebb.squarespace.com-02-min.png

3. (Tablet) Remove burger, show social icons?

cbwebb.squarespace.com-03-min.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
On 5/9/2021 at 2:45 AM, tuanphan said:

Do you want to improve these?

Site URL – https://cbwebb.squarespace.com/

1. (Tablet-Homepage) Make text in same line?

cbwebb.squarespace.com-01-min.png

2. (Overlay Menu) Change Logo color? – Center icons?

cbwebb.squarespace.com-02-min.png

3. (Tablet) Remove burger, show social icons?

cbwebb.squarespace.com-03-min.png

I'd love it if you would be willing to help with 2-changing logo color in overlay & 3! Thank you so much 🙂

Link to comment
On 5/10/2021 at 10:50 PM, Ceeb said:

I'd love it if you would be willing to help with 2-changing logo color in overlay & 3! Thank you so much 🙂

Add to Design > Custom CSS. Replace with new logo url

/* change overlay logo */
body.header--menu-open .header-title-logo img {
    visibility: hidden;
}
body.header--menu-open .header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoth-4811285__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

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
On 5/12/2021 at 1:42 AM, tuanphan said:

Add to Design > Custom CSS. Replace with new logo url


/* change overlay logo */
body.header--menu-open .header-title-logo img {
    visibility: hidden;
}
body.header--menu-open .header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoth-4811285__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

This seems to work! However, no matter what file dimensions I use for the replaced logo (looking in safari on an iphone and ipad pro both running ios 14.5.1), it seems to show up very small in the overlay. Any idea why?

Link to comment
10 hours ago, Ceeb said:

This seems to work! However, no matter what file dimensions I use for the replaced logo (looking in safari on an iphone and ipad pro both running ios 14.5.1), it seems to show up very small in the overlay. Any idea why?

edit 

background-size: cover;

 

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
On 5/16/2021 at 9:13 AM, Ceeb said:

So close! It looks like the dimensions would almost be right, but it's now cropped?

change to background-size: contain;

+ add this code

body.header--menu-open .header-title-logo a {
    max-height: 100px;
}

 

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
On 5/17/2021 at 7:43 PM, tuanphan said:

change to background-size: contain;

+ add this code


body.header--menu-open .header-title-logo a {
    max-height: 100px;
}

 

This did the trick perfectly. Thank you so much again for all of your time and help!

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.