Jump to content

Edit Portfolio Navigation Text

Recommended Posts

Site URL: https://blueberry-moose-azns.squarespace.com

Hello—

Using ss7.1 for a portfolio site.

I selected the Portfolio index, and would like to adjust the size of auto-navigation text at bottom of portfolio pages...(see image) 
Is it possible to customize this specific text instead of change overall header sizing?

Any lead on where to look to adjust in setting and/or customization would be helpful!

Thanks 

Screen Shot 2020-03-23 at 11.57.24 AM.png

Edited by ysdm
Link to comment
  • 2 months later...

Hi!

Same problem with the portfolio page auto-pagination. 
Ideally I would like to delete the whole thing but can't find a way.
For the arrows same, still haven't find the way to tweak them.

Agree with you about the template by the way.

Did you finally find a way?

Link to comment
13 hours ago, AmbreMorin said:

Hi!

Same problem with the portfolio page auto-pagination. 
Ideally I would like to delete the whole thing but can't find a way.
For the arrows same, still haven't find the way to tweak them.

Agree with you about the template by the way.

Did you finally find a way?

If you share link to portfolio, we can take a look.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Hi! I was hoping to make the text size smaller of auto-navigation text at bottom of portfolio page on my portfolio page version 7.1. Can you help me with this code?

I also wanted to make the text size smaller on the footer.

Link to comment
6 hours ago, JessicaBryan said:

Hi! I was hoping to make the text size smaller of auto-navigation text at bottom of portfolio page on my portfolio page version 7.1. Can you help me with this code?

I also wanted to make the text size smaller on the footer.

If you share link to portfolio page, we can check easier.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Hi there,

I'd also like to adjust the size of the pagination arrows (for 7.1), but for mobile only (I can adjust the font size, but the arrows seem to stay the same size)

https://blakefair.com/origami-space-station-blueprint/the-nights

Also, is there a way to make the pagination form a loop?  That is, to be able to continuously move backwards or forwards through all portfolio pages, rather than reach a dead end?

Thank you 🙂

Link to comment
15 hours ago, blakefair said:

Hi there,

I'd also like to adjust the size of the pagination arrows (for 7.1), but for mobile only (I can adjust the font size, but the arrows seem to stay the same size)

https://blakefair.com/origami-space-station-blueprint/the-nights

Also, is there a way to make the pagination form a loop?  That is, to be able to continuously move backwards or forwards through all portfolio pages, rather than reach a dead end?

Thank you 🙂

Add to Home > Design > Custom CSS

section.item-pagination.item-pagination--prev-next.white svg {
    width: 50px;
    height: 50px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
  • 3 months later...

Hi - sorry to dig up an old thread. Having issues with the navigation text and arrows on mobile view. I have reduced font size using tips i found in this thread (thanks) but still no good. Would there be a way to have the ‘forward’ and ‘back’ navigation arrows and text appear on two seperate lines?

< example back

           Example forward >

See attached screenshot for current issue.

 

E07C622B-C2CD-4D9F-B3CC-2311140CEB4E.jpeg

Link to comment

@mogi

Please post the URL for a page on your site where we can see your issue.

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.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks @creedon

https://www.katevernonarchitects.com/portfolio/tiger-townhouse

The issue is only when it is viewed on mobile.

 

11 hours ago, creedon said:

@mogi

Please post the URL for a page on your site where we can see your issue.

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.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Link to comment

@mogi

Add the following to Design > Custom CSS.

/*

  begin portfolio navigation column mobile
  
  Version       : 0.1d1
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @media only screen and ( pointer : coarse) and ( max-width : 1024px ),
  screen and ( max-width : 799px )
  
    {
    
      .collection-61335bb30720e304def49446 {
      
        .item-pagination--prev-next {
        
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction : column;
          
          }
          
        .item-pagination-link {
        
          max-width : unset;
          
          }
          
        }
        
      }
      
  /* end portfolio navigation column mobile */

This code is specific to the users need.

Let us know how it goes.

Edited by creedon
version 0.1d1

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks so much for your response @creedon

Unfortunately, that didn't seem to work. Still have the overlapping project names in mobile view.

6 minutes ago, creedon said:

@mogi

Add the following to Design > Custom CSS.

/*

  begin portfolio navigation column mobile
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @media only screen and ( pointer : coarse) and ( max-width : 1024px ),
  screen and ( max-width : 799px )
  
    {
    
      #item-61337b3cf959853c00bc4f25 {
      
        .item-pagination--prev-next {
        
          flex-direction : column;
          
          }
          
        .item-pagination-link {
        
          max-width : unset;
          
          }
          
        }
        
      }
      
  /* end portfolio navigation column mobile */

This code is specific to the users need.

Let us know how it goes.

 

Link to comment

I think there are two issues. The first I've taken care of in my code. I have updated my code post.

When I looked at your site I saw a syntax error.

850202479_ScreenShot2021-09-10at11_06_26PM.png.84211bc0f7859a8d6a434a70ee80a35d.png

My code did not generate this error when I tested it.

It appears perhaps you did not copy the first line or two of the code. The code begins with the first line starting with /*.

Try the new code making sure to copy it exactly.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks! Works a treat. Amazing. Very generous of you to assist. Thank you. 
 

1 hour ago, creedon said:

I think there are two issues. The first I've taken care of in my code. I have updated my code post.

When I looked at your site I saw a syntax error.

850202479_ScreenShot2021-09-10at11_06_26PM.png.84211bc0f7859a8d6a434a70ee80a35d.png

My code did not generate this error when I tested it.

It appears perhaps you did not copy the first line or two of the code. The code begins with the first line starting with /*.

Try the new code making sure to copy it exactly.

Let us know how it goes.

 

Link to comment
  • 2 years later...
On 1/11/2024 at 6:19 PM, MSCreative said:

Hi @creedon

Is it possible to change the text of the navigation titles on my squarespace portfolio page? I would like to have  "Next"/"Previous" rather than the individual portfolio page names?

Also piggybacking on MSCreative's post. 

 

Link to comment
7 hours ago, gardenlady said:

@tuanphan Thank you so much! I put it in the Custom CSS box but nothing has changed. Maybe my site's template is somehow overriding the code?

I have invalid id, use this new code

/* prev next */
.item-pagination[data-collection-type^="portfolio"] h2 {
    visibility: hidden;
}
a.item-pagination-link.item-pagination-link--next h2:after {
    content: "next";
    visibility: visible;
}
.item-pagination-link--prev h2:before {
    content: "previous";
    visibility: visible;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.