how to remove previous and next project links from version 7.1 portfolio

Hi first time using Squarespace to set up my photography website. I'm not familiar with coding so need some help with removing the < previous project and next project > links that show at the end of the gallery block as below. I can't select the links whilst in edit to delete.

When i inspect the page coding it looks like the code below controls this section as it entire line (i.e. arrows and words) are removed from the squarespace page when i delete the html code, but reappears when i exit editing. Can anyone help with a code i can insert into the specific pages that i would like to use portfolios in?

<section class="item-pagination item-pagination--prev-next" data-collection-type="portfolio-grid-basic" data-controller="ItemPagination" data-controllers-bound="ItemPagination" id="yui_3_17_2_1_1577582297708_1767">
 
    <a href="/portfolio/project-one-lx24m" class="item-pagination-link item-pagination-link--prev" id="yui_3_17_2_1_1577582297708_1766">
      <div class="item-pagination-icon icon icon--stroke">
        <svg class="caret-left-icon--small" viewBox="0 0 9 16">
          <polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline>
        </svg>
      </div>
      <span class="pagination-title-wrapper" id="yui_3_17_2_1_1577582297708_1765">
        <div class="item-pagination-prev-next">Previous</div>
        <h2 class="item-pagination-title" id="yui_3_17_2_1_1577582297708_1764">Project One</h2>
      </span>
    </a>
 
 
    <a href="/portfolio/project-three-xswdx" class="item-pagination-link item-pagination-link--next">
      <div class="pagination-title-wrapper">
        <div class="item-pagination-prev-next">Next</div>
        <h2 class="item-pagination-title">Project Three</h2>
      </div>
      <div class="item-pagination-icon icon icon--stroke">
        <svg class="caret-right-icon--small" viewBox="0 0 9 16">
          <polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline>
        </svg>
      </div>
    </a>

thanks

19 minutes ago, tuanphan said:

add to Page Settings > Advanced > Header

<style>
  .item-pagination {display: none !important;}
</style>

 

Thanks very much that worked perfectly

@tuanphan Hi there, i'm trying to achieve something similar – do you know how to remove the right/left arrows next to the text or adjust the stroke line so the arrows are thinner? 

Thanks v much in advance!

Nabil 

1 hour ago, noblestudio said:

@tuanphan Hi there, i'm trying to achieve something similar – do you know how to remove the right/left arrows next to the text or adjust the stroke line so the arrows are thinner? 

Thanks v much in advance!

Nabil 

Add to Home > Design > Custom CSS

.item-pagination-icon.icon.icon--stroke {
    display: none;
}

19 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.item-pagination-icon.icon.icon--stroke {
    display: none;
}

 

Thank you! : )

I am trying to do something similar. However - I would like the project advance text to be different from the rollover state for each project  square.

Is this possible? 

If not simpler - I would like to keep the arrows for advancing but lose the text.  

THANKS IN ADVANCE!!

On 9/10/2020 at 11:31 PM, AngelaD said:

I am trying to do something similar. However - I would like the project advance text to be different from the rollover state for each project  square.

Is this possible? 

If not simpler - I would like to keep the arrows for advancing but lose the text.  

THANKS IN ADVANCE!!

Can you share ink to portfolio page?

On 6/21/2020 at 12:58 PM, tuanphan said:

.item-pagination-icon.icon.icon--stroke { display: none; }

If I input this CSS the pagination arrows are removed, however If I change it to:

.item-pagination-icon.icon.icon--stroke {

color: #d3b6ae !important;

}

Targeting the exact same thing these do not change colour but remain black despite the !important declaration; Any idea why this is? Surely they are targeting the correct id (as evidenced by them being removed in your original code) and the color declaration is pretty straightforward.....?

Any thoughts?

Hi there - 

I would like to keep the arrows but remove the text. Is that possible?

On 2/26/2021 at 8:42 AM, GreggP said:

Targeting the exact same thing these do not change colour but remain black despite the !important declaration; Any idea why this is? Surely they are targeting the correct id (as evidenced by them being removed in your original code) and the color declaration is pretty straightforward.....?

 

Any thoughts?

You'd have to post the URL for the page. It could be one of several issues. Competing rule-sets. Those icons could be SVG and a different property (fill) is needed to change the color.

@kasigoshinsky

Please post the URL for the page where you want to remove text on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedon thanks hadoin't noticed that it was an SVG solved it..

Hi All, 

Does anyone know how I can alter the CSS above to hide the text?

On 7/1/2021 at 9:36 PM, frank_smith said:

Hi All, 

Does anyone know how I can alter the CSS above to hide the text?

Hi. Hide pagination titles or hide prev/next?

On 7/3/2021 at 6:43 AM, tuanphan said:

Hi. Hide pagination titles or hide prev/next?

Hi, 

Pagination Titles, I think! 

I have already hidden the pagination icons (arrows) using this CSS...

.item-pagination-icon.icon.icon--stroke {
    display: none;
}

But would also like to hide the titles using CSS

👍

9 hours ago, frank_smith said:

Hi, 

Pagination Titles, I think! 

I have already hidden the pagination icons (arrows) using this CSS...

.item-pagination-icon.icon.icon--stroke {
    display: none;
}

But would also like to hide the titles using CSS

👍

Use this code

h2.item-pagination-title {
    display: none;
}

3 hours ago, tuanphan said:

Use this code

h2.item-pagination-title {
    display: none;
}

 

Perfect! Thank you! 😁

hi !
I was wondering is there any way to change font size / arrow size ? I can see how to remove them, but what about adjusting?

On 3/29/2022 at 5:25 PM, anuni said:

hi !
I was wondering is there any way to change font size / arrow size ? I can see how to remove them, but what about adjusting?

Use this CSS

.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 14px;
}

Hi all, 

I have the opposite quesiton. Is it possible to add this type of navigation at the bottom of my galleries to go to the next one (not a portfolio) ? 
I'd like the exact same thing as the normal links, same typo same size same arrow. 

Thanks a lot 

On 4/19/2022 at 7:23 PM, atome1208 said:

Hi all, 

I have the opposite quesiton. Is it possible to add this type of navigation at the bottom of my galleries to go to the next one (not a portfolio) ? 
I'd like the exact same thing as the normal links, same typo same size same arrow. 

Thanks a lot 

Hi. Possible. However you will need to code manually on all galleries page.

If you share link to a gallery, we can check & tweak the code easier

Hello, @taunphan!

Can you help me with some CSS code for changing the color of the background and font of the navigation at the bottom. Also, is there a way to adjust the vertical padding size (above and below the words)?

Thank you!

11 minutes ago, Ferocity said:

Hello, @taunphan!

Can you help me with some CSS code for changing the color of the background and font of the navigation at the bottom. Also, is there a way to adjust the vertical padding size (above and below the words)?

Thank you!

What is your portfolio page? We can test code easier

On 6/30/2022 at 5:51 PM, tuanphan said:

What is your portfolio page? We can test code easier

https://www.centralbridgeco.com/our-projects/gilcrease-expressway

pw: CBCFr2022!8