Finding/creating divs to arrange and style blocks into a container

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). 

You want to create screenshot 1, 2 or 3?

• Screenshot 1. Just add a Text Block with Heading, Text, we can give the code to add background/border
• Screenshot 2. Add a Text Block with Heading, List, we will give the code to remove list style with last two items + add icons with first two icons (In case you want to use HTML, instead of Text Block, let me know, we can check & give HTML/CSS code)
• Screenshot 3. Add Text Block + Newsletter, we will give code to add background

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

On 1/29/2022 at 2:34 AM, KaijuCorgi said:

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

Screenshot 1,2. You mean these text?

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

Screenshot 1. Add to Design > Custom CSS

/* screenshot 1 */
div#block-61f1b7dad99a28008a558525 {
&>div {
    box-shadow: 5px 4px 10px rgba(0,0,0,0.5);
    border-radius: 10px;
}
&>div>p:first-child {
    background-color: orange;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
&>div>p:not(:first-child) {
    padding-left: 20px;
    padding-right: 20px;
}}

Screenshot 2

/* Screenshot 2 */
div#block-yui_3_17_2_1_1643231262284_6596 {
&>div {
    box-shadow: 5px 4px 10px rgba(0,0,0,0.5);
    border-radius: 10px;
}
&>div>p:first-child {
    background-color: orange;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
&>div>p:not(:first-child) {
    padding-left: 20px;
    padding-right: 20px;
}
ul li:nth-child(n+3) p:before {
    display: none;
}

ul li:nth-child(1) p:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(https://cdn.pixabay.com/photo/2021/12/18/06/01/sunset-6878021__480.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
ul li:nth-child(2) p:before {
       content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(https://cdn.pixabay.com/photo/2022/01/19/00/36/sea-6948569__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center; 
}}

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. 

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

Okay, let me know if you have any other questions

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. 

On 2/11/2022 at 5:03 AM, KaijuCorgi said:

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. 

Try this

div#block-yui_3_17_2_1_1644533735348_59810>div {
    padding-left: 2em;
    padding-bottom: 2.5em;
}

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. 

On 3/1/2022 at 7:44 AM, KaijuCorgi said:

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. 

Which element in footer??

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. 

On 3/4/2022 at 5:18 AM, KaijuCorgi said:

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. 

If other pages are index page, just duplicate that section & add to other page.

If other page aren't index page, we will need to code whole section with HTML/CSS. I will try code & send you code soon.

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.