Viewing entries tagged
Squarespace code

20 Comments

5 (More) Easy Codes to Customize Your Squarespace Site Like a Pro

Bold & Pop : 5 (More) Easy Codes to Customize Your Squarespace Site Like a Pro.jpg

So we've shared why we're obsessed with Squarespace, how to choose a template, and 5 seriously easy codes to customize those templates beyond what the styled editor allows you to do. Well we're not stopping there! Here are 5 more easy codes to go a step further in your customization! 

Add a Solid, Gradient, Linear, or Diagonal Background to an Index Page

This is such a fun way to add some color to your website and help separate your index pages without using an image as the background. You can do this in a few different ways: 

Before using any of these codes below, make sure you replace the URL-slug in the codes below with the URL slug of the page you want the color/pattern added to. Then you'll also want to replace COLOR with the color you'd like. 

For a solid background color, add this code to the custom CSS section of your site:

#URL-slug {background-color: #COLOR;}

 

For a gradient background, add this code to the custom CSS section of your site:

#URL-slug {background: linear-gradient(180deg, #COLOR 5%, #COLOR 90%);}

 

For a linear background, add this code to the custom CSS section of your site (change the deg number from 90 to 180 to go from vertical to horizontal):

#URL-slug{background: linear-gradient(90deg, #COLOR 50%, #COLOR 50%, );}

 

For a diagonal background, add this code to the custom CSS section of your site (change the direction to go from top right to top left)

#URL-slug {
  background: linear-gradient (to top right, #COLOR 50%, #COLOR 50%) !important;
}

 

Pop-Up Text from a Button

For text heavy sections of your website or for team member bios, a pop-up could be a really great option! When visitors click the button, a lightbox will open with the text you'd like to display. 

First you'll want to add this code to the code injection on the page you want the pop-up on. 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

 

Next, you'll want to add a code block to the page and paste the code below. This is what will display in the lightbox so you'll want to insert your text and change the ID (in bold). 

<div style="display:none;">

<div id="YourID">

<p>

Insert text here

</p>

</div>

</div>

Finally, add another code block where you'd like the button to be and paste this code. Make sure the ID matches what you added in for the lightbox above. Then edit the text that will display on the button. This code is for the medium sized button but if you want it for a small button or large, just change the "medium" in the code to "small" or "large". 

<div class="sqs-block button-block sqs-block-button">

<a href="#" data-featherlight="#YourID" class="sqs-block-button-element--medium sqs-block-button-element">Text for Button</a>

</div>

 

Hey, you! Pretty cool, huh?

Note: The pop-up will not work while you are in edit mode. Open an incognito window to give it a try! 

 

Change Button Color on Hover

Instead of just having your button color slightly fade like Squarespace's default setting, you can actually make it turn a completely different color. This helps add a fun interactive element to your website.

To add this, first set the color you'd like the button to be before someone hovers in the style editor. Then use the following code in the custom CSS section and change COLOR to be the color you'd like the button to be on hover: 

.sqs-block-button-element--medium:hover {background-color: #COLOR;}

 

Again, this code is for the medium sized button but if you want it for a small button or large, just change the "medium" in the code to "small" or "large". 

 

Create Custom Bullet Points

Sometimes the standard bullet points just don't do the trick and you're wishing you had the option for checkmarks or something else. Well you can actually create custom bullets using CSS! 

Example:

Bold & Pop: 5 (More) Easy Codes To Customize Your Squarespace Site Like A Pro

First you will need to upload the file of the icon or image you'd like to use to the Custom CSS section of your site. To find this, go to Design > Custom CSS. Then scroll to the bottom and click MANAGE CUSTOM FILES and then click ADD IMAGES OR FONTS. You’ll upload the file there.

Then add the code below replacing URL HERE with the URL you just added to the custom files (click on the file and it will automatically add the URL into the custom CSS). You'll just want to copy and paste it into this code in the correct spot. 


ul li:before{ 
content: ' '; 
display: inline-block; 
background-image: url(https://URL HERE); 
background-repeat: no-repeat; 
background-size: 18px; 
background-position: center; 
width: 18px; height: 18px; 
position: absolute; 
margin-left: -25px; 
margin-right: 0px; 
margin-top: 8px; 
margin-bottom: 0px; 
}

If the above code shows your new bullet points but still has the old bullet points as well, add this piece of code to our custom CSS as well!

ul[data-rte-list] li>*:first-child::before { content: ""; }

 

Make Images Circular on a Summary Block

You know you can have the thumbnails on the summary block be different sizes but what about making them circular? If a circular image works better than a square or rectangle on your site, use the code below to get the summary block thumbnails to automatically load as circles. (Make sure your thumbnails are square or this code won't make them complete circles!) 

.summary-thumbnail img{  
 border-radius: 50% !important;
  padding: 5px;
 }

Bold & Pop: 5 (More) Easy Codes To Customize Your Squarespace Site Like A Pro

And there you have it! Five more easy ways to customize your Squarespace website using code to make it feel more unique and on target with your brand!

Need a few other ideas on how to customize your Squarespace site without using code? We have you covered with those ideas too!

P.S. Exciting news! We launched a free #GoingBold Facebook Group and would love for you to join us! Come on over!

20 Comments

10 Comments

5 Easy Codes to Customize Your Squarespace Site Like a Pro

Bold & Pop : 5 Easy Codes to Customize Your Squarespace Site Like a Pro

By this time you probably know how obsessed we are with Squarespace. Its ease of use and versatility no matter what type of business you have is a huge win-win! One of the best parts of Squarespace is their templates. All their templates are modern and professional so even if you’re just starting out with your biz, it won’t look like it! Yay! (Need help picking a template? We’ve got you covered!) While it’s really easy to customize each template using the style editor and various blocks and features, we’ve rounded up some of our favorite and most popular pieces of coding to help give you a seriously custom look!

Custom Fonts

This is by far the most common code we add to sites especially for brands that use very specific fonts. This way you can keep your branding consistent throughout your website and other marketing materials.

You will need to first upload the font file in the Custom CSS section of your site. To find this, go to Design > Custom CSS. Then scroll to the bottom and click MANAGE CUSTOM FILES and then click ADD IMAGES OR FONTS. You’ll upload the font files there.

Use the code below and replace “Font-Name” with the name of your font and change the url to be the url of the font file you just added (if you click on the file after it loads, the link will show up in the Custom CSS field and you can copy and paste into the code).

The code should look something like this:

 

@font-face {

    font-family: Font-Name;

    src: url      (https://URL HERE);}

 

To use the font for the following text, you’ll need to add this additional code (Use the font name you used for the font-family above where it says Font-Name):

Headers:

h1, h2, h3 {

    font-family: Font-Name !important;

    }

Body/Paragraphs:

body, p {

    font-family: Font-Name !important;

    }

Bold Banner Text:

desc-wrapper, strong {

    font-family: Font-Name !important;

    }

If this code isn't working for you, here's the tutorial we used

Change Color/Thickness of Line Block

On some templates in Squarespace you are able to change the Line Block color through the Style Editor but on others, your only option is the default color for that template (usually grey or black). If you can’t adjust the color of your Line Block in the Style Editor, you can use this code to adjust both the color of your Line Block as well as the height/thickness. You'll want to replace #COLOR with whatever color you'd like and adjust the height accordingly as well. 

 

.sqs-block-horizontalrule hr { 
  background-color: #COLOR; height: 5px !important; }

 

If you just want to adjust the color, simply add this code without “height: 5px !important;” and vice versa for if you just want to adjust the height.

Change Social Media Icon Colors

Just like with your Line Block, on some templates you can adjust the color of your social icons in the Style Editor. However, if you can’t adjust, use the following code for the knockout style social media icons. Again, replace #COLOR with whatever color you desire! 

 

.social-icons-style-knockout.social-icons-color-black .sqs-use--mask {

    fill: #COLOR !important; }

 

They’ll look at little something like this

Collapsable FAQ

Love those FAQ sections where it just displays the questions and you have to click the question for the answer to open? Like this! We’re sharing how you can do just that with your Squarespace site!

First, you need to add the below code in the site-wide Code Injection. To find this, go to Settings > Advanced > Code Injection Header:

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 

Then, you need to add the jQuery script below to the page specific Code Injection. To find this, click the “gear” icon next to the page you want to add the FAQ to and then go to Advanced tab and voila, the Page Code Injection:

 

<script>

    $(document).ready(function(){

    $('.markdown-block .sqs-block-content h2').css('cursor','pointer');

    $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();

    $(".markdown-block .sqs-block-content h2").click(function()     {$(this).nextUntil("h2").slideToggle();});

    });

</script>

 

Then you will need to add a Markdown Block on the page with the following structure:

## **+ QUESTION 1**

REPLY 1

## **+ QUESTION 2**

REPLY 2

## **+ QUESTION 3**

REPLY 3

Change Type Font and Color On Just a Few Words

Sometimes you just want one or two words in a sentence to be a different color or font which isn’t necessarily possible using the headers since it will change the whole sentence. So instead of using a text block, you’re going to use a Markdown Block and your sentence will look a little something like this:

 

Roses are <span style="color:red; font-family:Georgia; font-size:2em;">red.</span>

 

The text in between the <span> </span> (so in this case “red”) is what will be changed while the rest will remain the same as what you have in the Style Editor.

If you just want to adjust only the color, simply add this code without “font-family:Georgia; font-size:2em;” and vice versa for if you just want to adjust any of the other elements alone.

And there you have it! Five easy ways to customize your Squarespace website using code to make it feel more unique and on target with your brand!

Need a few other ideas on how to customize your Squarespace site without using code? We have your covered with those ideas too!

P.S. Exciting news! We launched a free #GoingBold Facebook Group and would love for you to join us! Come on over!

10 Comments