Need Help with Pagination Title

Hello everyone,

The Issue:

I've been working on customizing the pagination titles on my Squarespace site, and after adjusting various aspects, I've encountered two main challenges. Firstly, I need to adjust the wording of specific pagination titles. Secondly, I noticed some pages lack left/right buttons, and there seems to be inconsistent alignment on certain pages.

The Context:

To give a clear picture, I'd like to change the following pagination titles:

- From "Full-Scale Branding for NC Expert Organizing Company" to "Simple Haven"
- From "Constructing a Distinctive Barbering Brand Hidden in Plain Sight" to "Odd Fellows Barber Co."
- From "My Role at the Nation-leading Restaurant Supply Company" to "TriMark"
- From "Crafting an Online Presence for Pro-Gamer & Livestreamer" to "JLove TV"

Additionally, some pages, even though they are at the "ends", are missing pagination buttons either on the left or right. I'd like to ensure that all pages have these buttons. Furthermore, I've observed that certain pagination titles, like the one for "TriMark", appear to be offset to the right more than others.

Specific Problems:

- Pagination titles need text adjustments.
- Missing left/right pagination buttons on certain pages.
- Inconsistent alignment of pagination titles across different pages.

Questions:

1. How can I adjust the wording of the pagination titles using CSS or Squarespace settings?
2. Is there a way to ensure that all pages have consistent left/right pagination buttons, regardless of their position in the sequence?
3. Can anyone provide insight on why certain titles might be misaligned or recommend a method to ensure consistent alignment across all pages?

My Website: https://www.mindofalexander.com/

Any assistance or guidance would be greatly appreciated!

You'd have to manually add buttons with some code to those pages at the beginning or the end of the posts that don't have the buttons. The problem with this is when you add another one at the end you'll need to adjust the code for the first and last one again to get the new page in there. Also it would be a manual change to only adjust the titles for those pages on the pagination links. The names come from the titles of the blogs, can you not change what it's called there?

To change the titles with code you'll need to add a code block to each page you need to change and then try this. Remove next or previous on the pages where you don't need it. This will not add the links to pages that don't already have them though, that's a different project altogether and slightly more complicated.

 

<style>
.item-pagination-link--next .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

.item-pagination-link--prev .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

  
</style>

Also, your pagination titles that are moved over are because the titles are so long and then you have this code. The nowrap makes them stretch wider than the screen. Shrinking the titles won't necessarily fix this though, you'll need to adjust line height or let them wrap when they need to.

3 hours ago, jaeveedee said:

You'd have to manually add buttons with some code to those pages at the beginning or the end of the posts that don't have the buttons. The problem with this is when you add another one at the end you'll need to adjust the code for the first and last one again to get the new page in there. Also it would be a manual change to only adjust the titles for those pages on the pagination links. The names come from the titles of the blogs, can you not change what it's called there?

To change the titles with code you'll need to add a code block to each page you need to change and then try this. Remove next or previous on the pages where you don't need it. This will not add the links to pages that don't already have them though, that's a different project altogether and slightly more complicated.

 

<style>
.item-pagination-link--next .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

.item-pagination-link--prev .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

  
</style>

 

Hello @jaeveedee,

Thank you for taking the time to respond. I have to admit, I'm quite lost with the explanation and instructions you've given. Can we perhaps simplify this or break it down a bit more? I appreciate your patience and I apologize for feeling a bit confused by your response.

12 hours ago, jaeveedee said:

@mindofalexander 

 

Your pagination title question

1. add a code block anywhere on the portfolio item page

2. copy one of these snippets into it and adjust the title as needed. If both links on that page need to be changed then you'll need both of these code snippets below.

<style>
  /*for right side pagination link*/
.item-pagination-link--next .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

</style>

 

<style>
/*for left side pagination link*/
.item-pagination-link--prev .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

  
</style>

 

 

Your alignment question:

You have custom CSS added to your page that is this..

If you want the links to not push over to the right or left you will need to remove this. The reason those links are pushing over to the side is because your code doesn't allow the words to wrap so instead they keep stretching to the side past where your page content ends. You can play with font sizes to achieve the same goal but that might be kind of a pain.

 

Adding links in places they don't exist question:

 

The short answer is this isn't something that is super simple to do and I don't know of an existing plugin that will achieve this. You will need to either learn to write or hire someone who can write you a script to add this to the pages that need it.

 

@jaeveedee

This was extremely helpful! Thank you for your hard work and clear explanation. While your guidance was valuable, I was also able to find a solution myself with the script. Regardless, I truly appreciate the time you took to provide a solution and a fresh perspective. Thanks again for the assistance. 🙂

Hi everyone.

Is there a solution to align this?

On 4/2/2024 at 8:00 PM, Despina said:

Hi everyone.

Is there a solution to align this?

If you share link to this page, we can check easier