aurevoir_blu Posted March 1, 2021 Share Posted March 1, 2021 (edited) 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! Edited March 2, 2021 by aurevoir_blu Link to comment
ghostplugins Posted March 3, 2021 Share Posted March 3, 2021 (edited) 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 March 3, 2021 by ghostplugins aurevoir_blu and tuanphan 2 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! ghostplugins 1 Link to comment
aurevoir_blu Posted March 3, 2021 Author Share Posted March 3, 2021 (edited) 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? Edited March 3, 2021 by aurevoir_blu ghostplugins 1 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; } tuanphan and aurevoir_blu 1 1 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. ghostplugins 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment