aurevoir_blu Posted March 1, 2021 Share Posted March 1, 2021 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! Link to comment
ghostplugins Posted March 3, 2021 Share Posted March 3, 2021 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 Marketplace: The very first product-based marketplace for Squarespace💙 Circle Story: Thank you, Squarespace! Link to comment
aurevoir_blu Posted March 3, 2021 Author Share Posted March 3, 2021 You are a lifesaver!! Wow, thank you so much 🤩 I'm gonna try it out now and report back. You rock! Link to comment
aurevoir_blu Posted March 3, 2021 Author Share Posted March 3, 2021 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? Link to comment
ghostplugins Posted March 3, 2021 Share Posted March 3, 2021 @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 Marketplace: The very first product-based marketplace for Squarespace💙 Circle Story: Thank you, Squarespace! Link to comment
aurevoir_blu Posted March 3, 2021 Author Share Posted March 3, 2021 Awesome! Really appreciate your help and attention on this. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.