LukeDesign

Thank you!!

The code below that I’ve been using to style my cookie banner has stopped working, particularly the font color. It worked fine for a month. Can you suggest any changes to fix the issue? Site: https://www.lucasano.com/ .sqs-cookie-banner-v2 p { color: #F9F7F5 !important; font-family: "Stevie Sans", sans-serif !important; font-size: 12px !important; font-style: normal !important; font-weight: 200 !important; letter-spacing: .7px !important; line-height: 150% !important; }

Thank you. I was able to find some Javascript that achieved what I was looking for.

Does anyone have a suggestion for this? Thank you!

Awesome, thank you!

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?

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

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!

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.

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; }

The CSS you gave me is still there - https://www.lucasano.com/test

That did not work

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

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!

Thank you. That definitely helped but it's creating an uneven spacing between each link: https://www.lucasano.com/test-2

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; }

Beautiful, thank you!

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:

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

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.

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; } }

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!

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; }

Ah, perfect! I was getting caught up on the angle part. I adjust to 90° and it scrolls perfectly. Thank you!

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.