SQUARESPACE TUTORIALS AND INFORMATION
SQUARESPACE VIDEOS & GUIDES
All of Squarespace’s Videos in One Place! - Includes Design & Settings information
GENERAL PAGE EDITING INFORMATION
You have access to our extensive Squarespace video library. It has videos on just about everything you can think of — easy to follow and rewatch as often as you’d like.
You should have received an email from us/Podia about accessing the library. If not, please let us know!
OPTIMIZING YOUR IMAGES FOR SQUARESPACE
NOTE: When you upload images to your website, make sure to optimize them for the web (ie use the right size - 1500px wide is the standard with SqSP & make sure they are compressed to under 500kb & a resolution of 72 otherwise your site will load slowly.)
Optimizing and Formatting Images for Squarespace/Web
Tip: We use ShortPixel to compress photos if they are larger than 500 kb.
Tip: Label your images clearly. DC1940.jpg = bad. dog-walker-portland-pug-puppy.jpg = good.
YOUR TEMPLATE AND SQUARESPACE GENERAL INFO
All the info about the Brine Template Family. (Sofia Template installed).
Using Squarespace Analytics - to monitor your visitor activity & tweak your page goals & Squarespace Analytics FAQs
ADDITIONAL TRAINING
We can help you. Contact sarah@sarahmoon.net to find out about training.
CUSTOMER SUPPORT
Customer Support at Squarespace is great - they are super helpful if you are stuck.
You can reach them at Customer Care.
TROUBLESHOOTING - IT’S NOT YOU, IT’S SQUARESPACE
Here are the links to SqSp’s Twitter Feed & Status Update if the platform is being glitchy. Check here first before trying to figure out what you are doing wrong. It might not be you!! :)
Squarespace Twitter Help Feed - You don’t need to sign up to Twitter to view this. It’s public.
Squarespace Status - This will tell you if Squarespace is down & other connection issues
CUSTOM CODE
Your custom CSS code is in the Design --> Custom CSS section.
IMPORTANT! - If Squarespace is troubleshooting a problem and asks you to delete code, make sure you have a current copy of the latest code so you can copy & paste it back into:
Design --> Custom CSS section.
Also note that if you change templates, you will lose the code in the Design --> Custom CSS section. (Be aware that templates in different families have different selectors or "labels" which means that the code might not work with a new template.)
Copy of the latest code as of April 1, 2022
//footer style//
@media screen and (min-width:960px) {
.Footer-inner {
padding-left:0px;
padding-right: 0px;
padding-bottom:0px;
padding-top:0px;
}
.tweak-site-width-option-full-background .Footer-inner {
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
}
/**styles for top footer section**/
.Footer-blocks--top {
padding-left:100px;
padding-right:100px;
padding-top:30px;
background-color: #FAFAFA !important;
}
/**styles for bottom section**/
.Footer-blocks--bottom {
padding-left:100px;
padding-right:100px;
}
/**styles for middle sections**/
.Footer-blocks--middle {
padding-left:100px;
padding-right:100px;
}
body { overflow-x: hidden;
overflow-y:visible;
}
}
//hyphenation
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
/*//logo tag stack
.enable-load-effects .Site.loaded .Header [data-nc-container] {
display: inline-block;
}*/
//bold changes color to grey
h2 strong {color: hsl(60, 1%, 37%); font-weight: normal}
.image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-title-wrapper strong {color: hsl(60, 1%, 37%); font-weight: normal}
//share icons on blog centered
.tweak-blog-item-alignment-left .BlogItem-share {
text-align: center;
}
//background home page and shop blog section
#dermatology-blog, #aidin-anya-story, #home-intro, #home-services-preview, #team-gallery
{
background-color: hsla(60, 1%, 37%, 0.03);
}
//home page review section//
#reviews-home, #reviews-service
{
background-color: hsl(210, 39%, 52%)
;
color: white;
a {
color: #FAFAFA;
text-decoration: none;
text-transform: uppercase;
}
}
//services header
#block-5cc84936f9619ad23bf2078d, h1 {color: hsl(210, 39%, 52%);}
#block-yui_3_17_2_1_1556662957211_12924 p {color: hsl(60, 1%, 37%);}
// Pricing Table Box //
.sqs-block-markdown {
max-width: 400px;
background: #ffffff;
border-top: hsl(60, 1%, 37%) 5px solid !important;
border: #e3e3e3 1px solid;
border-radius: 10px;
padding: 40px !important;
margin: 20px;
text-align: center;
}
// Pricing Table Plan Title //
.sqs-block-markdown h2 {
color: hsl(210, 39%, 52%);
font-size: 24px;
letter-spacing: 0px;
text-transform: none;
padding: 20px 20px 5px 20px;
}
// Pricing Table Plan Price //
.sqs-block-markdown h1 strong {
font-size: 0px;
line-height: 20px;
font-weight: 200;
color: #000000;
}
.sqs-block-markdown h1 {
font-weight: 200;
font-size: 18px;
padding-left: 25px;
padding-top: 0px;
padding-bottom: 10px;
margin: 0px;
color: #000000;
}
// Pricing Table List //
.sqs-block-markdown p {
padding: 10px 30px 10px 30px;
margin: 0;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 20px;
color: #000;
}
// Pricing Table Button //
.sqs-block-markdown a {
font-weight: 500;
text-transform: uppercase;
display: inline-block;
border: 0px solid #5585b4 !important;
padding: 10px 35px !important;
background: #5585b4;
color: white !important;
border-radius: 0px;
}
.sqs-block-markdown a:hover {
color: #DDDDDD;
}
/* = = ANIMATED BLOG PAGINATION START = = */
// — — VARIABLES — — //
// STYLES //
@ABP_arrow-background-color: #0d0d0c;
@ABP_arrow-color: #fff;
@ABP_arrow-size: 20px;
@ABP_arrow-thickness: 4px;
@ABP_content-background-color: hsl(210, 39%, 52%);
@ABP_content-border-radius: 5px;
@ABP_label-color: #fff;
@ABP_title-color: #fafafa;
@ABP_meta-color: #fff;
/* — — CODE — — */
body.collection-type-blog.view-item {
.BlogItem-pagination {
&:after {
display: none;
}
.BlogItem-pagination-link {
.BlogItem-pagination-link-icon {
width: calc(@ABP_arrow-size / 2);
height: @ABP_arrow-size;
stroke-width: @ABP_arrow-thickness;
}
.BlogItem-pagination-link-meta {
line-height: 1em;
}
}
// mobile styles
@media only screen and (min-width: 0px) and (max-width: 641px) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.BlogItem-pagination-link {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
min-width: 250px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
// desktop styles
@media only screen and (min-width: 641px) {
position: fixed;
top: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 0;
right: 0;
left: 0;
opacity: 0;
-webkit-animation: fade-in .4s .1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
animation: fade-in .4s .1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
z-index: 999;
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.BlogItem-pagination-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: auto;
// arrow
.BlogItem-pagination-link-icon {
background: @ABP_arrow-background-color;
stroke: @ABP_arrow-color;
margin: 0;
padding: 13px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: transform;
z-index: 10;
opacity: 1;
}
// content
.BlogItem-pagination-link-content {
position: absolute;
width: auto;
max-width: 300px;
background: @ABP_content-background-color;
padding: 15px 20px;
-webkit-transition: opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: transform;
opacity: 0;
pointer-events: none;
z-index: 20;
font-size:18px;
.BlogItem-pagination-link-label {
color: @ABP_label-color;
}
.BlogItem-pagination-link-title {
color: @ABP_title-color;
}
.BlogItem-pagination-link-meta {
color: @ABP_meta-color;
}
}
// prev pagination
&.BlogItem-pagination-link--prev {
margin-right: auto;
.BlogItem-pagination-link-icon {
border-radius: 0 @ABP_content-border-radius @ABP_content-border-radius 0;
}
.BlogItem-pagination-link-content {
left: 0;
-webkit-transform: translate3d(-30px, 0, 0);
transform: translate3d(-30px, 0, 0);
border-radius: 0 @ABP_content-border-radius @ABP_content-border-radius 0;
}
&:hover {
.BlogItem-pagination-link-icon {
-webkit-transform: translate3d(-30px, 0, 0);
transform: translate3d(-30px, 0, 0);
}
}
}
// next pagination
&.BlogItem-pagination-link--next {
margin-left: auto;
.BlogItem-pagination-link-icon {
border-radius: @ABP_content-border-radius 0 0 @ABP_content-border-radius;
}
.BlogItem-pagination-link-content {
right: 0;
-webkit-transform: translate3d(30px, 0, 0);
transform: translate3d(30px, 0, 0);
border-radius: @ABP_content-border-radius 0 0 @ABP_content-border-radius;
}
&:hover {
.BlogItem-pagination-link-icon {
-webkit-transform: translate3d(30px, 0, 0);
transform: translate3d(30px, 0, 0);
}
}
}
// all hover
&:hover {
.BlogItem-pagination-link-icon {
opacity: 0;
-webkit-transition: opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.BlogItem-pagination-link-content {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: auto;
}
}
}
}
}
}
/*
Developed by ANIagency LLC
This work is licensed under a Creative Commons Attribution 4.0 International License.
v1.04
*/
/* = = ANIMATED BLOG PAGINATION END = = */