No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md

README.md

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 :)