Help with Landing Page Slideshow Full Screen with Text and Buttons on 7.0

Hi guys, 

I am trying to create a Homepage / Landing page on my website and I could use a bit of help. 

I am trying to reach this result https://www.ghostplugins.com/products/super-slideshow-gallery-autoplay-version?peachs_apc=christy-price, however, I am using version 7.0 of Squarespace.

I have created an Index with a Gallery set to Slideshow that became fullscreen following this tutorial https://christyprice.com/blog/full-bleed-slideshow  

 I have only managed to hide the footer and header with this code in the Index Page > Settings > Advanced  

<style>.Header, .Footer, .Mobile-bar{display:none !important; }
</style>

But I would like to bring back the Logo of my site, without bringing back all the header and adding a text and a button to each slide.

I must let you know that I have custom code for the header that is slanted, so when I tried to use .Header-nav in the code above, it brought back the logo with the header background colour and some bug flashing the "slanted part" when the slide changes from one to another.

I will attach some screenshots just to be more clear since this landing page is not online at the moment. 

"Slideshow Fullscreen"

"Slideshow with the .Header-nav in the code"

"How the Slanted Header Looks on the rest of the website"

Any help would be highly appreciated, considering I have tried many techniques in tutorials, but with no good result. 

Thanks! 

Hi. Can you share link to your site? We can check easier

sure, the website is https://www.brunourzi.com/ 

the slideshow is not online yet 

On 5/21/2022 at 1:27 AM, tuanphan said:

Hi. Can you share link to your site? We can check easier

13 hours ago, Urzilli said:

sure, the website is https://www.brunourzi.com/ 

the slideshow is not online yet 

 

Can you share link to page where you added slideshow? If your site is live, you can add a test page & add slideshow there

5 hours ago, tuanphan said:

Can you share link to page where you added slideshow? If your site is live, you can add a test page & add slideshow there

Done, now the slideshow is in the Home Test page https://www.brunourzi.com/hometest

To bring back logo

Don't remove any code in your current code

Add this to Hometest Page Header

<style>
  header.Header {
    display: block !important;
    background-color: transparent !important;
    position: absolute;
    z-index: 99999;
}
[data-nc-container="bottom-right"] {
    opacity: 0 !important;
}
</style>

17 hours ago, tuanphan said:

To bring back logo

Don't remove any code in your current code

Add this to Hometest Page Header

<style>
  header.Header {
    display: block !important;
    background-color: transparent !important;
    position: absolute;
    z-index: 99999;
}
[data-nc-container="bottom-right"] {
    opacity: 0 !important;
}
</style>

 

Thank you, the logo is back now. 
 I noticed that on mobile, the logo is still not visible. 
Now there is a black block under the slideshow. 

In Page Header, edit this line

.Header, .Footer, .Mobile-bar {
    display: none !important;
}

to this

.Footer {
    display: none !important;
}

Next, edit my code to this

<style>
  header.Header, .Mobile-bar.Mobile-bar--top {
    display: block !important;
    background-color: transparent !important;
    position: absolute;
    z-index: 99999;
}
[data-nc-container="bottom-right"], .Mobile-bar.Mobile-bar--top [data-nc-container="top-right"]{
    opacity: 0 !important;
}
  section#slideshow {
    height: 100vh !important;
}
</style>

21 hours ago, tuanphan said:

In Page Header, edit this line

.Header, .Footer, .Mobile-bar {
    display: none !important;
}

to this

.Footer {
    display: none !important;
}

Next, edit my code to this

<style>
  header.Header, .Mobile-bar.Mobile-bar--top {
    display: block !important;
    background-color: transparent !important;
    position: absolute;
    z-index: 99999;
}
[data-nc-container="bottom-right"], .Mobile-bar.Mobile-bar--top [data-nc-container="top-right"]{
    opacity: 0 !important;
}
  section#slideshow {
    height: 100vh !important;
}
</style>

 

Now the logo is visible on mobile, thank you!

Unfortunately, the black bar is still visible.  

It's now also appearing on mobile, while before it wasn't. 

On 5/27/2022 at 12:16 PM, Urzilli said:

Now the logo is visible on mobile, thank you!

Unfortunately, the black bar is still visible.  

It's now also appearing on mobile, while before it wasn't. 

Use this new code

<style>
  header.Header, .Mobile-bar.Mobile-bar--top {
    display: block !important;
    background-color: transparent !important;
    position: absolute;
    z-index: 99999;
}
[data-nc-container="bottom-right"], .Mobile-bar.Mobile-bar--top [data-nc-container="top-right"]{ 
    opacity: 0 !important;
}
section#slideshow, section#slideshow .gallery-root, section#slideshow article {
    height: 100vh !important;
}  
  section#slideshow img {
    top: 0 !important;
}
</style>

17 hours ago, tuanphan said:

Use this new code

<style>
  header.Header, .Mobile-bar.Mobile-bar--top {
    display: block !important;
    background-color: transparent !important;
    position: absolute;
    z-index: 99999;
}
[data-nc-container="bottom-right"], .Mobile-bar.Mobile-bar--top [data-nc-container="top-right"]{ 
    opacity: 0 !important;
}
section#slideshow, section#slideshow .gallery-root, section#slideshow article {
    height: 100vh !important;
}  
  section#slideshow img {
    top: 0 !important;
}
</style>

 

Thank you so much! 

Is there a way to centre better the picture in the slideshow? 

And also to add a button and a text to each slide?

On 5/30/2022 at 8:04 AM, Urzilli said:

Thank you so much! 

Is there a way to centre better the picture in the slideshow? 

And also to add a button and a text to each slide?

#1. No idea..

#2. Are you able to add Text & Hyperlink? If yes, you can add it then I will give code to turn text link to button

17 hours ago, tuanphan said:

#1. No idea..

#2. Are you able to add Text & Hyperlink? If yes, you can add it then I will give code to turn text link to button

1) I see, thank you anyway!

2) No, it doesn't let me add anything to the slideshow. Could we do it with maybe some codes?

10 hours ago, Urzilli said:

1) I see, thank you anyway!

2) No, it doesn't let me add anything to the slideshow. Could we do it with maybe some codes?

Possible, which plan do you use: personal, business or commerce?

14 hours ago, tuanphan said:

Possible, which plan do you use: personal, business or commerce?

Business plan