Amanda Gersh

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 a poster style

With more 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:

 

//hyphenation
//hyphenation
p, h1, h2, h3 {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
  }

//mobile headlines
@media only screen and (max-width: 600px) {h1 {font-size: 2em;}
  h2 {font-size: 1em;}
  h3 {font-size: 1.2em; line-height: 1.6}}
//tagline position
[data-nc-base="header"] [data-nc-container="top-center"] [data-nc-element="tagline"] {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

[data-nc-base="header"] [data-nc-container="top-center"] [data-nc-element="branding"] {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: ;
    -webkit-order: 1;
    order: 1;
}

[data-nc-base="header"] [data-nc-container="top-center"] [data-nc-element="branding"]:after {
letter-spacing: 0;
    content: '//';
}
//footer
.Footer p {font-size: .75em;}
//nav


@media screen and (min-width: 740px){
.ancillary-header-branding-position-bottom-left [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-tagline-position-bottom-left.has-tagline [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-primary-nav-position-bottom-left.has-primary-nav [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-secondary-nav-position-bottom-left.has-secondary-nav [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-social-position-bottom-left.has-social [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-search-position-bottom-left [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-cart-position-bottom-left.has-cart [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-account-position-bottom-left.has-user-accounts [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-branding-position-bottom-center [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-tagline-position-bottom-center.has-tagline [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-primary-nav-position-bottom-center.has-primary-nav [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-secondary-nav-position-bottom-center.has-secondary-nav [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-social-position-bottom-center.has-social [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-search-position-bottom-center [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-cart-position-bottom-center.has-cart [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-account-position-bottom-center.has-user-accounts [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-branding-position-bottom-right [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-tagline-position-bottom-right.has-tagline [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-primary-nav-position-bottom-right.has-primary-nav [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-secondary-nav-position-bottom-right.has-secondary-nav [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-social-position-bottom-right.has-social [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-search-position-bottom-right [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-cart-position-bottom-right.has-cart [data-nc-base="header"] [data-nc-group="bottom"], .ancillary-header-account-position-bottom-right.has-user-accounts [data-nc-base="header"] [data-nc-group="bottom"] {
      max-width: 100%;
background-color: hsl(12, 100%, 79%);
 border-bottom: 10px solid white;
    padding-top: 10px;
    padding-bottom: 10px;}}
.Header-nav-folder {margin-top: 7px;}

//homepage panel
#about-amanda {background-color: #f5f5f5}

//h1 text shadow
.Index-page--has-image h1, .Index-page--has-image h2, .Index-page--has-image h3  {text-shadow:1px 1px 3px black;}
.Intro--has-image h1, .Intro--has-image h2, .Intro--has-image h3
{text-shadow:1px 1px 3px black;}

//Testimonials font size
#editing-testimonials
{
  .sqs-block-summary-v2 .summary-block-setting-text-size-extralarge .summary-excerpt p {
    font-size: 25px;
    line-height: 1;
}
  
}
#editing-testimonials .tweak-index-page-fullscreen-first-page-only .Index-page:first-child, .tweak-index-page-fullscreen-pages-with-backgrounds-only .Index-page--has-image, .tweak-index-page-fullscreen-all-pages .Index-page {

    min-height: 10vh;
}

#editing-testimonials .Index-page-content {
    padding: 30px 100px;
}

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 Sofia Template (Brine).

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