Reverse pagination & add additional pagination

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!

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;
}

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!

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!

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>

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?

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

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!

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?

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

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

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?

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

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

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

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;
}

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?

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;

On 5/14/2021 at 6:20 AM, tuanphan said:

edit 

background-size: cover;

 

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

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;
}

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!