bonipops Posted October 24, 2022 Share Posted October 24, 2022 (edited) Hi! I am using the York template on Version 7.0 ! I really want to add my logo (Lolipop graphic) to the box on my cover page like the screenshot attached, just a quick mockup I made using Wix. I attached my current Squarespace page and how I cannot use both the text and logo. Would I be able to achieve this with code? Thanks so much! Edited October 24, 2022 by bonipops Giving thanks :) Link to comment
Beyondspace Posted October 25, 2022 Share Posted October 25, 2022 On 10/24/2022 at 7:51 PM, bonipops said: Hi! I am using the York template on Version 7.0 ! I really want to add my logo (Lolipop graphic) to the box on my cover page like the screenshot attached, just a quick mockup I made using Wix. I attached my current Squarespace page and how I cannot use both the text and logo. Would I be able to achieve this with code? Thanks so much! What is your protected password so I can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
bonipops Posted October 25, 2022 Author Share Posted October 25, 2022 6 hours ago, bangank36 said: What is your protected password so I can take a look? Hello! It is "ILLU450" ! Link to comment
tuanphan Posted October 27, 2022 Share Posted October 27, 2022 On 10/26/2022 at 2:50 AM, bonipops said: Hello! It is "ILLU450" ! Add to Cover Page Header. Replace Pixabay with your logo image url <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before { background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg); content: ""; display: block; width: 70px; height: 70px; background-position: center; margin: 0 auto; margin-bottom: 10px; background-size: cover; background-repeat: no-repeat; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted November 10, 2022 Author Share Posted November 10, 2022 On 10/27/2022 at 9:47 AM, tuanphan said: Add to Cover Page Header. Replace Pixabay with your logo image url <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before { background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg); content: ""; display: block; width: 70px; height: 70px; background-position: center; margin: 0 auto; margin-bottom: 10px; background-size: cover; background-repeat: no-repeat; } </style> Hello!! This is awesome! Is there anyway I can get it partially off like in the mockup image I posted in the original post? Link to comment
tuanphan Posted November 13, 2022 Share Posted November 13, 2022 On 11/10/2022 at 9:19 AM, bonipops said: Hello!! This is awesome! Is there anyway I can get it partially off like in the mockup image I posted in the original post? You mean make logo overlap the box, not inside the box? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted December 3, 2022 Author Share Posted December 3, 2022 On 11/13/2022 at 2:43 AM, tuanphan said: You mean make logo overlap the box, not inside the box? Yes! Like this: Link to comment
tuanphan Posted December 4, 2022 Share Posted December 4, 2022 https://bonipops.com/welcome Use this new code <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before { background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg); content: ""; display: block; width: 70px; height: 70px; background-position: center; margin: 0 auto; margin-bottom: 10px; background-size: cover; background-repeat: no-repeat; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); } .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert { position: relative !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted February 13 Author Share Posted February 13 On 12/4/2022 at 3:52 AM, tuanphan said: https://bonipops.com/welcome Use this new code <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before { background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg); content: ""; display: block; width: 70px; height: 70px; background-position: center; margin: 0 auto; margin-bottom: 10px; background-size: cover; background-repeat: no-repeat; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); } .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert { position: relative !important; } </style> Hi Again!! Thank you for this, so if you take a look at my website you can see I have it on there. However, I notice it does not attach to the white box on the cover page, so it differs from computer to computer screen. How can I fix this? Link to comment
tuanphan Posted February 16 Share Posted February 16 On 2/14/2023 at 12:17 AM, bonipops said: Hi Again!! Thank you for this, so if you take a look at my website you can see I have it on there. However, I notice it does not attach to the white box on the cover page, so it differs from computer to computer screen. How can I fix this? Don't remove any code in current code Add this to COver Page Header <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert { position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; } .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before { top: -50px !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted February 18 Author Share Posted February 18 (edited) On 2/15/2023 at 8:57 PM, tuanphan said: Don't remove any code in current code Add this to COver Page Header <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert { position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; } .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before { top: -50px !important; } </style> Amazing! One last thing seems like when I add the new code it brings up the whole box and doesn't center it like it was before. The first picture is before, the second is after. Edited February 18 by bonipops Link to comment
tuanphan Posted February 21 Share Posted February 21 On 2/18/2023 at 10:08 AM, bonipops said: Amazing! One last thing seems like when I add the new code it brings up the whole box and doesn't center it like it was before. The first picture is before, the second is after. Find & remove this line from Cover Page Header Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted February 26 Author Share Posted February 26 On 2/21/2023 at 5:03 AM, tuanphan said: Find & remove this line from Cover Page Header Seems like that did not work! I would the whole box centered since it is too far up now Link to comment
tuanphan Posted February 28 Share Posted February 28 On 2/26/2023 at 7:07 AM, bonipops said: Seems like that did not work! I would the whole box centered since it is too far up now I still see it. Can you check it again? Maybe you have 2 same code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted March 1 Author Share Posted March 1 On 2/28/2023 at 5:03 AM, tuanphan said: I still see it. Can you check it again? Maybe you have 2 same code Link to comment
tuanphan Posted March 6 Share Posted March 6 Try adding this to last line in Cover Page Header <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert { position: fixed !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted March 8 Author Share Posted March 8 On 3/5/2023 at 8:13 PM, tuanphan said: Try adding this to last line in Cover Page Header <style> .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert { position: fixed !important; } </style> I do not think that worked either ):! Link to comment
tuanphan Posted March 11 Share Posted March 11 On 3/8/2023 at 12:05 PM, bonipops said: I do not think that worked either ):! Can you duplicate the site & add me as an admin? I can test code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
bonipops Posted March 12 Author Share Posted March 12 15 hours ago, tuanphan said: Can you duplicate the site & add me as an admin? I can test code easier Yes! What email should I sent the invite to? Link to comment
tuanphan Posted March 16 Share Posted March 16 On 3/12/2023 at 7:14 AM, bonipops said: Yes! What email should I sent the invite to? Sent a private message Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment