Cart 0

Visual Style Guide - Regular Pages

Squarespace Color, Font and Other Design Styles


 

Heading 1

Heading 2

Heading 3

Body (Normal)

Body Link Style

Body Quote Style
 
This is a Quote Block Style
— Source
 

Heading 1

Single Column - Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.


Heading 2

2 Column - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko.

Heading 2

2 Column - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko.


Heading 3

3 Column - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean

Heading 3

3 Column -Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean

Heading 3

3 Column -Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean


Call to Action Button Styles


Form Style

 
 

Inline Image Style

 
 
 

Other Images Card Styles - as required.

 

This is an overlap style

With more subtitle text here. With more subtitle text here.With more subtitle text here. With more subtitle text here

 

Blog Summary Block Style

Summary Block
This is example content. Double-click here and select a page to feature its content. Learn more

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:

//footer fonts
.Footer
{font-size: .8em;
font-weight: 400;
border-top: solid white 4px;}

//newsletter
#stay-in-touch .Index-page-image:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#stay-in-touch .Index-page-content {

    padding-top: 30px;
    padding-bottom: 30px;
}
#stay-in-touch {min-height: 70vh;}

//IG full width
#block-yui_3_17_2_1_1522344716230_4897 {max-width: 50px;
margin: auto;}
#block-yui_3_17_2_1_1522341719679_4595 {margin-right: -17px;
margin-left: -17px;}
.Footer-inner{
  max-width: 100%;
padding: 0px;
}
.Footer-middle, .Footer-bottom {max-width: 1220px !important;
margin: auto;
    padding: 10px 40px;
}
//fixes gallery dumbness
.Intro--has-image:before {

  background-color: #ffffff;

  h1, h2, h3, p {color: #000 !important;}
}

#praise {
  .sqs-block-summary-v2 .summary-excerpt p, .sqs-block-summary-v2 .summary-excerpt ul, .sqs-block-summary-v2 .summary-excerpt li {
    font-size: 30px;
    line-height: 1.4em;
    margin: 0 0 10px 0;
    text-align: center;
}
}

//commissions

#block-yui_3_17_2_1_1522296468306_3910 {font-weight: 600;}

//footer full-width instagram
.Footer-blocks--top {
    padding: 0px 0px;
}
#block-yui_3_17_2_1_1522341719679_4595
 {
    padding: 0px 0px;
}

//link color GALLERY intro for Selected Works
.link-color
{
  color: #8082a8;
  text-decoration: underline;
  text-underline-position: under;

}


Right click disable code

Put the code below in the Page Configuration (gear icon of the page) --> Advanced Section of each page where you don't want people to be able to right click and download photos.

<script language=JavaScript> var message="We're sorry, but image downloading has been disabled from our website."; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

Squarespace Tutorials and information


General Page Editing Information

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:  I use www.tinypng.com to compress my 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. (Sofia Template is part of this template family).

All of Squarespace’s Videos in One Place! - Includes Design & Settings information

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.

Also, check with your local library. Depending on the city, some libraries offer free access to Lynda.com tutorials with a valid library card.

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