Jump to content

LukeDesign

Member
  • Posts

    58
  • Joined

  • Last visited

Everything posted by LukeDesign

  1. Thank you. I was able to find some Javascript that achieved what I was looking for.
  2. Does anyone have a suggestion for this? Thank you!
  3. I've added the CSS in the Custom CSS under Website Tools. I also tried it in the Page's header injector, but are not working. The below image is what happens: I have a lot of CSS in my Custom CSS - you want me to send all of it?
  4. Thank you! For a blog post, is there a way to stack the meta as well - with date on top and category underneath? https://www.lucasano.com/blog-content/template-blog-post
  5. I am building a blog post template that I will use for all my posts. I want to add a “Related Posts” summary block on the bottom using categories. I know how to add a summary block and select categories, but since I am building a template, I would like CSS that can pull up the categories from the current page automatically to display those related posts. Here is the template so far: https://www.lucasano.com/blog-content/template-blog-post Thanks!
  6. 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.
  7. 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; }
  8. The CSS you gave me is still there - https://www.lucasano.com/test
  9. 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
  10. 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!
  11. Thank you. That definitely helped but it's creating an uneven spacing between each link: https://www.lucasano.com/test-2
  12. 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; }
  13. 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:
  14. 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
  15. 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.
  16. 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; } }
  17. 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!
  18. 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; }
  19. Ah, perfect! I was getting caught up on the angle part. I adjust to 90° and it scrolls perfectly. Thank you!
  20. 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.
  21. 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!
  22. Yes, this solved it. Thanks as always!
×
×
  • 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.