Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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.

image.png.0c166939a9b28e6eef580ad42fe1397f.png

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

Link to comment
  • Solution

add to Page Settings > Advanced > Header

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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!!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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?

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

👍

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.