How do I create coloured boxes and icons?

Site URL: https://emu-maracas-4rxy.squarespace.com/

Hi

Here's an example of what I'm trying to create:

https://hidray2-ghost.squarespace.com/?password=ghost

The blue boxes of text with icons and colored background. I'm able to change the background color with this code:

#block-5f063dd8e30efe54dc47 {
background: #809DB3;
padding: 50px;
text-align: center;
color: #FFFFFF;
}

But there's no spacing in between the blocks. What's the fix for this? Can someone help me with this?

Thanks in advance!

Hey @aurevoir_blu! These boxes in Hidray are markdown blocks with some additional code in both the block itself and CSS. We'd be happy to share how we did it! 👍

Step 1: Add a markdown block and paste in the code below. Replace the ICON-URL-HERE with the URL of your own icon. We recommend hosting the file in CSS > Manage Files. This will generate a direct URL you can copy/paste in. Then add in your title text (it's set to h3, but you can change to h1 or h2) and then your body text below.

<center>
<img src="ICON-URL-HERE.png" style="width: 60px">

<h3>Title Text Here.</h3>

Description text here.</center>

Step 2: Add the following code in CSS. You can adjust the background, margin, padding, and color values to your liking. There is additional code that targets font color and turns a link inside the markdown block into a button. You can adjust the padding, margin top, background color, font size, and color values to your liking in these targets as well.

// Markdown Block Style //

.sqs-block-markdown .sqs-block-content {
  background: #0554ff;
  color: #FFFFFF !important;
  margin: 10px;
  padding: 20px 25px !important;
}

// Markdown Block Font Color //

.sqs-block-markdown .sqs-block-content h1, .sqs-block-markdown .sqs-block-content h2, .sqs-block-markdown .sqs-block-content h3 {
  color: #FFFFFF !important;
}

// Markdown Block Button Style //

.sqs-block-markdown .sqs-block-content a {
    display: inline-block;
    padding: 10px 40px !important;
    margin-top: 10px !important;
    background-color: #000000;
    font-size: 16px;
    text-transform: none;
    color: #FFFFFF !important;
}

.sqs-block-markdown .sqs-block-content:hover a {
    background-color: #000000;
    color: #FFFFFF;
}

Hopefully, this guides you in the right direction! 😃 👻

You are a lifesaver!! Wow, thank you so much 🤩

I'm gonna try it out now and report back. You rock!

This worked perfectly! Many, many thanks @ghostplugins

Just one small thing: I have 5 boxes in a row. When I align 4 it's evenly spaced, but adding the 5th breaks it. Is there a way to add one more? or does it need to be a certain amount?

@aurevoir_blu This has to do with your website's width setting and Squarespace's block/column layout.  You could try adding a max-width option to the markdown css, along with adjusting website width.

Something like this might help so you can adjust the width specifically.

.sqs-block-markdown {
  max-width: 400px;
}

Awesome! Really appreciate your help and attention on this.