Squarespace Tips & Tricks

Squarespace is easily one of the simplest and prettiest website builders I have worked with. Their templates are extremely well designed, load quickly and allow for a lot to be accomplished fairly quickly. But, there are always changes to their existing designs that can be really nice to make. So, I've put together a page with some of my favorite CSS tweaks for my website using Squarespace's Galapagos theme in the hopes someone may find them helpful!

Lightbox Adjustments

This code constrains the photo within the lightbox to a smaller less than full screen size and also allows for a particular color to be chosen with the Lightbox overlay. This can be helpful with not displaying overly large images.

/*Lightbox Size Adjustment*/
.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder { 
  top: 20%; 
  left: 20%; 
  bottom: 20%; 
  right: 20%; 
}
/*Lightbox Color Adjustment*/
.yui3-lightbox2 .sqs-lightbox-overlay{
  background-color: #222 !important;        
  background: #222 !important;

Newsletter Adjustments

The homepage newsletter box just takes up way too much room. The padding around it is enough for a 10-story fall. This bit of code just shrinks the padding and allows you to adjust according to your preference.

/*Newsletter Size Smaller*/
.newsletter-block .newsletter-form-wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
}

Resize Blog Post Titles

The blog titles felt HUGE to me so this code will simply make them smaller. You could also use it to change the font size or styling as desired.

/*Resize Blog Post Titles*/ 
.post-type-text .entry-title {
    font-size: 20px !important;
    letter-spacing: 1px !important;
    }

Blog Sidebar Adjustments

I really don't like when sidebars take up too much of the page and also hate when their formatting gets weird as a page is resized for various devices. For some reason, I also decided that I really liked a center-aligned sidebar with my page. The first code below center aligns your sidebar, sets the width to 20% of the page, and aligns the top of the sidebar with the line at the top of your first blog post's content. And the next code will do that along with a couple of additional reformatting changes across differing browser sizes.

/* Adjust Sidebar width and Center-Align Text */
.blog-sidebar { 
  width: 20%;
  text-align: center !important;
  margin: 85px 0 0 0;
}

@media only screen and (max-width: 480px) {
  /* iPhone Sidebar under Posts */
.blog-sidebar { 
  width: 100%;
  text-align: center !important;
}
}
@media only screen and (max-width: 1000px) {
  /* Tablet Sidebar Beside Posts */
.blog-sidebar { 
  width: 20%;
  text-align: center !important;
  margin: 100px 0 0 0;
}
}
@media only screen and (max-width: 3000px) {
  /* Desktop Sidebar Beside Posts */
.blog-sidebar { 
  width: 20%;
  text-align: center !important;
  margin: 85px 0 0 0;
}
}

Reduce Padding between Footer & Page

In the Galapagos template, there's a lot of padding between the footer and main content of each page. It felt like a little much so this code simply creates less space in that area.

/*Padding between Body & Footer*/
.content-container { 
  padding-bottom: 50px !important; 
}

Center Align & Stack Left & Right Footers

I liked the simplicity of a single stack footer and wanted to keep everything center aligned from the top of the footer to the footer's navigation. This code puts the left footer on top of the right footer and center aligns things. You can still use both footers this way. It also pulls the right footer up towards the left one for less space between the two. If you look at the bottom of my page, Follow Andrew is technically in the left footer area and my social icons are in the right.

#footerBlocksLeft {
    width: 100% !important;
    padding: 5px !important;
    text-align: center !important;
    margin: 20px 0 -5px 0 !important;
}
#footerBlocksRight {
  width: 100% !important;
  text-align: center !important;
  padding: 10px !important;
  margin: -10px 0 5px 0 !important;
}

Center Align Footer Navigation

This is pretty self explanatory. It center aligns the footer navigation which completes the centered look of my page footer. It just feels nice and clean that way.

/*Footer Nav Alignment*/
.footernav { 
  text-align: center !important;
  width: 100% !important;
  padding: 0 5px 0 5px;
}