Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I create coloured boxes and icons?


Question

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

Edited by aurevoir_blu
Link to comment

5 answers to this question

Recommended Posts

  • 0

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

Edited by ghostplugins

– Cody and Team, The Ghost Co.

👻 Ghost Plugins: 350+ free plugins and installed-for-you templates resource
🎉 Ghost Marketplace (Coming Soon): First-ever Squarespace product related marketplace

📰 Read my Circle Member Community Story (thank you, Squarespace!)

Link to comment
  • 0

@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: 350+ free plugins and installed-for-you templates resource
🎉 Ghost Marketplace (Coming Soon): First-ever Squarespace product related marketplace

📰 Read my Circle Member Community Story (thank you, Squarespace!)

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