10 Easy-to-Use Squarespace CSS Codes & Tricks to Upgrade your Website.
1. How to keep your Squarespace website text from hyphenating.
My hack is how to avoid your text from hyphenating. To prevent text from breaking with hyphens, follow these steps:
1.Go to "Design" in your settings.
2.Find "Custom CSS."
3.Paste this code there:
Code:
h1, h2, h3, h4, p {-webkit-
hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; }
This code ensures that headers (like Header 1, Header 2, etc.) and paragraph text won't have hyphens in them.
It keeps your text looking clean and whole.
2. Move Summary Block Carousel Arrows To The Sides
In Squarespace, when you utilize a Summary Block Carousel, the default placement for the navigation arrows is in the top-right corner of the block. However, you may want these arrows to appear on both sides of the Summary Block Carousel instead, as shown in the image below. By applying the provided Squarespace CSS code, this change will apply to all the Summary Block Carousels across your website.
3. Adjusting the blog post width
Often, People come across a common issue in blog posts where the text stretches across the entire screen. The problem with this layout? It makes the text much harder to read. Your eyes have to work extra to traverse long lines, which can be exhausting. It often leads to repeatedly reading the same text, causing frustration, and sometimes even abandoning the article before finishing it.
A simple solution to this problem is adjusting your blog posts' default width. By doing this, you create a more comfortable and reader-friendly line length. Ideally, you should aim for a line length of about 45-75 characters, including spaces. You can easily check this with a free online word counter tool. This adjustment enhances the readability of your content and keeps readers engaged.
Code:
* CUSTOM BLOG POST WIDTH 7.0
*------------------------------------*/
.BlogItem {
max-width: 750px;
margin: 0 auto;
}
* CUSTOM BLOG POST WIDTH 7.1
*------------------------------------*/
.blog-item-wrapper .blog-item-inner-wrapper {
max-width: 750px;
margin: 0 auto;
}
The max-width value is responsible for controlling the width of your blog. You have the flexibility to adjust this number according to your preferences. If you choose a value larger than 750px, your blogs will appear wider, while a lower number will give them a more compact appearance.
Important note: In Squarespace 7.1, there's a new feature that allows you to edit the width of blog posts using the Format menu. However, you can still set your desired maximum width using the CSS code mentioned above. This gives you the freedom to fine-tune the appearance of your blog posts.
4. Use Two Different Fonts On One Line
Font mixing like this is a current trend. It involves combining two fonts that have distinct styles within the same text block. This approach closely resembles the first item on this list featuring text highlights!
We employ CSS to alter the font for any text in Heading 1 format that is bolded. You can use the provided Squarespace CSS code below as a reference.
Code:
/* Text change detail */
h1 strong {
font-family: aktiv-grotesk-extended !important;
font-size: 3.1rem;
}
5. How to remove extra margin from your Squarespace website fonts.
Code :
h1, h2, h3, h4, p {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
6. Auto-Rotate Galleries On Squarespace
Our Willow Template features a captivating gallery that automatically rotates to enhance the visual appeal at the top of the site. To implement this, it's important to note that it's not CSS code; it's JQuery. However, you can easily incorporate the code by following these steps: Go to Settings > Advanced > Code Injection and insert the provided code into the header section.
Code:
#page {
overflow-x: hidden
}
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 50%;
margin-right: 5%
}
@keyframes slideshow {
0% { left: 0; }
100% { left: -225% }
}
7. Squarespace button sizing consistency
By default, Squarespace adjusts button sizes based on the text within them. However, for those who value consistency and want buttons to maintain a uniform width regardless of the text, there's a solution. You can achieve this by
inserting the following code into the same location where you added the hyphenation code earlier (Design > Custom CSS).
Code:
.sqs-block-button-element--small {
width: 140px !important;
}
.sqs-block-button-element--medium {
width: 170px !important;
}
.sqs-block-button-element--large {
width: 180px !important;
}
You’ll see there are 3 “rules” here, one for each size button. Feel free to use just one specific line, or all three. Also, you can change the 140 (or 170/180) pixel specifications to adjust the width of your buttons.
8. Add Floating Social Links To Your Site
Transform your website with a touch of dynamism by elegantly positioning your social links along the site's side.
1.To get started, follow these simple steps:
2. Begin by inserting a Social Links block into your website's footer.
3. Next, incorporate the Squarespace CSS code provided below.
Implementing this code will bring your social links to life, adding an engaging and interactive element to your site.
Code:
@media only screen and (min-width:640px){
footer{
.sqs-svg-icon--wrapper{
display: block !important;
margin: 20px 10px !important;
}
.socialaccountlinks-v2-block{
position: fixed !important;
top: 20% !important;
/* Adjust this percentage to move the icons up or down */
left: 3% !important;
z-index: 99 !important;
}
}
}
9. HOVER COLOR ON YOUR FOOTER NAVIGATION
Elevate the visual appeal of your Brine template's footer navigation effortlessly. With a sprinkle of CSS magic, you can now infuse some excitement into your website. This straightforward code introduces a subtle yet effective hover effect to the links, allowing them to gracefully change color when users interact with them by hovering their cursor over the links. This subtle touch enhances the overall user experience, making your website more engaging and user-friendly.
Code:
# BLOCK ID p a:hover {
Color: #ff0000 !important;
}
Template Compatibility: Ensure you're using a Brine-family based template. If you're uncertain about your template type, refer to the list of templates here.
Font Adjustments: To tweak your footer navigation's font settings, head over to the Style Settings.
Customize Hover Color: You can personalize the hover color effect of your footer navigation by modifying the color hex code following "color:".
Adding this code to your website is a straightforward process:
Footer Navigation Requirement: This code is designed for Footer Navigation, specifically found under Pages. It won't affect regular links in your Footer area.
While implementing the code, exercise caution not to accidentally remove any characters, as this could disrupt the code's functionality.
10. REMOVE HYPERLINK UNDERLINE
Squarespace automatically adds underlines to hyperlinks in text blocks, which can be helpful for link visibility. However, it might not always align with your design preferences. To maintain a cleaner appearance in your text sections, you can effortlessly eliminate these hyperlink underlines by applying the following CSS.
Code:
a {border-bottom: none;}
By using the “a” selector you’ll only target body text. If you wish to target a heading, insert its selector before ‘a”
For example, I’m using “h2 a”