Squarespace Web Design: The Custom CSS I Use Most Often When Designing Websites
When it comes to using custom CSS on your Squarespace website, there are two things to consider.
One is that this will inherently make the website more complex, and therefore possibly more difficult to update in the future.
The second, though, is that custom CSS can help you create a website that stands out and contains more interesting custom elements. This can make your site more functional, user-friendly, and unique.
Sometimes clients come to me with specific visions for their site, or certain pages on their site, that are going to require custom code.
Other times, I make the decision to incorporate custom CSS simply for better visual appeal and sophistication.
I have a running list of my favorite bits of CSS and decided to share those with you today. Hopefully you’ll find some of these useful for your own site(s)!
FYI, I use a template from the Brine family for almost every single website I design. So I can only speak for how well this code works on templates in the Brine family.
Alright. Let’s dive in.
Using the Markdown block To Create more interesting Headings
Rather than solely rely on the style settings you’ve chosen for your Header font, you can play around with CSS to achieve more diverse styles.
Check out the screenshot of my client’s website below. You can see that I’ve set Header 1 text to be black, but notice the word HUMAN is pink. This goes along with his brand and makes the site more interesting overall.
Here is the code, which you can manipulate for your own use. We’ll use the sentence from his homepage, CAPITAL STARTS WITH HUMAN CAPITAL, as an example.
Using a markdown block, paste the following code:
<div style="text-align:center">CAPITALISM STARTS WITH<span style="color:#F782AD"> HUMAN </span>CAPITAL.
Just replace the color with the hex code of your choice and if you want the text left or right justified rather than center, you can change that as well.
This markdown is really useful too when a certain banner image is making your text difficult to read. Just change the font color of the sentence/paragraph entirely instead of a section of it.
CREATE A FULL BLEED SLIDESHOW THAT FADES/TRANSITIONS SLOWLY
Several of my clients want a homepage that is essentially one large full-bleed slideshow of images.
This is simple enough. I just create an Index page, add a new section, choose gallery for the section, add photos to this gallery, be sure in your Site Styles that Index:Gallery is set to slideshow layout, then add this custom code to make the transitions a lot smoother and slower:
/*MAKE GALLERY SECTION FULL BLEED SLIDESHOW FADE TRANSITION SLOWER*/
.slide { visibility: visible !important; -webkit-transition: opacity 3s ease-in-out; -moz-transition: opacity 3s ease-in-out; -o-transition: opacity 3s ease-in-out; transition: opacity 3s ease-in-out; }
Disable Automatic Hyphenation
This is simple enough. The hyphens that can show up on Squarespace sites linking broken words together can look awkward. This was a common request of my clients early on, so nowadays I just add this CSS to all sites by default.
Just paste the following into Custom CSS:
/*DISABLE AUTOMATIC HYPHENATION*/
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
Create a Custom Contact Form
I like tweaking contact forms for each client. This is nothing lavish, but I think it adds a nice little touch and makes the overall site look more beautiful and cohesive.
Because I customize this CSS for every single site, it’s difficult to choose the code I should share with you, so I’ll just paste a couple of different ones and you can edit the code to fit your own site style.
We’ll start with the contact form on my own website (this one):
Just paste the following into Custom CSS:
/*CUSTOMIZE CONTACT FORM*/
.form-wrapper .field-list .field .field-element{
border:none;
border-bottom: 3px solid;
border-color: #DBC48F;
background: #fff;
}
And here’s code for a transparent contact form that looks really good positioned over a banner image, like so:
/*CUSTOM CONTACT FORM*/
.form-wrapper .field-list .field .field-element{
border: none;
border-bottom: 1px solid;
border-color: #ffffff;
background: transparent;
}
Add Rollover Effects To Images
The last thing I almost always do is add some kind of rollover effect to images so that each time the mouse cursor passes over the image, it animates in some way or another.
My favorite to use are fade and grow, though there are a dozen other options too (invert, turn to black and white, etc.).
You can find how to “grow” images on your site here and you can find how to make them fade upon rollover here.
Okay, so those are the bits of CSS I use most often when designing sites. I have a whole Google doc set aside just for custom CSS I like to use, so this is only a small portion. Let me know if I can help you out!
Thanks for stopping by~
x Tiffany
Welcome!
Hey there! I’m Tiffany ~ a Web Designer & SEO Specialist. Here on the blog I write about web design, SEO, and running an online business. I hope you’ll find some nuggets of knowledge and inspiration and that you’ll stop by again and again. If you’re interested in Squarespace SEO or starting your own online business, you might want to sign up for one of my email lists below:
More useful posts:
Feel free to contact me at tiffany@tiffany-davidson.com