Category Archives: Blog

/// Adding borders and boxed text in Squarespace

Another day, another Squarespace hack! This hack helps you add a cool border to your text to create a boxed text. This is great for when you want to call attention to certain text. Perfect for sales pages or even for testimonials or quotes!

Read on for the full tutorial.

BORDERS, TEXT BOXES & CUSTOM OUTLINES IN SQUARESPACE-01-01
HERE ARE THE STEPS:

 

  • In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  • Copy and paste the following code:

 .fancyborder {
border: 4px solid #EEE1E1;
padding: 10px;
}

The pink highlighted text is where you can change your colors and width of the border. Do not edit the grey text. (You can also add this code to an individual page if you only want to see the effects on one page of your Squarespace site).

  • Then on the page you’re adding the boxed text to, insert a MARKDOWN block.
  • Add this code:

<div class=”fancyBorder”>

All of your awesome text can go here! You can write as much or as little as you want! It’s totally up to you, but no matter what you write, it will look super cool with your custom border! Boom.

</div>

MARKDOWN Border boxed text squarespace

 

 

 

 

 

 

 

 

  • Replace the pink text with your own. Click SAVE.

 

And that’s it!! Easy peasy. 

 

PS – If you want to get really fancy with your borders, check out the #squarespacehack shop to add dotted borders, inset borders, rounded borders and more!!

 

/// Custom Block Quotes for Squarespace Testimonials

What’s that? You want more #squarespacehacks? Ya?

Well you are in luck my frand. I’ve got a really cool one today that I’m pumped to share: Custom Block Quotes! This is so perfect for featured testimonials or important tidbits you want to call attention to on a sales page. So let’s fancy up those boring old Squarespace quotes, shall we?

customize-quote-block-testimonial-squarespace-05

 

HERE ARE THE STEPS:

  • In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  • Copy and paste the following code:

 

.newblockquote {
background: #fff;
border-top: 5px solid #F2CBCB;
border-bottom: 5px solid #F2CBCB;
margin: 1.5em 0px;
padding: 0.5em 10px;
quotes: “\201C””\201D””\2018″”\2019”;
color: #F2CBCB;
font-size: 25px;
padding-top: 35px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 35px;
}

.newblockquote:before {
color: #F2CBCB;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.1em;
vertical-align: -0.4em;
font-family: Volkhov, Georgia, Serif;
}

.newblockquote:after {
display: none !important;
color: #F2CBCB;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.1em;
vertical-align: -0.6em;
font-family:Volkhov, Georgia, Serif;
}

.newblockquote p {
display: inline;
}

The pink highlighted text is where you can change your colors. Do not edit the grey text. (You can also add this code to an individual page if you only want to see the effects on one page of your Squarespace site).

 

  • On the Squarespace page you’d like to add a quote block to, insert a CODE content block.
  • Paste the following code, replace the text with your own and then click save:

<p class=”newblockquote”> This is an awesome quote from a previous client who just adores you and your work. They have nothing but glowing reviews and kind words to share with you, and so, being the savvy biz owner that you are, you share it on your website for future clients to see! How nice.
</p>

The pink highlighted text is where you can change your text and add your quote. Do not edit the grey text.

And that’s it!! Easy peasy. 

 

 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03

 

 

 

 

 

/// How to customize your “read more” link on squarespace

I’ve got another little snippet of code for all you Squarespace lovers today! This one is for that boring old “Read More” link that appears on a Summary Block. Especially if you are using Squarespace’s Summary Block to showcase your blog posts, the “Read More” link is often a good spot to get your audience to engaged (ie: so that they read more!) with your featured posts.

So how do you take it from boring black text to something that matches your brand? I’ve gotcher back.

 

 

How to customize your read more blog link on squarespace blog

 

There are a few little code changes you can make to jazz up the plain “Read More” to match your branding colors. Here are the steps:

  1. In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  2. Copy and paste the following code:

<style>

/*** READ MORE LINK – TEXT ***/

.entry-more-link a:not(.sqs-block-button-element) {

color: #E9AEC4 !important;

}

.entry-more-link a:not(.sqs-block-button-element):hover {

color: #444444 !important;

}

</style>

 

The pink highlighted text is where you can change your colors. Do not edit the grey text. (You can also add this code to an individual page if you don’t want it to affect all “Read More” links on your site).

IMPORTANT ! !

Each template has a different method to define their “Read More” links. Please select the method for your template below, and then replace the red CSS code (.entry-more-link) with your template’s method. (If you’re template isn’t listed below, please try the links below, – many work for more than one template. If none of these work, feel free to email me with your specific template at hello@junemango.com).

Adirondack: .link

Five: .inline-read-more

Fulton: .summary-read-more-link

Horizon: .summary-read-more-link

Peak: .read-more

Mohave: .summary-read-more-link

Marquee: .entry-more-link

And that’s it!! Easy peasy. 

 

If you’d like to do even more customization, I have a full #squarespacehack in the June Mango shop that allows you to add a background color (to make it more like a button), add a border, and make it wider. PLUS! You can use the code GRAM to get 50% off. 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03

 

 

 

 

 

Popular Posts