DarrenLyons Posted January 15, 2021 Share Posted January 15, 2021 Site URL: https://www.legendsfc.net/directors-and-admin We are looking to recreate something similar to the example at the attached Site URL. Can anyone provide the code necessary to do this, if it is possible? Thanks in advance, DL Link to comment
DarrenLyons Posted January 15, 2021 Author Share Posted January 15, 2021 @bangank36 @tuanphan are you able to help? Your assistance is greatly appreciated. 👍 Link to comment
Beyondspace Posted January 15, 2021 Share Posted January 15, 2021 8 minutes ago, DarrenLyons said: @bangank36 @tuanphan are you able to help? Your assistance is greatly appreciated. 👍 I am setting up a detail so others can follow as well 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
Beyondspace Posted January 15, 2021 Share Posted January 15, 2021 Paste this snippet into your Design->Custom CSS. it will help turn Poster image block within a section into sliding caption :root { --overlay-color: #f0d23d; --text-color: #000; --animate-type: ease; --heading-font: inherit; --heading-font-size: inherit; --body-font: inherit; --body-font-size: inherit; } section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title * { display: none; } section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h1, section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h2, section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h3, section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h4 { margin-top: 1em !important; margin-bottom: 1em !important; font-family: var(--heading-font); } section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper *:not([data-rte-preserve-empty="true"]) { display: block; text-align: center; color: var(--text-color); font-family: var(--body-font); } section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-card-wrapper { background: var(--overlay-color); transition: .5s var(--animate-type); height: 0; overflow: hidden; top: auto !important; } section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image:hover { cursor: pointer; } section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image:hover .image-card-wrapper { height: 100%; } Use this extension to find the correct section id and replace the text "section[data-section-id="5ff9b43fb796f940d47ba48c"]" in the above snippet The :root section allow you to change some basic style of the effect such color or font family, caption structure is heading 4 - paragraph 2 - space - paragraph 4 - paragraph 2 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
DarrenLyons Posted January 15, 2021 Author Share Posted January 15, 2021 This all looks great. When using the ID extension, I do not get a data section code, only a block code. Please see attached screen shot. I think this is preventing the code from working. Link to comment
Beyondspace Posted January 15, 2021 Share Posted January 15, 2021 2 minutes ago, DarrenLyons said: This all looks great. When using the ID extension, I do not get a data section code, only a block code. Please see attached screen shot. I think this is preventing the code from working. What is your template name, did it support index page section? You can also replace the section by the collection id to apply on the whole page 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
DarrenLyons Posted January 15, 2021 Author Share Posted January 15, 2021 The template is "Heights", I am unaware of what it may or may not support. I am reluctant to use the collection id as we will be utilizing other image blocks on the page. Beyondspace 1 Link to comment
DarrenLyons Posted January 15, 2021 Author Share Posted January 15, 2021 @bangank36 please advise Link to comment
tuanphan Posted January 18, 2021 Share Posted January 18, 2021 https://www.legendsfc.net/directors-and-admin Can you share your site url? We can check 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment