Ben92 Posted April 13, 2022 Share Posted April 13, 2022 Site URL: https://www.janeashleygardendesign.co.uk/ I've been trying to set up a landing page style homepage with a slideshow that autoplays + centred white text overlayed on top of the slideshow images + a transparent header (with the header text in the colour white). I couldn't figure out how to do this so hacked a solution together by playing the images as a video in the background, rather than making it a slideshow - but the video is quite large and the quality of the images is less good so I really want to solve this. Any help will be very appreciated. Full context and what I've tried is below: The current homepage (https://www.janeashleygardendesign.co.uk/) This is a background video Initially this was the only way I could figure out how to show 3 pictures with text sitting on top, centred on the page The only code on the current home page is to remove the footer: <style> #footer-sections { display: none!important;} </style> However, the pictures in the video are slightly low quality and the video is quite a large file to download So I want to switch to using a slideshow on the homepage Note that I want the new homepage to look essentially the same as the current homepage - but using a slideshow should mean the pictures are higher quality and also quicker to download I am not sure how to make the new homepage look like the current one using a slideshow I have looked at this video and tried to do what it says: https://www.youtube.com/watch?v=PF45Wz5dAX0&ab_channel=InsideTheSquare-SquarespaceTutorials I have tried using a ’slideshow full’ and then overlaying a text box on top of it with the following code: (you can see this at this link https://www.janeashleygardendesign.co.uk/home-test-2-1 and use the password ’test’) <style> #page .page-section{height:75vh!important} #page .page-section:nth-child(2) {margin-top:-100vh!important;} #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important} #footer-sections {display:none!important} <style> This has made it look like the homepage except the navigation text in the header is black not white - which means you can’t really see it. How can I turn the text in the navigation header to be white (not black?) Can someone tell me how to do this by starting from scratch or by turning the header text colour from black to white on the above test page? Thanks so much in advance Link to comment
Beyondspace Posted April 17, 2022 Share Posted April 17, 2022 On 4/13/2022 at 6:23 PM, Ben92 said: Site URL: https://www.janeashleygardendesign.co.uk/ I've been trying to set up a landing page style homepage with a slideshow that autoplays + centred white text overlayed on top of the slideshow images + a transparent header (with the header text in the colour white). I couldn't figure out how to do this so hacked a solution together by playing the images as a video in the background, rather than making it a slideshow - but the video is quite large and the quality of the images is less good so I really want to solve this. Any help will be very appreciated. Full context and what I've tried is below: The current homepage (https://www.janeashleygardendesign.co.uk/) This is a background video Initially this was the only way I could figure out how to show 3 pictures with text sitting on top, centred on the page The only code on the current home page is to remove the footer: <style> #footer-sections { display: none!important;} </style> However, the pictures in the video are slightly low quality and the video is quite a large file to download So I want to switch to using a slideshow on the homepage Note that I want the new homepage to look essentially the same as the current homepage - but using a slideshow should mean the pictures are higher quality and also quicker to download I am not sure how to make the new homepage look like the current one using a slideshow I have looked at this video and tried to do what it says: https://www.youtube.com/watch?v=PF45Wz5dAX0&ab_channel=InsideTheSquare-SquarespaceTutorials I have tried using a ’slideshow full’ and then overlaying a text box on top of it with the following code: (you can see this at this link https://www.janeashleygardendesign.co.uk/home-test-2-1 and use the password ’test’) <style> #page .page-section{height:75vh!important} #page .page-section:nth-child(2) {margin-top:-100vh!important;} #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important} #footer-sections {display:none!important} <style> This has made it look like the homepage except the navigation text in the header is black not white - which means you can’t really see it. How can I turn the text in the navigation header to be white (not black?) Can someone tell me how to do this by starting from scratch or by turning the header text colour from black to white on the above test page? Thanks so much in advance Have you figured it out? Do you still need help? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment