Idea testing
This page contains a selection of code examples / jottings / experiments created in response to questions posted on the Squarespace Answers website where I am one of the top rated contributors.
The page is getting pretty cluttered, so I've started moving the most popular code examples into the Squarespace Tips section of my website.
Click the link if you're looking for...
Read on if you're looking for something else
Tweet this links
Here's an inspiring tweet. Tweet this
Styling H5s in Markdown blocks:
Should be in Eurostile
Styling a div containing a link as a button in a Markdown block
Squarespace Tips
The Squarespace Code Connector is an incredibly useful utility that makes me faster and more accurate at developing custom CSS and injection scripts for Squarespace websites.
Check out my video to see the Squarespace Code Connector in action and hear me talk about its advantages.
If you use custom fonts on your Squarespace website you might have noticed 'font flicker' - also known as FOUT (flash of unstyled text) - the page initially displays in the default font and then swaps to the custom font, causing a distracting flicker.
Here's a fix that uses CSS3 animations to hide the flicker.
Squarespace automatically adapts your page layout for different screen widths but this can lead to some very long page lengths on mobile devices.
This quick tip optimises page lengths by reducing the number of summary block entries on mobile devices .
Add the code in this article to Design > Custom CSS and your Squarespace search results will be a lot more useful to your site visitors.
Batch optimising your images speeds up your workflow and also speeds up your Squarespace site.
Simple image optimisation can overcome these problems.
When Google started moving all of its tools over to https access they also took the step of not reporting referring search terms for users who searched on an https connection.
The upshot was that the specific search terms that bring in visitors via Google search are all reported as (not provided).
Adding a filter to Google Analytics replaces any "(not provided)" data with "np - [landing page title]" - this at least lets you know which pages on your site are receiving search traffic.
Here's a code snippet that forces PDFs to open in a new window rather than hiding your site by taking over the current browser window.
This is a quick solution I just programmed for a client that allows displays a down arrow "scroll hint" locked to the bottom of the browser window that slowly fades out as the page is scrolled down and quickly fades back in if the page is scrolled back to the top.
Zoom in. Zoom Out. Shake it all about - Free CSS code to add to your Squarespace website that allows you to easily add cool rollover effects to whichever images you want.
When an IFRAME embedded in a code block does not work on a Squarespace website the problem is usually that the embed IFRAME code is unsecure ( the IFRAME url begins with http:// ) and the page that contains the IFRAME code is secure (url begins with https://).