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 the 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
People notice a frequent issue in blog posts, between the text that goes on all the way across the screen. The problem with this layout? It renders the text more difficult to read. Your eyes adjust to scan long lines, which is tiring work. This results in skimming through articles, feeling frustrated, and in some cases giving up halfway through the article altogether.
If you face this issue, a straightforward solution to this problem is altering your blog posts default width. Writing in this way gives you a more comfortable/reader-friendly line length. But generally, you should try to keep it around 45-75 characters in length (including spaces). This is something you can check with any free online word counter. This small adjustment improves the readability of your content while keeping your audience hooked..
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”
FAQ
1. So many reasons to use custom CSS on your Squarespace website!
Through Custom CSS, you can exceed the design settings built into Squarespace, granting you greater control over your website’s aesthetics and functionality. Provides a unique and professional appearance that represents your style.
2. Yes, these CSS styles will work in every Squarespace template.
Yes! The CSS codes given in this blog will properly function on most of the squarespace templates. Depending on your specific template and layout, there might be some minor tweaks required.
3. How to Add CSS to Your Squarespace Site?
In your Squarespace dashboard, go to Design → Custom CSS to add CSS. Just paste the code snippets from this blog into the CSS editor.
4. Can I undo or change the CSS after it's been applied?
Yes, you may change or delete any CSS at any moment. All you need to do is open the Custom CSS code in Squarespace and then edit it.
5. Will adding CSS slow down my site?
One can add CSS to styling, but it does not have much impact on the speed of the site unless in the case of animations or styling a lot. This is always a positive step to test and optimize your CSS.
6. What if I require additional help customizing my Squarespace site?
If you require expert assistance for advanced customizations, then our Squareko team would love to help you out! You are not an AI template generator.
