Squarespace Tips #4 - Easy Customisations & System Hacks

 

ESC key login


Squarespace has loads of little shortcuts to help you use the platform efficiently. One such shortcut is the ability to access your log in page by hitting the ESC key - making things super quick and easy!

If you haven't got this enabled, follow these steps:


Settings > Advanced > Escape Key > 'Enable Login with Escape Key'

 

 

Search and navigate Squarespace dashboard


Here's a neat little shortcut!

You can bring up a settings search bar when logged in to Squarespace to save you navigation through the menu layers!

Simply press the "/" key on your keyboard when logged in to Squarespace!

 

 

Add a search icon to your navigation

If you’re not using a template that offers a search icon in the navigation (i.e. not in the ‘Brine’ family) you may want to add one! You can link directly your automated search page (www.yoursite.com/search) in your navigation either under a 'Search' text link or by adding a magnifying glass icon by following these easy steps:

Step 1: Insert code

Add the following code in to the site header Code Injection area by heading to: Settings > Advanced > Code Injection > Header.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Step 2: Add link or icon

Add a link to the navigation (or anywhere on your site) where you wish to have the icon - set the target as www.yoursite.com/search and name it the following:

<i class=" fa fa-search"></i>
 

 

Hide PreFooter

Some Squarespace templates such as Bedford and Hayden have a site-wide 'PreFooter' above the usual Footer section. If you're style editor doesn't allow this to be hidden - use this code!

The following code snippets need to be inserted into your main CSS Editor window.

// HIDE PREFOOTER //
#preFooter {
display: none !important;
}
 

 

Map Block - disable zoom

Have you noticed how sometimes the map block zooms in & out when you scroll over it? Frustrating right! This code snippet will disable this and make sure your map blocks remain static.

The following code snippets need to be inserted into your main CSS Editor window. If you need help adding CSS to your Squarespace site please read our guide here.

// MAP BLOCK CURSOR //
.sqs-block-map {
pointer-events: none;
}
 

 

Popup Text Box

If you have some important text you want people to see or if you are looking to tell people something after they click a button then this code will be perfect for you. A unique way of displaying text at the click of a button

The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.

Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)

The CSS:

// POPUP TEXT BOX CSS //
#popupButton{
  padding: 10px;
}

#popupButton span{
background-col
or: transparent;
  color: black;
  border: solid 2px black;
  padding: 10px 30px;  margin: auto;
  display: block;
  max-width: 70px;
  text-align: center;
  cursor: pointer;
}

#popupButton span:hover{
  background-color: black;
  color: white;
}

#popupBox{
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  position: fixed;
  background-color: white;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  cursor: pointer;
}

.popupBoxShow{
  opacity: 1 !important;
  pointer-events: auto !important;
}

#popupBox .sqs-block-html{
  width: 80vw !important;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Adding the Code Block

On the page you want the popup text box to be on, create a Text Block, this will be the popup text box, put the content you want in here.

Add a code block directly above the text block you just made and paste in the code from the Code section below.

To edit the popup button text look for the <div id="popupButton"><span>Click Me</span></div> line and change Click Me to the text you want, click Apply.

Click Save and Refresh the page. Your popup text box will now be working.

Code Block Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('#popupButton').parent().parent().next().appendTo('#popupBox');
  $('#popupButton span').click(function(){
    $('#popupBox').addClass('popupBoxShow')
  });
  $('#popupBox').click(function(){
    if($('#popupBox').hasClass('popupBoxShow')){
      $('#popupBox').removeClass('popupBoxShow')
    }
  });
})
</script>
<div id='popupBox'></div>
<div id="popupButton"><span>Click Me</span></div>
 

 

Hide Announcement Bar Close

The Announcement Bar feature is awesome for getting extra traction and engagement for your latest promotion, sale or blog post. However, you may wish to have it displayed permanently and remove the ability for users to hide it. This CSS snippet will remove the 'X' from your announcement bar, preventing users from hiding it.

Step 1: Add the CSS

Copy and paste the code below to the Custom CSS editor on your Squarespace site. If you need help adding CSS to your Squarespace site please read our guide here.

.sqs-announcement-bar-close {
  display: none !important;
}
 

 

Create a ‘Loading Screen’

Adding a loading screen to your site can add lots of benefits. Firstly it can cover up any loading issues due to slow internet speeds. Secondly, it makes the user experience on your site smoother with a more premium feel. We even use it on our homepage! Follow the steps below to add the loading screen to your site.

Step 1: Add the CSS

Copy and paste the code below into the Custom CSS editor on your Squarespace site. If you need help adding CSS to your Squarespace site please read our guide here.

@keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
  }
}

body:after{
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  z-index: 999999999999;
  background-color: #ffffff;
  background-image: url(https://static1.squarespace.com/static/59ba73d08419c2e58efe4437/t/59ea6dec18b27d7eca592625/1508535788604/info.png);
  background-position: center;
  background-size: 50px;
  background-repeat: no-repeat;
  animation: 1s ease-out 2s 1 fadeOut;
  animation-fill-mode: forwards; 
  pointer-events: none;
}

Step 2: Edit the CSS

You can edit the loading screen to contain a loading gif or your logo. Simply remove the background-image URL from the example code and replace it with the URL to the image or gif that you want to use.

You can also change the background colour of the loading screen by changing the #ffffff value to a colour of your choice. colormind.io is a great site to help get the colour codes you want.

Thumbnail photo credit - Squarespace.

 
 
TipsAdam Matheson