Jump to content

How do I create coloured boxes and icons?

Recommended Posts

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!

 

Screenshot (2).jpg

Link to comment
  • aurevoir_blu changed the title to How do I create coloured boxes and icons?
  • Replies 5
  • Created
  • Last Reply

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! 😃 👻

Cody and Team, The Ghost Co.

👻 Ghost Plugins: 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace
💙 
Circle Story: Thank you, Squarespace!

Link to comment

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

 

Cody and Team, The Ghost Co.

👻 Ghost Plugins: 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace
💙 
Circle Story: Thank you, Squarespace!

Link to comment

Archived

This topic is now archived and is closed to further replies.

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