5 CSS snippets I add most frequently + 1 bonus!
If you’re here, you probably love Squarespace too. Right?
But we both know, even with ALL the good Squarespace provides, there’s a few cons. Luckily, most of those can be easily fixed with some custom CSS, and today –you’re in luck, because that’s exactly what I’m giving you!
5 easier customizations using CSS
GETTING STARTED:
In the copy-and-paste code sections in this post, they will always start with a non-code descriptor like this:
// description of code below //
Whatever you write after those 2 back-slashes doesn’t matter, it won’t be part of the code itself. It’s just there to help you remember what that snippet targets, when you go back through it later to edit, add or delete some of your custom code, down the road.
You can also format it like this:
/* START - descriptions can also look like this */{CODE}/* END - descriptions can also look like this */
My personal preference is something like this:
// START description of code below //{CODE} // END description of code above //
I like to put one line like that above AND below the code so I know exactly where it starts & ends at a glance. That line will always be greyed out with those two // in front of it (or a /* or /**), so it makes sections of code easier to spot while I’m scrolling through the CSS. Especially if you have a fair bit of it to scroll through.
ONE LAST TIP:
Select all, copy & paste into a separate doc, –somewhere else. On your own hard drive, in a Google Doc –it doesn’t matter. Always keep an updated backup of your CSS and your HTML.
Squarespace support does not offer support for custom code. If anything stops working on your site, one of the first things they’ll ask you to do is to remove ALL of the custom code (that’s all of your CSS and all of your HTML) to see if the problem persists. If it doesn’t, then they know it’s a break in the code somewhere, and you just add it all back in, piece by piece until the problem turns up again, so you can narrow it down to which snippet is the culprit.
01. Remove link underlines
If you’re anything like me, you want to control which words have underlines, or –bare minimum– dictate the padding (space) between the underline & the word it sits under, so the line doesn’t interfere with the text underneath it. Right?
It’s honestly simpler to manually underline text instead (select, then press Control/Command + U on the keyboard ––no, it’s not in the text block formatting options, but it still works on most templates).
But I’ve never noticed a setting in Site Styles that targets that, so here’s the copy-and-paste code to turn it off, either only in the footer or site-wide, depending on what you prefer.
Copy-and-paste, no edits needed.
For 7.1
// Removing link underline IN FOOTER ONLY // #footer-sections a {background-image:none!important; line-height: 1.5em;} // removing link underline site-wide // .sqs-block-html a {background-image:none!important;}
For 7.0
// Removing link underline IN FOOTER ONLY // .Footer-blocks a {border-bottom: none !important;} // removing link underline site-wide // a {border: none !important;}
02 Text wrap & removing automatic hyphenation
This was a serious issue for me. I hated how it cut off words, wrapped them oddly & put hyphens in weird places. This will cut out the bulk of that problem for you! Copy-and-paste, no edits needed.
For 7.1
// Remove hyphens from text //p1, p2, p3, h1, h2, h3, h4 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }
For 7.0
// Remove hyphens from text // p, h1, h2, h3, { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }
03 Removing the header/footer
This is best used for single Leadpage-or-ClickFunnels-style sales pages, –but hosted (affordably) on your own website. They appear to be single, standalone pages with no header or footer nav visible, to keep people on that page without distractions, essentially.
It’s best for encouraging signups for opt-ins, selling services or products, etc.
Copy-and-paste, no edits needed.
This one does NOT go in the Custom CSS area; it goes in the Advanced Code Injection area for each page you wish to turn off the header/footer. (Not in the site-wide Code Injection area; if you put it there it will ‘turn off’ the header/footer for EVERY page of your site.)
For 7.1
Reminder: Add this code to the individual page’s settings, under Advanced in the PAGE HEADER CODE INJECTION.
<style>.header, #footer-sections {display:none!important;}</style>
For 7.0 - Brine Family
Reminder: Add this code to the individual page’s settings, under Advanced in the PAGE HEADER CODE INJECTION.
<style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>
04 Adding custom font styles
In case your client has a font that isn’t available within Squarespace’s native font options, this is how you’d install a custom font on your site.
{Keep in mind that text is everywhere on your site, so this doesn’t cover changing the navigation font, button font, lightbox form fonts, etc., –only the body copy on each page.}
First I’d go to Design, then Custom CSS. Scroll to the bottom of that menu area and click Manage Custom Files. Click the icon in the little popup that indicates a file upload, choose the font file on your computer, then click Open to upload it in the CSS area.
Next you’ll paste in this bit of code:
// Header 2 - custom font // @font-face { font-family: 'Exact Font Name'; src: url(PASTE URL OF FONT FILE); } h2 {font-family: 'Exact Font Name' !important;}
Next, select & delete the section that says “PASTE URL OF FONT FILE” and once that text is gone, leave your cursor there. Go back to Manage Custom Files & click on the file you just uploaded. The URL for where that file is “kept” on Squarespace’s servers or whatever, will automatically paste where your cursor was.
Copy & paste (from the end of that file name) the exact name of the font file, with whatever capitalizations, dashes, no spaces, ––whatever, and then paste that into these 2 sections: “font-family: ‘Exact Font Name’;
Now it should look something like this:
// Header 2 - custom font // @font-face { font-family: 'Exact Font Name'; src: url(https://static1.squarespace.com/fake-url/Lato-Heavy.ttf); } h2 {font-family: 'Lato-Heavy' !important;}
I always paste the URL of the uploaded (installed) font file FIRST, so I can copy-and-paste the EXACT name of the font from the end of that url, –minus the font file type (the .ttf or .otf file extension). If you type the name of the font wrong, the code won’t work.
Congrats! You’ve just uploaded a customized font for your H2 / Header 2!
Repeat if you need to also customize the fonts for H1, H3 and P, and just change where it labels “h2” in the code to whatever you’re changing next. For example, changing the H1 would look like this:
// Header 1 - custom font // @font-face { font-family: 'Exact Font Name'; src: url(PASTE URL OF FONT FILE); } h1 {font-family: 'Exact Font Name' !important;}
Keep in mind too, that for 7.0, it only has built-in designations for H1, H2, H3 and P.
For 7.1 however, you can designate a font choice for each of these: H1, H2, H3, H4, P1, P2, P3. So your code might look like this for Paragraph 1 style:
// Paragraph 1 - custom font // @font-face { font-family: 'Exact Font Name'; src: url(PASTE URL OF FONT FILE); } p1 {font-family: 'Exact Font Name' !important;}
CUSTOMIZING THE BOLD & ITALICS VERSION
Adding a font version for bold and/or italics is easy, too. All you have to do is upload the font file for Bold, and for Italics. Then use the same code above, paste in the unique URL to the new Bold font file, and then edit the H1 to say:
h1 em {font-family: 'Exact Font Name' !important;} h1 strong {font-family: 'Exact Font Name' !important;}
“em” stands for emphasis, which is the italicized designation.
”strong” is used for the bold font style designation.
Once you’ve added that bit of code for each of the H1-4, and P1-3 font styles in the CSS, make sure you Save your changes. From now on, anytime you’re using a text block, you can select these styles from the editor menu to trigger that custom font to display based on how you installed it.
on 7.0
NORMAL
Bold
Italic
Bold Italic
HEADING 1
Bold
Italic
Bold Italic
HEADING 2
Bold
Italic
Bold Italic
HEADING 3
Bold
Italic
Bold Italic
on 7.1
HEADING 1
Bold
Italic
Bold Italic
HEADING 2
Bold
Italic
Bold Italic
HEADING 3
Bold
Italic
Bold Italic
HEADING 4
Bold
Italic
Bold Italic
PARAGRAPH 1
Bold
Italic
Bold Italic
PARAGRAPH 2
Bold
Italic
Bold Italic
PARAGRAPH 3
Bold
Italic
Bold Italic
05 How to display 2 font styles in 1 heading or paragraph style
PRO TIP:
You don’t have to have the same font family for a bold or italicized version of a single Heading or Paragraph font style.
What I mean by that is: let’s say your font doesn’t have an italics version –which is cool because maybe you have this wicked script font you wanted to use instead, anyway.
You can dictate that H1 italics will always display as that script font, and regular & even bold H1 are the serif/sans serif font you initially installed.
Here’s what that code may look like:
// Header 1 - custom SERIF font // @font-face { font-family: 'PlayfairDisplay', serif; src: url(https://static1.squarespace.com/fake-url/PlayfairDisplay.ttf); } h1 { font-family: 'PlayfairDisplay' !important; font-size: 2em; }// Header 1 - custom SCRIPT font // @font-face { font-family: 'Pinyon Script', cursive; src: url(https://static1.squarespace.com/fake-url/PinyonScript.ttf); } h1 em { font-family: 'Pinyon Script' !important; font-size: 2.5em; padding: 20px; }
Which results in something like this:
Which would look (would be H1 normal)
like this (would be triggered by italicizing your H1 font style)
If your secondary font styling for the em or strong sits too high up or too low from the baseline of the other letters in that same sentence, add a top margin value to that styling group. I’ve added it at the end of this example below. Change the number value accordingly to fit your customization need; it can be a positive or negative number:
h1 em { font-family: 'Pinyon Script' !important; font-size: 2.5em; padding: 20px; top: -7px !important; }
06 How to create your own simple linked “Back to top " text
This is one of my favorites, because not every template includes this in their footer designs, and it’s super easy to set up!
First, add this to the Code Injection area of your website’s Advanced Settings (yes the HTML area for your WHOLE website, not just a specific page, unless that’s what you’re aiming for).
<div ID=”top”></div>
Next, go to your footer, and add the text you want to link back to the top. It can also be an image (icon) you uploaded. Link that to “#top” –that’s it. Save and check the link!
Since the initial HTML was added to the site-wide header, anything (text or image) that you link to #top will scroll back to the header automatically!
❓Troubleshooting:
Font installation can be tricky. Sometimes the CSS needs the ‘single quote’ around the name & sometimes it doesn’t. In my experience, it doesn’t always want the “, serif” –or “, cursive” added after the font name either. Sometimes it needs the “!important” added before the semi-colon to over-ride the previous CSS written elsewhere in the site.
So if it’s not working try adding/removing those elements to see which thing works & then stick with that method going forward, as a general rule.
Disclaimer: I’m not a developer! These are code bits I’ve picked up over the last 5 years of designing Squarespace-specific websites. None of these snippets should break your entire website, but you should still use caution. Try 1 at a time & see how it works on your template and version of Squarespace. Some elements of code are different between 7.0 and 7.1, so be aware that may affect how the code works on your specific site. Above all, if you add it & it doesn’t work for you, remove it. There's no need to have code there that isn’t working. –And on that last note, keep your custom CSS as minimal as you can, since the more you have, potentially the slower you site can load.
Is your Squarespace site unique?
If not, it’s time for a refresh.
