Jump to content

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

Recommended Posts

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

squarespace forum Q.png

squarespace forum Q2.png

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.thumb.png.d276bbfe031ace1435ec0143c1e35c34.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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. 

image.png.49c0113887a0b6e3b4d251462e3ad9bb.pngimage.thumb.png.1e32c05ce19407250baa577e0b315079.png

Link to comment
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. 

image.png.4690a553eee39dd00e5a511adc8e71a1.png

Try this

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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

image.thumb.png.b26b63bb37e09a74a5e958170dc61d2c.png

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. 

Link to comment
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):

image.thumb.png.b26b63bb37e09a74a5e958170dc61d2c.png

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??

image.thumb.png.c5f0c7430084461dc24994aed416b23a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.