KaijuCorgi

Okay @bangank36 and @tuanphan I've got it live now. https://circle-triceratops.squarespace.com/ Password: jackrabbit The section with the layered button is right above the footer.

The site is still in trial mode so we can't publish, even privately 😕 I'll try to mock it up on another site I have access to and see if I can replicate the issue. Edit: @bangank36I've added a page on another site and tried to replicate it exactly. The section type, content, and CSS is the same and the button behavior is the same. https://pineapple-sapphire-khkb.squarespace.com/sandbox (no password)

Note: this site isn't published so hopefully you can help without access to the page itself (I'm not the site owner). If not I may be able to get the owner to move it to password protected. I'm trying to create a button style like this (Figma screenshot): I found some CSS that should do exactly what I want (https://codepen.io/joebocock/pen/ZEWoMPb) but when I put in this code, it refuses to layer the boxes in the right order. The cream box is always on top (actual site screenshot): I added z-index: 99 to the first button, which isn't in the example code. Without that, Squarespace treated the ::after as :onhover (cream box only appears when you hover). Otherwise the CSS works great (colors, etc). It's just the layer order. Here is the current CSS: #page-section-62609597342c653695d5b87c .sqs-block-button-element { outline: 0; position: relative; background-color: #BF6939; z-index: 99; } #page-section-62609597342c653695d5b87c .sqs-block-button-element::after { content: ""; background-color: #FAF7F3; border: 1px solid #BF6939; width: 100%; z-index: -1; position: absolute; height: 100%; top: 7px; left: 7px; }

I was able to log in and try this and it worked perfectly. Thank you so much @bangank36

Thank you so much @bangank36! I haven't been able to try this because I'm having login issues for this site, but I'm confidant that it'll work. I just wanted to let you know I saw this and I really appreciate it! I'll post again when I actually implement the code 🙂

Site URL: https://www.apertureconsultinggroup.com/home I added some background card styling to my footer in Brine, and it looks correct except the columns within the row won't squash down (get narrower) to all fit on one row. Even when my browser window is huge, the blocks just get bigger and the third item remains on the next row. I did this before and it worked fine, but I didn't keep that version of the code 😩 Any advice? Current css for the cards: #footerBlocksTop > div > div > div.row.sqs-row > div:nth-child(1), #footerBlocksTop > div > div > div.row.sqs-row > div:nth-child(2), #footerBlocksTop > div > div > div.row.sqs-row > div:nth-child(3) { background-color: #fff; border-radius: 8px; margin: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 30px; padding-left: 30px; box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15); } Screenshot of the issue:

All pages will be Index pages. This section will pretty much always be above the footer on every page, but having it actually BE the footer was causing other problems so I separated it. And that's best as I may want it in other areas depending on the page, or not there at all on some pages.

Oh shoot I'm sorry, it's not part of the footer anymore. It's on this page, above the footer. I would like this section to be reusable on other pages if possible.

Hey @tuanphancould I get your help again? I'm trying to do something similar in the footer. I can add styles in dev mode and it works, but I don't know how to actually turn this code into proper CSS for squarespace. Here's the selector I get from dev mode: #page-6218458ff9134254f133d585 > div > div > div.row.sqs-row > div:nth-child(1) And here's what it looks like when I tinker in Dev mode (this is what I want): How would I turn this column into a proper CSS selector as you did earlier in the thread? Just pasting that code into CSS doesn't do anything.

Yes!! Thank you so much @tuanphan! So simple but now I know 😁 I added background-repeat: no-repeat and it's exactly what I needed. You're the best. Edited for anyone finding this later - I actually used the following, so the image would scale to the width of the window but not repeat either horizontally or vertically: background-size: 100%; background-repeat: no-repeat;

Site URL: https://www.apertureconsultinggroup.com/home I'm working with a client-installed template using Brine, and I want to insert a background image on all the main pages. But the template uses Index pages and I can't find a way to set a background image for the entire Index page, as opposed to the banners for each "page"/section. Here's an example with the background set for the top section. You can see it's cut off - Instead I want the background to fade out gradually behind the first 2-3 sections. I know I can accomplish this by combining sections/pages so there's one banner for all the content, but that's not ideal at all. I've attached a Figma screenshot of what I want it to look like.

Hey @tuanphan! The only thing I can't figure out is padding to the right and below the unordered list. See attached. Adding padding-right doesn't seem to do anything, and padding-bottom to p or li adds it between each item of course.

Nevermind! In the editing window it looks weird but when I save and get out of editing mode it looks great! Thank you!!

Thank you @tuanphan! This is much closer. I'm getting two drop shadows and no orange background. I'm not experienced with child selectors so this is beyond me! If I remove &>div from here: /* screenshot 1 */ div#block-61f1b7dad99a28008a558525 { &>div { box-shadow: 5px 4px 10px rgba(0,0,0,0.5); border-radius: 10px; } it removes the inner box shadow, but I don't know if that's the correct thing to do.

Correct - Also this one, which I'd like to include icons before the first two list items.

Thank you @tuanphan! I'd like all three! I've added all the orange-title card content to the page, and the newsletter text blocks + form are in the footer. https://sparhawk-plus-gary-cashman.squarespace.com/safetalk

Site URL: https://sparhawk-plus-gary-cashman.squarespace.com/safetalk Working on a site using Brine. I want to create cards containing individual text and image blocks (see attached) and I'm not sure how to go about it. Using image blocks seems really clunky but maybe that's the answer. I'm surprised I've never run into this before in Squarespace, but it's such a basic HTML function. This conversation from 2019 seems to solve the problem in a better way, but I don't know how to find divs, only block IDs Page is https://sparhawk-plus-gary-cashman.squarespace.com/safetalk and if you scroll to the footer, the newsletter blocks are another area I'd like to have in their own container so I can style it differently (attached).

I may need to use that elsewhere depending on which is less work, thank you!

I ended up just making exceptions for the text blocks where I didn't want blue bold, and that works great. But if there's a better solution let me know! I figure the less #block-level css I need the better.

Site URL: https://www.cassiebarden.com/gates-wip I'm trying to add css so that the bold text in some text blocks is #06BCC1 instead of black. But I don't want to change ALL bold for this paragraph style. Attached is what I want it to look like. This is my p1, and I use p1 elsewhere and want regular default/black bolding. I've tried a few different things but it either does nothing or changes all bold text. I figure I can make this code blocks and use <span> but I thought I'd check to see if there's a better way first.

You're brilliant @bangank36! Thank you!

Done!

Thank you @tuanphan! This site is definitely a work in progress, but those are very helpful!

Site URL: https://www.cassiebarden.com I just added some CSS to my site to give my logo a hover effect (hovering triggers an animated gif) but now it's not clickable. I see why, since using CSS I added a second image on top of the logo placed through Squarespace's editor. But I can't access the HTML so I'm not sure how to make it a link... This is the guide I used: https://beatrizcaraballo.com/blog/animated-logo

Perfect, thank you @bangank36!!