Bel_SquareSpace Posted June 15, 2020 Share Posted June 15, 2020 Hi SS Forum, I am trying to overlay my png. logo file over a slideshow gallery in square space. Does anyone know a code for this? As my logo file is not text but an image, I am having troubles overlaying this onto a slideshow or gallery. Thank you Link to comment
Beyondspace Posted June 15, 2020 Share Posted June 15, 2020 Hi there It will be helpful if you can show your site url and password if there is so that we can check the actual issue 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
Bel_SquareSpace Posted June 15, 2020 Author Share Posted June 15, 2020 Hi, Thanks for your reply! I have attached a link to my home / landing page. https://dog-wrasse-bzts.squarespace.com/ I would like to put the 'atoma' logo which is a png file onto of the slide show which is in the section below. I have attache an image of what I would like it to look like. Thank for your time. Bel Link to comment
Beyondspace Posted June 15, 2020 Share Posted June 15, 2020 1 hour ago, Bel_SquareSpace said: Hi, Thanks for your reply! I have attached a link to my home / landing page. https://dog-wrasse-bzts.squarespace.com/ I would like to put the 'atoma' logo which is a png file onto of the slide show which is in the section below. I have attache an image of what I would like it to look like. Thank for your time. Bel Here is quick fix, I would rather remove the logo above the gallery and placed it in a psuedo selector like so: [data-section-id="5ee7179706a84020c0827f31"]:after { content: " "; position: absolute; width: 100%; height: 100%; z-index: 9999; top: 0; background: url(https://images.squarespace-cdn.com/content/v1/5ecdccf…/1591688009917-9L6KA56ARAJ5AYDGP4U5/ke17ZwdGBToddI8pDm48kMPu3vAJVIO2ksrI68T0UXN7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0lR3JoLcFN0gowL4YjRNPWLlZQxB-p3EIYj4hAcpIkFDV1BUhAbjQ5LiUZFLBYUrIg/atoma+SMALL+pink+trans.png); background-repeat: no-repeat; background-position: 50% 50%; } https://prnt.sc/szxftm 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
Bel_SquareSpace Posted June 15, 2020 Author Share Posted June 15, 2020 Hi bangank36, Thank you so much for your quick reply. This works so well. appreciate the advice. The only issue is that the links that I have setup for the images in the gallery don't seem to working now. I have setup links to go to my selected projects page. - link below. https://dog-wrasse-bzts.squarespace.com/portfolio Kind regards, Bel Link to comment
Beyondspace Posted June 15, 2020 Share Posted June 15, 2020 27 minutes ago, Bel_SquareSpace said: Hi bangank36, Thank you so much for your quick reply. This works so well. appreciate the advice. The only issue is that the links that I have setup for the images in the gallery don't seem to working now. I have setup links to go to my selected projects page. - link below. https://dog-wrasse-bzts.squarespace.com/portfolio Kind regards, Bel This may help, pls kindly mark the question once it done, thanks <style> [data-section-id="5ee7179706a84020c0827f31"]:after { content: " "; position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: url(https://static1.squarespace.com/static/5ecdccf…/t/5ee735e…/1592210915203/atoma_colour_cmyk_PNG+white+smallest.png); background-repeat: no-repeat; background-position: 50% 50%; } </style> Bel_SquareSpace 1 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
Bel_SquareSpace Posted June 15, 2020 Author Share Posted June 15, 2020 (edited) hi bangank36, This worked well except that the logo image itself doesn't allow you to click through and the logo is cut off on the mobile website. Thank you Bel Edited June 15, 2020 by Bel_SquareSpace Link to comment
RyanDejaegher Posted June 15, 2020 Share Posted June 15, 2020 Hey @Bel_SquareSpace, yes an issue with the psuedo approach is that the element won't be clickable because you can't insert an HTML link. You should be able to get the desired effect and still have it clickable. Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Beyondspace Posted June 15, 2020 Share Posted June 15, 2020 4 minutes ago, ryandejaegher said: Hey @Bel_SquareSpace, yes an issue with the psuedo approach is that the element won't be clickable because you can't insert an HTML link. You should be able to get the desired effect and still have it clickable. Maybe I solution not ideal, please suggest us a proper one that meet the requirement, thanks PrismaVisual 1 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
RyanDejaegher Posted June 15, 2020 Share Posted June 15, 2020 @Bel_SquareSpace would you want this logo to be visible over all the slideshow items or just one? Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Bel_SquareSpace Posted June 15, 2020 Author Share Posted June 15, 2020 Hi Ryan, It would be great for it be over all of the slideshow images. So the logo would remain in the same place as the images in the slideshow slide behind it. Thank you!! Bel 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