Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


IvanOB

Question

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

17 answers to this question

Recommended Posts

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

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
  • 0

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

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
  • 0
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
  • 0
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
  • 0

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

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

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