Customizations and add-ons for Squarespace websites using Forte

Like many self-professed web builders/designers, I really only know enough CSS and Javascript to be dangerous. I'm good at reading code that's already been written and understanding what's happening, tweaking it, or combining bits and peices together, but writing from scratch is a fool's errand for me.

This is, however, common. Real programmers, of course, can and do write code from scratch to create new solutions, but coders tend not to like inefficiency, so they copy, tweak, and combine just the same.

That's what this whole post is about. There's no sense in re-inventing the wheel if someone has already solved the problem you come across. For my latest web project, there were a number of customizations I wanted to make on the site, which was built using Squarespace's Forte template. I talked about one of the particularly cool ones, how to make a gallery block the full width of the window, previously.

For this, though, I'm going to discuss each little tweak I did on the site in order.

The "Dude, where's my tagline" Issue

The way Forte handles the tagline is strange. I normally don't even use the tagline, but this client specifically asked for some text below the logo, so using the tagline was the natural way to do it. I turned it on but didn't see it. It turns out that Forte tries to show/hide the tagline based on the window width, but even on my 15" Retina screen at the time, the window wasn't wide enough to show the tagline. I couldn't figure out what was going on until I was working on the site later on my 24" monitor, and it appeared. So I found a handy tip on the Answers forums to fix that and make the tagline display all the time.

/*Force the tagline under the logo to show up and indent it some to align with the logo on mobile and kinda on desktop*/
.logo-subtitle {
    display: block !important;
    padding-left: 4.7%;
}

The "I'm too good for standard links so I cause myself problems" Issue

This is pretty basic. I just wanted to use a border with a custom color rather than having the standard text-decoration: underline; on text links. However, I quickly found that this customization affected a lot of links (navigation, buttons, social icons) as well, so I had to go remove the underline from lots of things. I'm sure there's a better way to target standard text links only in the page body, but I never figured that out and this works so I'm not going to try to fix what ain't broke. While I'm at it, I customized how the active nav item displays to match this style.

While I was working on the nav, I noticed that Forte doesn't vertically align the nav items with the logo properly. Or, at least it wasn't in my case. So, the last line you see here is me adding to padding to the top of the nav items to push them down to even with the center line of the logo.

This is pretty basic. I just wanted to use a border with a custom color rather than having the standard underline decoration on text links. However, I quickly found that this customization affected a lot of links (navigation, buttons, social icons) as well, so I had to go remove the underline from lots of things. I'm sure there's a better way to target standard text links only in the page body, but I never figured that out and this works so I'm not going to try to fix what ain't broke. While I at it, I customized how the active nav item displays to match this style.
While I was working on the nav, I noticed that Forte doesn't vertically align the nav items with the logo properly. Or, at least it wasn't in my case. So, the last line you see here is me adding padding to the top of the nav items to push them down to even with the center line of the logo.

/*Customize body links*/
body div.sqs-block-content a {
  text-decoration: none !important;
  border-bottom: 1px solid #006fc1 !important;
}

/*Remove the underline on button labels that are links*/
a.sqs-block-button-element {
  text-decoration: none !important;
}
div.sqs-block-content a.sqs-block-button-element {
  border: none !important;
}
/* Remove the link border from the social icon block in the footer */
a.sqs-svg-icon--wrapper.facebook {border: none !important;}

/*****Change the color of the border line on nav items*****/
/*Add to Folder Titles*/
div#topNav nav ul li.active-link div a span {
  border-bottom-color: #006fc1 !important;
}
/*Add to non-folder page titles*/
div#topNav nav ul li.active-link a span {
  border-bottom-color: #006fc1 !important;
}
/*Remove from folder child links*/
div#topNav div.folder-child-wrapper ul.folder-child li a span {
  border: none;
}
/*****End nav item borders*****/

/*Add space to top of nav item text to line it up with logo better*/
div#topNav nav.main-nav ul.cf {
  margin-top: 0.9em;
}

The "I wish Squarespace would listen to my important opinion about how galleries should look" Issue

By far, the two coolest things in here are the full-width gallery blocks tweak that I talked about earlier and the custom cursor when hovering over a clickable thumbnail on a gallery page. Unfortunately, I've lost the link to the original source where I found out how to do the cursor thing, but this was one of them.

I know anyone halfway-seasoned with CSS is laughing at me for impressing myself by changing the cursor. It's easy. Well, you know what, I hadn't ever had the occosion to do it before and in this case it made a great improvement to the UX and damnit I like it!

/*Customize the collection detail box thing at the bottom of the homepage galleries*/
.collection-detail-wrapper a {
  color: #FFFFFF !important;
  background-color: rgba(050, 050, 050, 0.4) !important;
}

/*Customize the gallery page slideshow nav arrows*/
a.nav-button.prev-slide, a.nav-button.next-slide {
  color: rgba(255, 255, 255, 1) !important;

}
div.arrow-wrapper.left, div.arrow-wrapper.right {
  background-color: rgba(050, 050, 050, 0.4) !important;
}

/* Make in-page gallery blocks full-screen-width*/
body:not(.sqs-edit-mode-active) {
    &, #page-body-wrapper {
      overflow-x: hidden;
    }
    div.sqs-gallery.sqs-gallery-design-strip {
      padding: 17px 0;
      width: 100vw;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }

/* Make the cursor a zoom symbol when hovering over an image thumbnail on a gallery page*/
div.slide.sqs-gallery-design-strip-slide > img{
  cursor: -moz-zoom-in !important; 
  cursor: -webkit-zoom-in !important; 
  cursor: zoom-in !important;
}

The "Sweet somebody else already created an awesome testimonial slider" Issue

This was one of the better finds of the whole project. On a whim, I searched for a way to display something like a testimonials slider or slideshow in SQS and it turns out that not only has muno.space already created an awesome solution, but they also offered it free on their site. Now that's what I call community. And easy. This solution requires a bit of javascript, the CSS, and some HTML. Head over to their site for the full details. They deserve the traffic.

The only thing I really changed in here was some text styles and the height of the box the testimonials are in (the height: 309px !important; part). It was too tall for the short bits of text I was using.

/*****BEGIN TESTIMONIALS STYLES*****/
/* Style the custom testimonials slider */
 .testimonialSlider {
    position: relative;
  }
  .rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    li {
      -webkit-backface-visibility: hidden;
      position: absolute;
      display: none;
      width: 100%;
      left: 0;
      top: 0;
      &:first-child {
        position: relative;
        display: block;
        float: left;
      }
    }
    img {
      display: block;
      height: auto;
      float: left;
      width: 100%;
      border: 0;
    }
  }
  .rslides_tabs {
      list-style: none;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      -webkit-padding-start: 0;
      padding: 0;
      text-align: center;
        li {
        display: inline;
        padding: 0 10px;
        a {
          text-indent: -9999px;
          overflow: hidden;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
          border-radius: 15px;
          background: #ccc;
          background: rgba(0,0,0, .2);
          display: inline-block;
          _display: block;
          -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
          -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
          box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
          width: 6px;
          height: 6px;
        }
      }
      .rslides_here a {
        background-color: #222;
      }
    }

li#rslides1_s0, li#rslides1_s2, li#rslides1_s3, li#rslides1_s4 {
    height: 309px !important;
}
figure blockquote {
  font-family: proxima-nova !important;
  font-weight: 100 !important;
  font-size: 1.3em !important;
}

/*****END TESTIMONIALS STYLES*****/

The "Miscellaneous" Issues

And then there are the other odds and ends. The first thing you'll see is a bit of CSS to re-style the custom footer I was using. That's a bit of code that uses Javascript to create a dynamic copyright notice that always displays the current year, which you can find here.

The second thing I used to hide the business address from the bottom of the mobile navigation menu. That shouldn't be there in the first place. It looks stupid, so I made it go away.

The third thing is me being totally unhealthily obsessed with a single small detail. SQS' social links icons are different heights than their button blocks. I think this is necessitated by the fact the we can easily change the text size in button blocks, so their heights can't be constant. Whatever the case, I had a row with two buttons and one social icon in it, and the too-small icon on the right was killing me. I'd even already delivered the site and gotten paid, but I still spent about 45 minutes trying to figure out which stupid classes I needed to target to make the icon bigger. First, I made the circle part of the icon bigger. Then, I had to make the social network logo icon itself bigger to match. Finally, I customized the colors of the icon to make it match the rest of the site.

Moral of story: don't waste your time doing stuff like this.

/* Modify the custom dynamic copyright notice footer*/
div.bearsquared-footer {
  color: #999999;
  font-family: proxima-nova;
  font-size: 10pt;
  font-weight: 100;
  text-align: center !important;
}

/* Modify the business information section in the mobile nav menu*/
div#mobile-location {
  display: none !important;
}

/* Make the social icon on the contact page the same size as the buttons around it and customize the colors. */
section#page nav.sqs-svg-icon--list > a {
  height: 60px !important;
  width: 60px !important;
  background-color: #272727 !important;
}
/* And make the the f itself a different color*/
section#page svg use.sqs-use--icon {
  fill: #ffffff !important;
}
.socialaccountlinks-block .social-account-list a {
  color: #770000 !important;
}

I hope you've found this useful. Go have some fun in Squarespace's Custom CSS pane.

If you're way better at this than I am and know of a way to do something here more easily, I'd love to hear about it in the comments.

N.B. If you're not familiar with using custom code on Squarespace, do be careful as it can mess things up in unexpected ways with Custom CSS and code injection. That said, there's no better way to learn than to try things and troubleshoot them!