Squarespace CSS Snippets

Here are some CSS hacks you can use without having to use Javascript to change Squarespace elements.

Heart 'Like' Icon

display heart like icon & text inline

.sqs-simple-like.clicked .like-icon, .sqs-simple-like:hover .like-icon {
	display: inline-block;
}

change the hover & clicked color of heart like icon

.sqs-simple-like.clicked .like-icon, .sqs-simple-like:hover .like-icon {
	background-color: #000;
}

Header

Hide site title

.site-title { display:none; }

Navigation

Hide site navigation in Momentum

<style>
header#header {
display: none;
}
</style>

source: http://answers.squarespace.com/questions/51860/removing-site-navigation-in-momentum/51914

Replace Bedford mobile hamburger icon with Menu text

.mobile-nav-toggle-label {
  margin-right:10px !important;
}

.force-mobile-nav .mobile-nav-toggle-label::after {
  display: inline;
  content: 'Menu';
}
.top-bar, .middle-bar, .bottom-bar {display:none;}

source: http://answers.squarespace.com/questions/35704/how-can-i-replace-the-hamburger-icon-in-bedford-with-the-word-menu/66334

Forms

hide required asterisk

.required span {
	display: none;
}

change form input text

.form-wrapper .field-list .field .field-element {

}

change blog RSS text

.social-rss { 
}

Newsletter

lengthen form fields in newsletter block

.newsletter-block .newsletter-form-field-element {
	width: 240px;
}

source: http://answers.squarespace.com/questions/48176/how-do-you-lengthen-the-email-address-field-in-a-newsletter-block?page=1#48182

Blog

change font color of date on blog page

time.published a:link {
	color: #000;
}

.entry-footer a, .entry-footer .sqs-simple-like, .entry-footer .squarespace-social-buttons {
	color: #000;
}

source: http://answers.squarespace.com/questions/48393/how-do-i-change-the-font-color-of-the-date-on-my-blog-page

change size of tag cloud

.tagcloud-block .name {font-size: 70% !important;
}

change color of tag cloud

.tagcloud-block .name {color: blue !important;
}

source: http://answers.squarespace.com/questions/47640/how-do-i-change-the-text-size-in-a-tag-cloud

Commerce

display currency name 'USD' in price

.sqs-money-native:after {
content: 'USD' !important;
}

source: http://answers.squarespace.com/questions/48077/displaying-the-currency-name-usd-in-price

Feel free to contribute!

Credits

Created by Rebecca Garcia (@geekgirlweb) I'm a Developer Evangelist at Squarespace :)