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

How to turn off Autoplay and add Navigation arrows to Cover-page (Squarespace 7.0)


jcistaff

Question

Site URL: http://www.studiojci.com/

Hello!

I am currently creating a Cover-Page for our website and I was wondering if it was possible to stop the auto-scroll feature for the images and add big arrows to the middle left and right sides where people can navigate through the images instead. For reference I am using a Squarespace 7.0 Avenue Family template so I cannot do a blank page and full bleed gallery block which I assumed would have been my alternative. I am also using the TRADE layout as my cover page. 

Thank you for any and all help you may be able to provide! 

 

 

 

Forum Image 1.png

Forum Image 2.png

Link to comment
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 1
On 7/27/2021 at 11:44 PM, jcistaff said:

Hi Tuanphan! 

Thanks for reaching out. If it is possible to make a gallery block full bleed into a cover page on 7.0 that'd be a huge help! See below what I have so far. A couple things I wanted to make sure though,

  • Is it possible to keep the header (logo and navigation) 
  • When I make the images full bleed is it possible to have the gallery only display one image at a time as the carousel option seems to not have an option to display one at a time (see below) 

 

Thanks so much!

Forum Image 3.png

Forum Image 4.png

Not sure. You can add, then share url. We will try checking

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
  • 1
20 hours ago, jcistaff said:

Thanks Tuanphan here's the url: http://www.studiojci.com/gc1

To get access into the page the password is: jci123

 

Please let me know if there is anything else I can do!

Add to Design > Custom CSS

/* GC1 gallery */
body#collection-60fed61a880cf11c69d69adf {
div#canvas {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
header#header {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}}

 

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
6 hours ago, tuanphan said:

You can't use standard page, add gallery block, then we will give the code to make gallery fullbleed, remove header, footer to make it cover page??

Hi Tuanphan! 

Thanks for reaching out. If it is possible to make a gallery block full bleed into a cover page on 7.0 that'd be a huge help! See below what I have so far. A couple things I wanted to make sure though,

  • Is it possible to keep the header (logo and navigation) 
  • When I make the images full bleed is it possible to have the gallery only display one image at a time as the carousel option seems to not have an option to display one at a time (see below) 

 

Thanks so much!

Forum Image 3.png

Forum Image 4.png

Link to comment
  • 0
On 7/30/2021 at 5:25 AM, tuanphan said:

Add to Design > Custom CSS

/* GC1 gallery */
body#collection-60fed61a880cf11c69d69adf {
div#canvas {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
header#header {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}}

 

Thank you Tuanphan! 

This definitely helped increase the image size just a couple more things:

  • Is it possible to have no white borders at the top, so the navigation menu is transparent within the image
  • Is it possible to get rid of the white borders at the bottom?

 

 

 

Forum Image 5.png

Forum Image 6.png

Link to comment
  • 0
19 hours ago, jcistaff said:

Thank you Tuanphan! 

This definitely helped increase the image size just a couple more things:

  • Is it possible to have no white borders at the top, so the navigation menu is transparent within the image
  • Is it possible to get rid of the white borders at the bottom?

 

 

 

Forum Image 5.png

Forum Image 6.png

Don't remove any code. Add this to Page Header

<style>
div#canvas {
    margin-top: 0;
    padding-top: 0;
}
header#header {
    margin-bottom: 0;
    background: transparent;
    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
div#block-yui_3_17_2_1_1627313726669_7456 {
    margin-top: 0;
}
</style>

 

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
Posted (edited)
10 hours ago, tuanphan said:

Don't remove any code. Add this to Page Header

<style>
div#canvas {
    margin-top: 0;
    padding-top: 0;
}
header#header {
    margin-bottom: 0;
    background: transparent;
    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
div#block-yui_3_17_2_1_1627313726669_7456 {
    margin-top: 0;
}
</style>

 

This helped scale the image fully thanks! Though now a couple things I noticed

  • This made the margins inconsistent between other pages - is there a way to lower the logo and menu bar for the cover page so that it matches the height of the other pages? If I increase the margin size that's why it'll add more white space to the top
  • there is still a small white area at the bottom and right hand side - is there a way to remove the white area completely?

 As always thank you for your help!

Forum Image 7.png

Forum Image 9.png

Edited by jcistaff
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...