Jump to content

LukeDesign

Member
  • Posts

    77
  • Joined

  • Last visited

Everything posted by LukeDesign

  1. Thank you, @inside_the_square! This code worked perfectly! I had a couple other issues trying to get the category pages to match the style of blog post pages and summary blocks: The date on category pages are displayed as 00/00/00 whereas blog posts and summary blocks are displayed as June 1, 2024. Is there a code to match to June 1, 2024? I’d like the date displayed on top, then category underneath, followed by the blog title.
  2. I am trying to style the my category blog pages to how I’ve styled my blog summary blocks, specifically, the “Read More” link. Here is the style of the summary block where the “Read More” link is styled correctly: https://www.lucasano.com/test-5 And below is a link to one of my category pages where I've tried to mimic the "Read More" style button: https://www.lucasano.com/blog-content/category/Latest+Work I can’t get the "Read More" link to style correctly even though I am using the same code for the summary block, but targeting the .blog-more-link selector. Also, the underline is not going away, despite the correct code to remove it. Here is the code I am using: .blog-more-link { position: relative !important; display: inline-block !important; height: 40px !important; padding-top: 6px !important; padding-left: 5px !important; padding-right: 0px !important; padding-bottom: 5px !important; font-size: 13px !important; top: -20px !important; color: initial !important; z-index: 1 !important; transition: color 0.3s !important; text-decoration: none !important; } .blog-more-link::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: 30% !important; height: 80% !important; border: 1px solid #323843 !important; box-sizing: border-box !important; transform: translateX(-50%) !important; border-radius: 4px !important; background-color: transparent !important; transition: background-color 0.3s !important; z-index: -1 !important; } .blog-more-link:hover::before { background-color: #323843 !important; } .blog-more-link:hover { color: #EFEAE6 !important; }
  3. The CSS you gave me is still there - https://www.lucasano.com/test
  4. Hi @tuanphan, I tried using this code to achieve the same on a single page, but it's not showing the navigation links in the hamburger menu. My header navigation is also partially showing. I used the same code as above but switched out my body#collection ID, which is body#collection-66588e7bd03541145758635a. Website: https://www.lucasano.com/test
  5. I am also trying to get background-attachment: fixed to work on IOS. I’ve been scouring the internet trying to find a solution and came across this post: https://kriesi.at/support/topic/colour-section-background-image-mobile-responsive-issue/#post-1262283 You can also see his test here: https://webers-testseite.de/donkey/ which works perfectly on my IOS. I am wondering on how to adapt this code to Squarespace (I am not a CSS expert). This is the code he is using: .bg-fixed { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); background-size: 0 !important; overflow: hidden; position: relative; top: 0; } .bg-fixed:after { content: ""; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-image: inherit !important; background-repeat: no-repeat !important; background-size: cover; background-position: inherit; pointer-events: none; z-index: -1; visibility: visible !important; } Here is a link to my test page: https://www.lucasano.com/test-3 The section ID I want to set the background image to is: section[data-section-id="6657842d665515262f9f5e36"] And the URL for the background is: https://static1.squarespace.com/static/660dabf2c74e425529726520/t/662252cc3539fd50ece45305/1713525454099/Sample+image+4.jpg Thanks!
  6. Thank you. That definitely helped but it's creating an uneven spacing between each link: https://www.lucasano.com/test-2
  7. I want to reduce the spacing between links in a blog Archive block. I don't want them so spread apart but rather closer together. I adjusted the padding, but that's just adjusting the size of the link background: https://www.lucasano.com/test-2 Here is the code I am using: .archive-group-name-link { background: #323843; color: #F8F4EF; padding: 5px!important; border: 3px solid #323843; border-radius: 4px; font-size: 12px; font-family: 'Stevie Sans', sans-serif; }
  8. Beautiful, thank you!
  9. I want the form block to fit over the shape as I want this size, but I can't adjust it anymore: This is what I'm looking to do:
  10. Ah, thank you! If I had a summary block with multiple thumbnails, is there a way to target them individually? I tried the code above and the effect shows for all of them at once: https://www.lucasano.com/test-2
  11. Yes, basically want it centered to the blue shape behind it, so whether that's reducing more padding on right side or left. Currently I can't reduce it any more. I had tried some padding CSS (set at 0) but it still didn't achieve the width I was looking for to fit center inside the blue box.
  12. Awesome, it worked, thank you @tuanphan. I have another one. I am trying to apply this now to a summary block (thumbnail image). I got it working, somewhat. It's moving in the wrong direction: https://www.lucasano.com/test-2 I am targeting the .summary-thumbnail selection. Here is the code I am using: div#block-yui_3_17_2_1_1716323319625_320446 { .summary-thumbnail:after { /* Replaced .sqs-image-content with .summary-thumbnail */ content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 101%; z-index: 1; background: -moz-linear-gradient(left, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 50, 0) 100%); background: -webkit-linear-gradient(left, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 50, 0) 100%); background: linear-gradient(to right, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 166, 0) 100%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; opacity: 1 !important; pointer-events: none; } &:hover .summary-thumbnail:after { /* Replaced .sqs-image-content with .summary-thumbnail */ right: 0; } }
  13. Hi @tuanphan, I have a new type of gallery block that I would like to apply this hover effect. It is a carousel gallery block that does not have light box toggled. When the user hovers over it, the effect should come on. I tried the other codes, but they're not working as I suspect the hover is tied to the HTML structure provided by the light box feature. Here's the page: https://lucasano.com/test-2 Thanks!
  14. I am trying to resize the padding on a specific newsletter block (not site wide). I’ve tried different padding sizes but I can’t get it right. https://www.lucasano.com/test On the this test page, you will see I am trying to fit it over the dark blue shape on the right. Here is the code I am currently using: /* =================================== TEST PAGE: NEWSLETTER STYLE =================================== */ #block-yui_3_17_2_1_1716234526589_4019 .newsletter-form-header-description { margin-top: 0; margin-bottom: -25px; } #block-yui_3_17_2_1_1716234526589_4019 .newsletter-form-button { height: 20px; margin-top: -20px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
  15. Ah, perfect! I was getting caught up on the angle part. I adjust to 90° and it scrolls perfectly. Thank you!
  16. I did see this but it does not achieve the parallax upward scroll effect that I am looking for. This method uses a zoom which I don't want. I am looking for the traditional upward/downward effect like the option for background images.
  17. Is there a way to add a parallax scroll effect to an image block inside a section? I don’t see it as an option in the Squarespace image settings (I know you can add it to a section background image). I’ve seen it done before but I can’t figure out the code. Below is my test page. The image for the effect is is #block-yui_3_17_2_1_1715707344484_171448. I currently have the image set to “fill”, so there is more of the image that’s not visible to use for the parallax effect. https://www.lucasano.com/test I included the original image below it (set to fit) so you can see the full image. Thank you!
  18. Yes, this solved it. Thanks as always!
  19. My bad, the test page is: https://www.lucasano.com/test. No password.
  20. Does anyone know how to display more images in a carousel? I want to display about 5 images that scroll through. Here is my link with a test carousel. https://www.lucasano.com/home I am already using CSS to space out the images: .sqs-gallery-design-strip-slide { padding-right:10px; margin-left:10px; margin-top:0px; margin-bottom:0px; border-right: 1px solid #323843; }
  21. That did it! Thank you!
  22. Thank you, @tuanphan. That did the trick. But I am having a glitch with the lightbox. It takes a couple clicks on the image for the lightbox to open up. I have to keep clicking (vigorously lol) before it eventually opens up. The below link has two images to show you - one with the hover effect and one without. https://www.lucasano.com/test
  23. Hi @tuanphan, is there a way for this to work on a non-gallery block? I want to apply the same effect over a traditional image block. I tried with the code above but it doesn't work, even when I select the lightbox option. Here is the test site with an image: https://www.lucasano.com/test And here is the code I am using for this image: div#block-yui_3_17_2_1_1715028469360_214068 {a.content-fill:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 101%; z-index: 1; background: -moz-linear-gradient(left, rgba(226, 150, 50, 0.5) 0%, rgba(226, 175, 50, 0) 100%); background: -webkit-linear-gradient(left, rgba(200, 150, 166, 0.5) 0%, rgba(200, 175, 50, 0) 100%); background: linear-gradient(to right, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 166, 0) 100%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } a.content-fill:hover:after { right: 0; } }
  24. Amazing! Works perfectly. So much to change the colors to get different effects. Thank you so much!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.