Creating collapsible FAQ in Squarespace 7

While looking at an FAQ page, it is rare that a user wants to read every single question and answer listed.  One strategy companies often use is creating an FAQ page with collapsible questions.  On this page, when a user clicks on a question, the answer expands underneath, allowing the user to focus on only that answer.  By default, you can't create this feature in Squarespace and it is difficult to smoothly implement this feature.

Until now!

This tutorial will teach you how to implement expanding FAQ on your own site.  Below is a sample of how it would look on part our own Jeopardy Rocks FAQ:

How many teams can play in a game?

A maximum of four teams can play in a game.

How do I share my game?

With a custom url (e.x. jeopardy.rocks/chemlab23), you can share your URL with anyone in the world. Don't worry, they won't be able to edit without signing in! People can also play the game on different computers at the same time.

Are there pre-existing games I can use?

Not yet! However, we are looking into creating a library of high quality games available to everyone. If you have a game you created that you think is awesome, please send the link to team@munocreative.com.

How does scoring work?

When a team gets an answer incorrect, simply press the જ under the corresponding mascot. The points will be deducted, and the other teams will have the chance to answer. When a team gets a question correct, simply press the ચ under the corresponding team mascot. The game will automatically award the points and then display the correct answer. The game will not proceed unless all the teams get the answer wrong, or one team gets the answer correct.

The first step, as with many of our other guides, is to add jQuery to your site.  To accomplish this, the first thing you want to do is head to Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Next, you will want to create a code block.  This is where you will put your actual questions and answers.  Inside the code block, insert the following:


<div class="expandingFaq"> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> </div>

Edit the text between <div> tags that have class="faqQuestion" to edit questions and <div> tags that have class="faqAnswer" to edit answers.  To add more questions, just copy and paste the entire <div> tag with class="faqElement".

Now that you have your questions and answers ready, it is now time to add styling.  To do so, simply head to Design → Custom CSS and paste in the following code:


.faqElement { padding: 2em 0; border-bottom: 1px solid #EDEEEE; position: relative; } .faqElement:after { font-family: 'squarespace-ui-font'; -webkit-font-smoothing: antialiased; content: "\e02d"; position: absolute; top: 2em; right: 1em; font-size: 1em; font-weight: bold; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); cursor: pointer; } .flipButton:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .faqQuestion { cursor: pointer; margin: 0; padding-right: 2em; } .faqAnswer { margin: 0; max-height: 0; overflow-y: hidden; -webkit-transition: all .25s; -moz-transition: all .25s; transition: all .25s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; padding-right: 2em; } .activeFaqAnswer { margin-top: 1.5em; }

The FAQ should start to look just right now.  The only problem is that now when you click on a question, nothing moves.  The final step to make this happen is to add functionality to your FAQ.  In the Squarespace menu, click on the Settings wrench that you are on, and paste the following into Page Header Code Injection under the Advanced tab (Important: if you are in an index, make sure you add code to the entire index itself, and not to the individual page!):


<script type="text/javascript"> $(document).ready(function() { $('.faqElement').click(function() { var faqElement = $(this); var question = faqElement.find('.faqQuestion'); var answer = faqElement.find('.faqAnswer'); if (!answer.hasClass('activeFaqAnswer')) { $('.faqElement').removeClass('flipButton'); faqElement.addClass('flipButton'); $('.activeFaqAnswer').css('max-height', ''); $('.faqAnswer').removeClass('activeFaqAnswer'); answer.css('max-height', 'none'); answer.css('max-height', answer.height()); answer.addClass('activeFaqAnswer'); } }); }); </script>

And there you have it!  Your expanding FAQ is complete!  Feel free to play with the CSS to add your own colors or stylings to the questions.  As always, we'd love to hear from you in the comments with anything that is on your mind.

Uploading Images or Other Files and Getting URLs in Squarespace 7

A lot of the tutorials on this website require some sort of uploading.  Whether it is uploading a video for a video background or uploading an image for a newsletter block, uploading a file is a critical step to getting your application right!  This post will cover how to upload a file onto Squarespace.

The first step is to head over to any individual page and create a text block.  In the text block, write "link", highlight it, then click the create link button.  In that menu, click on Files → Add a File and select your image, video, or other file.  It may take a few minutes to upload if you have a large file.  

Once the file is uploaded, it's time to get your URL! Select your file from the Existing tab, and then click on the text that you entered. A white box will appear above your "link" text, containing your file's URL. Right click to copy the link.  If this sounds confusing, just follow the videos below (click to enlarge):

Once you have the link, which should look something like https://www.yourwebsite.squarespace.com/s/filename.something, put that somewhere safe -- you will need it soon.  And you can go ahead and delete the "link" text block; it's served its purpose!

The last step is to edit the link so that it loads perfectly on both your internal site and the site you share with the world.  The beginning of the link starts with https.  Remove the s from the end to make it into http.  If you try to continue this tutorial without doing so, your website will not be able to show the videos unless it has an SSL certificate (which it probably doesn't).  The final link should look like //www.yourwebsite.squarespace.com/s/filename.something.

Now that you have this knowledge, head back to our other tutorials, and let's do it!

Creating Inline "Tweet This" Quotes in Squarespace 7

If you want to expand your reach beyond your current audience, social media is a must.  Having your users spread your content on Twitter exposes it to a completely new set of people on every share.  

But how do you get your users to tweet?  

@@The simplest way to get users to share your content on Twitter is to give them the ability to do so. @@

See what we did there?  Tweeting an inline quote is one of the best ways to give people different options of what to share with their friends from your article.  It takes the busy work out of tweeting without constricting everyone to the same tweet. 

To accomplish this, the first thing you want to do is head to Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Next, head to the Blog (or regular page) that you want this to work on.  Click the Settings gear and then head to the Advanced tab.  Copy and paste the code below into your Page Header Code Injection. Important: Next to the username variable, where it says YOURHANDLEHERE, enter your twitter handle without the @ sign.

WE REPEAT:
enter

your twitter handle

without the @ sign!!

!!

Carry on.


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script> <script> $(function() { var replaced = $("body").html().replace(/\@@(.*?)\@@/g, function(found) { var tweet = found.substr(0, found.length - 2).substr(2); var username = 'YOURHANDLEHERE'; return '<a class="tweetLink" target="_blank" href="https://twitter.com/intent/tweet?text=' + tweet + '&url=' + window.location.href + '&via=' + username + '"><span class="tweetLine">' + tweet + '</span><i class="fa fa-twitter-square tweetSquare"></i></a>'; }); $('.tweetLine').css('color', $('p').css('color')); $("body").html(replaced); }); </script>

Next, we need to add some custom CSS to that our tweets look nice!  From the main menu, head to Design Custom CSS and enter the following code:


.tweetLink { cursor: pointer; .tweetLine { border-bottom: 1px dotted rgba(64, 153, 255, 0.6); color: inherit; } .tweetLine, .tweetSquare { -moz-transition: color 0.3s; -o-transition: color 0.3s; -webkit-transition: color 0.3s; transition: color 0.3s; } .tweetSquare { font-size: 140%; vertical-align: top; margin-left: 8px; color: #D0D5D8; outline: 0; } &:hover { .tweetLine, .tweetSquare { color: #4099ff !important; } } }

The last step is to create the actual tweet in your post.  While typing, simply surround the part of your post that you want to share with two @ signs.  We can't do it here or else it will make a tweet link, but below is a picture of how it should look:

tweet ats

Tweets can only go for 140 characters, so keep that in mind when choosing what to select. Feel free to comment below and enjoy!

...Oh, and why not share?  ☞  @@Tweeting inline quotes is now possible in Squarespace!@@. 

Creating Single Line Newsletter Blocks in Squarespace 7

One of the most important aspects of building a website and/or community is to be able to communicate with your following.  Among the best ways to do so is by creating a mailing list, allowing you to send updates and news to your users at any moment.

Squarespace supports creating mailing lists with the Newsletter Block, and you can integrate them with Mailchimp or Google Docs.  However, we realized that at times, the newsletter block can be a bit obtrusive as it has a bunch of padding and a background.  

All this can be a bit much, you know?

All this can be a bit much, you know?

We wanted to create a simple, one-line newsletter block and decided to share it with you!  Check it out below. (This is also a great opportunity to sign up for OUR mailing list to get plugin updates and early VIP access, HA!) ☟

To make this, create a Newsletter Block that (important!) does not require a name field and does not have a disclaimer. (If you put those extra fields in it'll mess up the spacing). 

Then, head to Design → Custom CSS and add the following code:


.newsletter-block .newsletter-form-wrapper { padding: 0; background: none; } @media only screen and (min-width:820px) { .newsletter-block .newsletter-form { display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-align-items: center; } .newsletter-block .newsletter-form-header { flex: 2; -webkit-flex: 2; text-align: left; } .newsletter-block .newsletter-form-header-title, .newsletter-block .newsletter-form-header-description p { text-align: left; } .newsletter-block .newsletter-form-header-description p { margin: 10px 0 0; } .newsletter-block .newsletter-form-header-title { font-size: 25px; margin-bottom: 0; } .newsletter-block .newsletter-form-body { flex: 3; -webkit-flex: 3; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: flex-end; -webkit-justify-content: flex-end; } .newsletter-block .newsletter-form-fields-wrapper { flex: 2; -webkit-flex: 2; } .newsletter-block .newsletter-form-field-wrapper { width: 95%; } }

And that's all there is to it!  You have your one-liner newsletter blocks.  Feel free to customize it to your liking and share your results/questions in the comments :)

BONUS - Adding a Background Image

Thanks to the awesome comment of Hillary Rain, we are bringing you one more addition to this post: the ability to add a background image to the newsletter block.  This will give your newsletter some more character and it could look as cool as this:

The first thing you need to do is get a URL for your background image.  If you are not sure how to do this, follow our tutorial here.  Then, replace the first 4 lines of the code above with the following code and place your URL between the quotations containing YOURURLHERE:


.newsletter-block .newsletter-form-wrapper { padding: 10px 10px; background-image: url('YOURURLHERE'); }

Have a new Squarespace feature you want us to build? Get in touch!

team@munocreative.com
@TeamMuno

Using CSS on Individual Pages in Squarespace 7

In making a Squarespace site, you may run into a situation where you want to have a little bit more customization than what Squarespace offers in terms of design.  In this case, you can insert Custom CSS into your website in order to make changes.  However, the information entered in the Custom CSS box loads on every page of your website.  In most cases, this is perfect, as you may want to add a filter to all of your images, or add more padding in your menu.  However, this can backfire when you only want to change elements on one page.  For example, you may want to only change the menu on the home page in order to accommodate your video background, change the styling of the price of your product that is on a huge sale, or add a background image to your newsletter block on a blog page.

Depending on the type of page, implementing the CSS is a slightly different process.  Regardless, you have to manipulate the code in the same way.  When you insert code into the standard Custom CSS box, it is normally formatted like this:


#header { opacity: 0.1; }

To be able to put it on one page, wrap the code in <style></style> tags.  An example of doing this to the previous code is below:


<style> #header { opacity: 0.1; } </style>

Changing CSS on Primary Pages

On all types of pages, when you hover over the page, there is a Settings icon.  Click on it, and and then head to the Advanced tab.  Once there, paste the code that you created earlier into the Page Header Code Injection box like shown below:

This should be perfect in most cases.  However, you may want to be even more specific.  If you on apply this on Blog, Event, or Product pages, it will apply to all of the content within that page.  You may not want every blog to have the same background image for the Newsletter block or all of your prices to have the special Sale color.

Changing CSS on Individual Blogs and Events

Both Blogs and Events operate in the same way and follow the same Draft/Publish system.  In order to add custom code, go into the edit mode of the specific blog or event and create a Markdown block.  In the Markdown block, enter the code you create surrounded by the <style></style> tags.  The cool thing about the Markdown block is that you can continue to type as normal, allowing you to disguise that there is a block there at all, since there will be no extra spacing.  An example of adding Custom CSS to one of my favorite events is below:

Changing CSS on Individual Products

Products are a unique type of page in Squarespace.  To add custom CSS to an individual product, go to the edit menu of that product (where you change the price).  Then, click the Additional Info tab.  From there, it works just like the blogs and events.  Create a Markdown block and enter your code into it surrounded by <style></style> tags.  Here is an example below:

And now you can add custom code on any page at will.  Use your new powers responsibly!

Grid Summary Block Blog Entries with Background Images in Squarespace 7

The blog of is often the most transparent portion of a company's website.  It gives users the opportunity to learn more about the business, its employees, and what goes on behind the scenes.  Making a blog unique and striking can provide a great impression for users.  In this tutorial, we will describe how to make gridded summary blocks for blog entries that show the image thumbnail on hover.  A demo of how this could look on your site is below. It's sure to give your blog a a subtle unique touch!

 

Creating Summary Blocks

First, we need to create a grid summary block.  If you do not know how to do this, follow the Squarespace guide at this link.  Now, we need to adjust the settings so that the styles load properly.  In the Edit Summary popup, first click on the Content tab. There, choose a blog to feature in the blocks.  Under the Layout Tab, make sure to choose Grid, have the Column Width at 270, set the Gutter Width to 25, the Text Alignment to Left, and Metadata Position to Above Title.  Under Display, check all of the items under Primary Information To Display and set Primary Data to Date Posted.  The photos below have the settings we have, but feel free to alter them once you know it is working!

Adding Style to Your Blocks

Now you have the standard Squarespace summary blocks.  Let's add some flair!  We'll be adding custom CSS.  From the Home menu, click on Design → Custom CSS and paste the following code into the box:


.sqs-block-summary-v2 .summary-item { border: 1px solid #d0d5d8; border-top: 3px solid #BBBBBB; padding: 2em 2em; height: 18em; cursor: pointer; background-size: cover; } .sqs-block-summary-v2 .summary-thumbnail-container { display: none; } .sqs-block-summary-v2 .summary-item:hover { background-color: #BBBBBB; } .sqs-block-summary-v2 .summary-item:hover:before { content: ' '; width: 100%; height: 100%; background-color: #101010; position: absolute; left: 0; top: 0; opacity: 0.5; } .sqs-block-summary-v2 .summary-item:hover .summary-content, .sqs-block-summary-v2 .summary-item:hover .summary-metadata-item, .sqs-block-summary-v2 .summary-item:hover .summary-title a, .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after { color: white; opacity: 1; } .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after { border-bottom-color: white; } .sqs-block-summary-v2 .summary-content { text-align: left; height: 100%; position: relative; } .sqs-block-summary-v2 .summary-metadata-item { font-size: 11px; font-weight: 600; text-transform: uppercase; } .sqs-block-summary-v2 .summary-title { font-size: 24px; font-weight: 100; } .sqs-block-summary-v2 .summary-read-more-link:after { content: 'Read More'; font-weight: 400; color: #8a959e; font-size: 15px; border-bottom: solid 1px #8a959e; letter-spacing: 1px; padding-bottom: 2px; } .sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link { position: absolute; bottom: 0; }

Once you save this, you should have some pretty good looking boxes that when you hover change color.  However, there are two features we wanted to add for some extra spice.  First, we wanted users to be to click anywhere on the box and still go to the link.  The second feature was to have the thumbnail image appear as the background.

Adding Images and Full Block Clicks

To add images and full block clicks, we need to use some custom Javascript.  First, head to the home menu and click Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Now that we have jQuery in there, head to the settings popup of the page that you have the summary blocks on.  Then, copy and paste the following code into Page Header Code Injection under the Advanced tab.  


<script type="text/javascript"> $.fn.preload = function() { this.each(function(){ $("<img/>")[0].src = this; }); }; $(document).ready(function() { var imageArray = $('.sqs-block-summary-v2 .summary-item').map(function() { return $(this).find('.summary-thumbnail-container img').data('src'); }); $(imageArray).preload(); $('.sqs-block-summary-v2 .summary-item').hover(function() { var image = $(this).find('.summary-thumbnail-container img').data('src'); $(this).css({ 'background-image': 'url(' + image + ')' }); }, function() { $(this).css({ 'background-image': 'none' }); }); $('.sqs-block-summary-v2 .summary-item').click(function() { window.location.replace($(this).find('.summary-read-more-link').attr('href')); }); }); </script>

For images, the code loads them onto the page before the page loads.  This prevents your browser from having to download the image file right when you hover, preventing a delay. 

And there you have it!  Awesome and elegant summary blocks.  As usual, feel free to comment below and follow us on twitter at @TeamMuno for more Squarespace customization updates.

Creating rotating testimonials in Squarespace 7

One of the most effective ways to inspire consumer confidence on a website is to display testimonials.  Nine out of every ten, or 90%, of consumers admit that online reviews impact their buying decisions.  When a customer comes to your Squarespace site, you want to be sure that you include testimonials so that your users know that you are good at what you do.

  • I wouldn't be President without Muno Space
    — Barack Obama
  • Stop trying to find a way to FIT-OUT and just MUNO SPACE.
    — Lebron James
  • Thanks for the background video tutorial!!
    — Beyoncé Knowles

A popular way to display user testimonials is to have them on a slider.  This allows for the testimonials to be shown on the home page without taking up too much room.  In Squarespace 7, we are currently limited to the quote block to create testimonials.  Unfortunately, the quote block does not have a way to slide!  By following this tutorial, you will be able to make a sliding testimonial in a code block with the same aesthetics as a Squarespace quote.

The first step we want to take is to add a little bit of simple code.  First, from the Home menu your Squarespace site, click Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

The next thing we want to do is determine the page that we want to post the testimonials on.  On the page you choose, click the settings icon and then switch to the Advanced tab.  In the box entitled Page Header Code Injection, enter the following code:


  <script src="//cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".rslides").responsiveSlides({
        timeout: 5000,
        pager: true
      });
      $('.rslides_tabs li a').css('background-color', $('figcaption.source').css('color'));
      var elementHeights = $('.rslides li').map(function() {
        return $(this).height();
      }).get();
      var maxHeight = Math.max.apply(null, elementHeights);
      $('.rslides li').height(maxHeight);
    });
  </script>

You can edit the above code to customize how your slider works.  To change the time that each slide stays, increase or decrease the number next to timeout (measured in milliseconds).  To remove the dots from under the screen, switch pager from true to false.

Once that is in, we will put in the Custom CSS.  By putting the CSS, the slider will look right once we put our information in.  To do this, head to the main menu, then go to Design → Custom CSS.  In the box, paste in the following code:


.testimonialSlider { position: relative; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; &:first-child { position: relative; display: block; float: left; } } img { display: block; height: auto; float: left; width: 100%; border: 0; } } .rslides_tabs { list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; padding: 0; text-align: center; li { display: inline; padding: 0 10px; a { text-indent: -9999px; overflow: hidden; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #ccc; background: rgba(0,0,0, .2); display: inline-block; _display: block; -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); width: 6px; height: 6px; } } .rslides_here a { background-color: #222; } }

Now that the styling is in, all that is left is for you to enter your testimonials.  First, create a code block.  Using the code below, enter your testimonials in place of 'Your Text Here' and your sources in place of 'Your Source Here'.  If you want to enter more than 4 testimonials, simply follow the pattern and copy and paste the information with the <li></li> tags (including the li).  If you want to enter less, just delete the <li> sections that you are not using.  


<div class="testimonialSlider"> <ul class="rslides"> <li> <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block"> <div class="sqs-block-quote-content sqs-block-content"> <figure> <blockquote> <span>&#8220;</span> Your Text Here <span>&#8221;</span> </blockquote> <figcaption class="source">&mdash; Your source here </figcaption> </figure> </div> </div> </li> <li> <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block"> <div class="sqs-block-quote-content sqs-block-content"> <figure> <blockquote> <span>&#8220;</span> Your Text Here <span>&#8221;</span> </blockquote> <figcaption class="source">&mdash; Your source here </figcaption> </figure> </div> </div> </li> <li> <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block"> <div class="sqs-block-quote-content sqs-block-content"> <figure> <blockquote> <span>&#8220;</span> Your Text Here <span>&#8221;</span> </blockquote> <figcaption class="source">&mdash; Your source here </figcaption> </figure> </div> </div> </li> <li> <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block"> <div class="sqs-block-quote-content sqs-block-content"> <figure> <blockquote> <span>&#8220;</span> Your Text Here <span>&#8221;</span> </blockquote> <figcaption class="source">&mdash; Your source here </figcaption> </figure> </div> </div> </li> </ul> </div>

Important:  When you drag the block or edit the code in any way, the dots under will disappear because the script has to reinitialize.  Once you refresh the page, the dots will be back.

And there you have it!!  Your testimonials are done.  You can drag this block anywhere you want, and it will still work responsively.

Using anchor links with smooth scrolling in Squarespace 7

Often, you may have a page on your site with a ton of content. Whether it be a wiki type page analyzing all the characters of your favorite TV show, an API documentation for your startup, or a "jump back to the top of the page" on a long post, anchor links make navigation simpler for your users. By following this guide you will be able to create anchor links just like the ones below.

To make an anchor link, the first thing you have to do is determine where you the page to move to.  On this article, we have 3 anchors.  The first anchor is at the very top of the page, attached to the first paragraph.  The second is attached the first heading, Making Anchor Links.  The third is attached to the second heading, Adding Smooth Scrolling.

To create the link on an element, you have to write your text in a Code Block.  When creating your text, be sure that the Edit Code module has HTML as the selected type.  Then, wrap your text in the appropriate HTML tags.  There are four common ways to create HTML tags in Squarespace.

  1. For paragraphs, wrap the text in <p></p>
  2. For Heading 1, wrap the text in <h1></h1>
  3. For Heading 2, wrap the text in <h2></h2>
  4. For Heading 3, wrap the text in <h3></h3>

Unlike when creating header text in the text block, all code block text looks like paragraph texts.   When you view your blog in the full screen like your users will, the header will appear properly.  If those options are not enough for you, you can find more HTML tags at W3Schools.  

The next step is to create ids for the text.  After the first part of the HTML tag, add id="yourID".  You can replace yourID with any word without spaces.  For a paragraph tag, it could look something like this:

<p id="munoParagraph">Muno Space is a great resource for learning how to add custom elements to Squarespace Sites</p>

An overview of this whole process is below:

Now comes the easy part!  Simply create a link on any text on your page, click the External option, then type in your id preceded by a #.  For this blog, this is how I made my link:

You can also link to that anchor from a completely different page.  To do this, use the normal URL followed by the # and the ID you chose.  To link to the next section, we would use www.muno.space/code-snippets/anchor-links#smoothScrolling.

Adding Smooth Scrolling

One cool additional feature that you may want to add is smooth scrolling.  When using smooth scrolling, the page will "glide" from anchor link to anchor link on your page.  This will create a less jumpy experience.  Before beginning, from the main menu, click Settings → Advanced → Code Injection.  On the Code Injection page, paste the following code into the Header textbox (if you already have this code in the box from a different code injection, you can skip this step):


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Now to implementing Smooth Scrolling.  To do this to a blog or a page, head to the main menu of Squarespace.  From there, click Pages and then on the Settings icon for the Page or Blog icon that you want to add scrolling too.  On the Advanced tab, paste in the following code in the Page Header Code Injection Box:


    <script type="text/javascript">
      $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html,body').animate({
                scrollTop: target.offset().top
              }, 1000);
              return false;
            }
          }
        });
      });
    </script>

You can add this site wide by heading to Settings → Advanced → Code Injection and pasting the code into the Footer text box.  To make the scrolling faster or slower, just play with the 1000 number.  And finally, if you would like to read this post once again:

Jump To Top

Making responsive video backgrounds in Squarespace

Notice:  If your cover page video background is broken due to the recent Squarespace update, please see the bottom of the post for the updated code. 


One design trend that is popping up on websites throughout the internet is having video backgrounds that go behind text instead of images.  Sites like Big Cartel, airbnbBlu Homes, and even Squarespace themselves use video backgrounds to give users a better insight into how their company perceives itself.  And they look really cool!  While this feature is not built directly into Squarespace, it is possible with a bit of custom tweaking.  I will cover the two main ways you may want to incorporate a video background:

  1. as a replacement for a banner image in a theme like Bedford
  2. as a replacement for the background image on cover pages (DEMO)

Regardless of which type of background video you choose, you'll have to start with a little bit of common code.  First, from the Home menu your Squarespace site, click Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Then, you need to choose your video.  For my background video, I'll be using a free video clip of a spaceship traveling to Muno Space I found on Videvo.net.  Once you download the clip, you need to convert the video in to an .mp4.  This allows for your video to be played in the most possible browsers.  To convert the video, head over to Cloud Convert.  Drop your video on the page, and click the mp4 choice under the category video like below:

cloudconvert

Once finished, just click the button that says download and you should have your file.  The next step is uploading the file to Squarespace and getting the video URL.  Head over to any individual page and create a text block.  In the text block, write a small amount of text, highlight it, then click the create link button.  In that menu, click the menu item entitled Files.  You then want to add a new file by clicking Add a File and selecting your mp4 video.  It may take a few minutes to upload if you have a large file.  Once the file is uploaded, you should be able to get your URL by selecting the video from the Existing tab for the link.  Then, you can get the link by clicking the text that you entered, then right clicking to copy the Image URL.  If this sounds confusing, just follow the videos below (click to enlarge):

Once you have the link, which should look something like https://www.yourwebsite.squarespace.com/s/videoname.mp4, put that somewhere safe -- you will need it soon.  Important: As you can see at the beginning of the link, it starts with https.  Remove the s from the end to make it into http.  If you try to continue this tutorial without doing so, your website will not be able to show the videos unless it has an SSL certificate (which it probably doesn't).

Banner Videos

Like on the Blu Homes website, you may want to have a banner image that has a lot of content below it, but is still the focus of the user's attention when they visit.  A theme that plays well into this is Bedford, as it has a large banner image at the top.  This method works on the blog pages of Bedford as well. In addition to Bedford, it has been confirmed to work on the home pages and blogs of the following templates: Hayden, Anya, Bryant, Pacific, and Fulton (now works in all themes).  Video backgrounds should be possible in the other templates with slight variations in the code.

In the Bedford theme, you have the option of setting the image for the banner at the top of home page.  The first step is to set the image that you would like to appear on mobile phones.  Because of the high data-usage of videos, your autoplaying videos will not appear on mobile phones.  Put this picture so that your site can have a fallback when the video does not work.

Then, go to the Settings (gear) icon that appears when you hover over the Home Page.  From there, click the tab Advanced and in the textbox entitled Page Header Code Injection, paste the following code (replace the YOURURLHERE with the video URL from earlier and surround it with "quotes"):


    <script type="text/javascript">
      $(window).bind("load", function() {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        } else {
          var banner = $('#pageWrapper img').first();
          if (banner.length === 0)
            banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
          if (banner.length === 0)
            banner = $('#parallax-images img').first();
          if (banner.length === 0)
            banner = $('.has-main-image img').first();
          if (banner.length === 0)
              banner = $('#page-thumb img').first();
          var url = "YOURURLHERE";
          banner.hide();
          $('<video class="bannerVideo" autoplay="" loop="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
          adjustBanner($('.bannerVideo'), banner);
          setTimeout(function() {
            adjustBanner($('.bannerVideo'), banner);
          }, 2000);
          $(window, banner).resize(function() {
            adjustBanner($('.bannerVideo'), banner);
            setTimeout(function() {
              adjustBanner($('.bannerVideo'), banner);
            }, 200);
          });
        }
        function adjustBanner (video, banner) {
          video.css({
            height: banner.css('height'),
            width: banner.css('width'),
            top: banner.css('top'),
            left: banner.css('left'),
            position: 'relative',
            'object-fit': 'inherit'
          });
        }
      });
    </script>

What this script does is first check if the browser is mobile.  Then, once that is determined, it inserts the video right where the image was.  By mimicking the dimensions of the image at different resolutions, the video is completely responsive.

Cover Pages

The process for cover pages is similar to the Home Page headers, but requires slightly different code.  This code will work on any cover page other than the two that are location based.  Try it out with the different cover pages and you will be pleased with you see.  It works on the full screen landing pages, the half and halfs, and even in the circle on the Focus template.

To get started, create a cover page!  On the editing menu of the cover page, click the Settings (gear) icon.  From there, click on the Advanced tab and paste the following into the textbox entitled Page Header Code Injection, paste the following code (once again, replace the YOURURLHERE with the video URL from earlier and surround it with "quotes"):


    <script type="text/javascript">
      $(window).bind("load", function() {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        } else {
          var banner = $('.sqs-slice-gallery-item > img');
          banner.hide();
          var url = "YOURURLHERE";
          $('<video class="bannerVideo" autoplay loop><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
          adjustBanner($('.bannerVideo'), banner);
          $(window, banner).resize(function() {
            adjustBanner($('.bannerVideo'), banner);
            setTimeout(function() {
              adjustBanner($('.bannerVideo'), banner);
            }, 200);
          });
        }
        function adjustBanner (video, banner) {
          video.css({
            height: '100vh',
            width: '100vw',
            top: banner.css('top'),
            left: banner.css('left'),
            position: 'relative',
            'object-fit': 'inherit'
          });
        }
      });
    </script>

Your final result should end up looking something like this (you can even have sound in your video!!).  Quick tip: If your video is laggy and you feel it is loading too slowly, you can compress it with a program like HandBrake. And with that, you can now put video backgrounds on your home pages, blogs, and cover pages.  These are two options that could give your Squarespace site the twinkle it needs.  Feel free to share your implementations on your website in the comments!

Edit: Fixed the code snippet for home pages, I had some sort of copy and paste error.  Thanks Alex for finding the issue!

Edit 2: 5/11/15 - Code updated to work on all templates with image banners!

Edit 3: 12/4/15 - Cover page code updated to reflect new Squarespace changes.

Adding custom fonts in Squarespace 7

Unlike many other website creation tools out there, Squarespace is built with design in mind.  That being the case, you may want to add some extra flavor to your site by adding custom fonts.  If you want to use free Google Fonts or use fonts from your paid Adobe Typekit membership, those features are built straight into the platform.  However, if you want to add fonts that you purchased on an external site like MyFonts or got for free, there is a little bit more legwork necessary.  For this tutorial, I'll be using a font I found on Font Squirrel, a website dedicated to free fonts!
 

Downloading the font

The first and most important step is to download the font in the correct fashion.  You want to make sure that you download a Webfont.  Desktop fonts, eBook fonts, and app fonts often can not legally be used on your website.  I've decided to go with the font 3Dumb to add some character to my website.  Download the Webfont in as many different formats as possible in order to maximize compatibility with as many browsers as possible.

downloadfont

Once you download the font, you'll usually get a zip file with the font (in this case, they've also included the 2dumb font).  In the folder, you'll see all of the font files that are included like below:

3dumbfiles

Entering Custom Code

Return to Squarespace and from the Home menu, click Design Custom CSS.  Once there, click the button Manage Custom Files.  Then click the Add Images Or Fonts button that slides up.  It should look like this:

addimagesorfonts.png

You'll have to add each font file one by one.  SVG font files do not work in Squarespace, so don't sweat it if that file does not upload successfully.  Now that you have your fonts loaded in, we have create some Custom CSS.  On that same screen, we will use @font-face, a CSS rule that allows for the inserting of fonts with your font URL.  To get your URL, click Manage Custom Files, then click the font that you want to use.  When you click it, it will the paste the url wherever you are typing in the CSS block.  

Important: When loading fonts on an https site (which sites that end in .squarespace.com always are), your font will not load unless your font file starts with https and vice versa.  When clicking on the font, the URL that is displayed will not (as of this blog) have the https.  Go through the code and remove the http.  Your code should look something like this (the code block scrolls right):


@font-face { font-family: '3Dumb'; src: url('//static1.squarespace.com/static/550dda19e4b00c1b7c102f59/t/551a024de4b02e9aae0b8b11/1427767885054/3Dumb-webfont.eot'), url('//static1.squarespace.com/static/550dda19e4b00c1b7c102f59/t/551a025ee4b00bb340926b18/1427767902381/3Dumb-webfont.ttf'), url('//static1.squarespace.com/static/550dda19e4b00c1b7c102f59/t/551a0262e4b00bb340926b21/1427767906914/3Dumb-webfont.woff'); font-weight: 400; }

Now that the @font-face is in, we can now apply it to our text.  Stay in the Custom CSS portion of the menu. For example, if you want all of your headers to be in the 3Dumb font, paste the following code in:


h1, h2, h3, h4, h5, h6 { font-family: '3Dumb'; font-weight: 400; }

Using fonts on only some text

You may want to add the font, only on one page or in one section, or maybe just one word.  That kind of flexibility is possible.  The first step is to create a Markdown Block where you want to type the text.  In the Markdown block, surround the text in a <span class="chooseAClass"></span> that you would like to use.  Your markdown block would end up looking something like this: 

markdown3dumb

Then head back over to the Custom CSS text box and enter the following code.  Make sure that the class you chose in the <span> is the same class that you put in the Custom CSS and that you use the font-family name you chose earlier.  Your Custom CSS should look similar to this (I added font-size and line-height to make it look cooler):


.dumbFont { font-family: '3Dumb'; font-weight: 400; font-size: 36px; line-height: 60px; }

About to change to 3Dumb!!
Woohoo!! We are now typing in 3Dumb!! If you have any questions or comments, please free to speak your mind below.

Removing sharing and likes from Squarespace blogs

At times, you may not want your blog posts to be shared with others or you may want to add your own sharing functionality.  Squarespace does not have a built in way of doing this on specific pages (only site-wide), so we have to add our own custom code.   To do this, the first thing you have to do is add jQuery to your site.  From the main menu, click Settings → Advanced → Code Injection.  On the Code Injection page, paste the following code into the Header textbox (if you already have this code in the box from a different code injection, you can skip this step):


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

We can choose to remove just sharing, just likes, or both at the same time.  Each of the code snippets below can be used to remove universally from all blogs, remove from a specific blog (one created through the create new page tool), or on an individual blog post.  Feel free to mix and match, hiding some info on some posts but not others.

Removing sharing from blogs


    <script type="text/javascript">
      $('.squarespace-social-buttons').remove();
    </script>

Removing likes from blogs


    <script type="text/javascript">
      $('.sqs-simple-like').remove();
    </script>

Removing both from blogs


    <script type="text/javascript">
      $('.entry-actions').remove();
    </script>

When removing the sharing, you can either remove it universally from all blogs on the website, a specific blog (one created through the create new page tool), or on a specific blog post.  

Universal Blog Removal

EDIT: To remove sharing universally, go in Squarespace to SettingsSocial Share Buttons and uncheck each service to disable them all. To disable the Like option site-wide, Go to Settings > Blogging and uncheck "simple liking enabled". Thanks Eric for the tip!

Specific Blog Removal 

To remove info on a blog, go the menu of the relevant blog through the Pages menu.  Once there, click the gear icon in order to access the settings of the blog as shown below:

Once in the Configure Blog popup, click the Advanced tab, scroll down to the section entitled Post Blog Item Code Injection and paste the code into the corresponding text box.

Individual Blog Removal

If you want to remove info on an individual blog post, go into the edit mode of your blog post.  Once there, insert a Markdown block anywhere on the page.  Paste the code into the markdown block as shown below.  Using this method will allow you to manage whether you want to remove likes, shares, or both from each blog.


Now that you have removed likes and/or shares, you can put your own or just roll with you them!  Let us know if you have any questions in the comments.

Removing the date for blog posts in Squarespace

Often, when making a Squarespace site, you may want to use the blog for something slightly different than a traditional blog.  The ability to manage and edit posts makes it convenient for all sorts of uses.  When changing the purpose of the blog, you may want to remove the date at the top.  To do this, the first thing you have to do is add jQuery to your site.  From the main menu, click Settings → Advanced → Code Injection.  On the Code Injection page, paste the following code into the Header textbox (if you already have this code in the box from a different code injection, you can skip this step):


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Removing the Date From Blogs

When removing the date, you can either remove it universally from all blogs on the website, a specific blog (one created through the create new page tool), or on a specific blog post.  It is the same line of code regardless of where you want your dates removed, but the effects of the code depend on where you put it.  Copy the following code and paste it into one of the sections described below:


    <script type="text/javascript">
      $('.entry-dateline').remove();
    </script>

Universal Blog Date Removal

To remove the date universally on all blogs, from the main menu click Settings → Advanced → Code Injection.  On the Code Injection page, paste the code into the Footer textbox

Specific Blog Date Removal 

To remove the date on a blog, go the menu of the relevant blog through the Pages menu.  Once there, click the gear icon in order to access the settings of the blog as shown below:

blog-settings

Once in the Configure Blog popup, click the Advanced tab, scroll down to the section entitled Post Blog Item Code Injection and paste the code into the corresponding text box.

Individual Blog Post Date Removal

If you want to remove the date on an individual blog post, go into the edit mode of your blog post.  Once there, insert a Markdown block anywhere on the page.  Paste the code into the markdown block as shown below.

blog-removalgif

Now you have your dateless blog!  As always, feel free to comment with questions or other cool ways to remove dates.

 

Creating custom borders around text boxes in Squarespace

While creating a website on Squarespace, you may want to have a section of text surrounded by a border.  For example, if you are creating a pricing table, you want to be able to have some space on both sides of the text as well as encapsulate each pricing tier.  In order to do this, we will make use of the Markdown block feature rather than the text block.  In the Markdown block, enter whatever text that you want to display as in the example below, but surround the text with HTML <div> tags.

markdown_border

Each class identifies a custom border style that you will make.  To make different styles, simply use different class names.  In the example above, we used the class "coolBorder" (you can call it anything you want).

Now we have complete control over this text block and its border properties.  To change the border properties, we have to add custom CSS to that particular tag, "coolBorder".  To get to custom CSS, go to the Home menu, then click Design → Custom CSS.  Here is the custom CSS we added:


.coolBorder { border: 2px solid black; padding: 50px; outline: black solid 5px; outline-offset: 5px; }

And here is the result we got:

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.

 

Here are a few more examples of the borders in action and their corresponding code.  Just copy and paste the one you like into the Custom CSS box.  Make sure to change the class accordingly!

 

Pink Dashed Border

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.


.pinkBorder { border: 2px dashed pink; padding: 50px; }

 

Watercolor Image Border

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.


.watercolorBorder { -webkit-border-image:url(http://fc07.deviantart.net/fs37/f/2008/247/3/2/Watercolor_Texture_Stock_1_by_ekoh_stock.jpg) 30 30 round; /* Safari 3.1-5 */ -o-border-image:url(http://fc07.deviantart.net/fs37/f/2008/247/3/2/Watercolor_Texture_Stock_1_by_ekoh_stock.jpg) 30 30 round; /* Opera 11-12.1 */ border-image:url(http://fc07.deviantart.net/fs37/f/2008/247/3/2/Watercolor_Texture_Stock_1_by_ekoh_stock.jpg) 30 30 round; border-width: 12px; padding: 50px; }

Inset Border

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.



.insetBorder { border: 10px inset; padding: 50px; }

Green Rounded Border

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.



.roundedBorder { border: 2px solid yellowgreen; border-radius: 20px; padding: 50px; }

Hopefully this helps you make custom and amazing looking websites.  If you have any great border tips to share or any questions, please let us know in the comments!

Disable right click to save and drag and drop on images

When building a portfolio site for photography or a similar field, you may want to prevent individuals from copying your images without your permission.  One common method to prevent image theft is to disable right clicking, dragging images, and saving images on computers and phones. While this method does not stop all hackers from taking your images, just making it harder will dissuade most from putting in the effort.

The first thing you want to do is to enter a code injection throughout your whole site.  From the Home menu of your Squarespace editing dashboard, click Settings → Advanced → Code Injection.  If you need more help getting to this screen, check out our Code Injection tutorial.  In the text box entitled Header, paste the following code:


    <script type="text/javascript">
      function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG")
          return false;
      }
      document.oncontextmenu = nocontext;
    </script>

Once you've pasted the code, click Save and return to the home menu.  From there, we need to enter some custom CSS.  To enter the CSS, click Design → Custom CSS.  For more help on entering custom CSS, check out our CSS tutorial.  In the text box, paste the following code:


img { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }

That's it!  Your pictures are now much safer.  If you have any questions or feedback, please feel free to comment below.