Reach for Home Website in SquareSpace

Reach for Home (formerly North Sonoma County Services) worked with Graybird Foundation to create a new brand to more accurately represents the services rendered to the surprisingly large number of homeless in this normally perceived affluent community—which according to the 2016 Sonoma County Homelessness Census and Survey, nearly 3,000 adults and children live without housing. Three times higher than the national rate of homelessness.

SquareSpace was chosen as the website framework to facilitate ease of management for a generally non-technical staff and take advantage of the tightly integrated donation and commerce tool offerings. However there are design challenges within the SquareSpace infrastructure in that none of the template offerings accommodated all the design requirements we envisioned. StoverPiX did an extensive evaluation of all SquareSpace templates and settled on the Adirondack theme for it’s strong commerce features and secondary navigation options. Custom code was written by StoverPiX to enhance the theme and achieve the design requirements the theme was not designed for. See the bottom of this page for specifics.

Visit the Reach for Home Website

About Reach for Home

The purpose of the Reach for Home programs is to provide opportunities and support for clients to work toward self-sufficiency, independence and permanent housing. Clients team with a case manager to help access resources and services that will help them make necessary changes in their lives. Furthermore, our program offers clients the opportunity to gain self-confidence and to become self-sufficient.

How We Hacked (Enhanced) the SquareSpace Template

SquareSpace can be a slightly frustrating environment if you are a designer intent on having your design be explicit to your vision. Luckily they do allow you to re-style the CSS to a surprisingly large degree, and if you really want to get geeky, you can enter developer mode and rework the entire template—or create your own custom template. Below are a few shared CSS code snippets you can copy/paste which may be helpful for those interested in adding similar features to SquareSpace.

Modern full-width content area

Adirondack does not have an option for full-width content. In the case of the homepage, I made the entire page full width and the rest of the site is constrained to the standard 1180px but is never boxed in. This is becoming more and more required as screen resolutions get higher and expectations to have content fill the browser is more prevalent. It really is more of the modern design norm these days. Here is the code…. It was actually surprisingly simple in the end:

/*---make site non-boxed---*/
.outer-wrapper {
 width: 100%;   /*---make outer container width 100%---*/
}
#header {
 width: 100%;   /*---do the same with the header---*/
 padding: 12px 0;
}
.main-content-wrapper {   /*---constrain the content width only--optional---*/
 max-width: 1180px;
 margin: auto;
}
/*---banner adjustments---*/
.main-image-wrapper { /*---you need to also set the banner area to 100% width---*/
  top: 22px;
  width: 100%;
  max-width:100%;
  background-color:#000;   /*---make background black for black overlay effect---*/
} 
.main-image-wrapper img{
  opacity:.7;    /*---making the image 70% opacity shows 30% black under---*/
}

That’s all there is to it.

Colored row

This is one of the most frustrating things about SquareSpace. How to make a colored row in a page. Sure you can do it with a Single-Page template, but not with a Multi-Page template like Adirondack. The forums have some fairly obtuse solutions, but I this solution is much simpler.

Use the page CSS editor and not the site CSS editor. See the Advanced tab PAGE HEADER CODE INJECTION in the page panel. This eliminates having your row code effect other pages in the site and makes it much easier to target the row you want to color.
You MUST separate your row from all other rows. This is achieved by adding a full-width divider. SquareSpace will see these as new rows and can be targeted as such. Note that it may require a little trial and error as SqSp code can vary depending on template and how you created the page.
Inspect your code in chrome or similar and find the class for that row. This may be different than my example.
Add your custom code like below.

<style>  /*--wrap your css--*/
 .sqs-row:nth-child(2) {  /*--this is the second row in the page--*/
 background-color: #eee;  /*--add your color--*/
 margin:30px -40%;   /*--extend your row out beyond the browser--*/
 padding:30px 40%;   /*--bring the content back to normal--*/
}
 .sqs-row:nth-child(2) {   /*--if you want to add other padding and margin, do it separately--*/
 margin-bottom: -75px;
 padding-bottom: 60px;
}
</style>

Adding Title to the banner area

This is only a problem in Adirondack, as it by default adds your Page Title and Description below the banner area. I almost didn’t use the Adirondack template for this reason, but I did not want to give up the built-in secondary nav bar. Most templates are fine, but this may be a helpful example to you for controlling the banner text—and very useful for Adirondack.

/* --- Add Title Description to Banner ---*/
.page-titles--descriptions .collection-title-desc {   /*-- find the class for this --*/
 background-color: transparent;   /*-- remove any background color --*/
 margin-top: -300px;   /*-- move it all up into position - trial and error --*/
 height: 80px;   /*-- I set the total height just so it's consistent when line breaks --*/
 margin-bottom: 160px;   /*-- set where you want the page content to begin --*/
} 
/*---banner title shadow---*/
h1.page-title {
 text-shadow: 2px 2px 2px rgba(0,0,0,.5);  /*-- sure... why not add a little shadow to make the text pop --*/
 }

Make a DONATE button in the top nav

This again is an Adirondack problem. Many SqSp templates do have this option built in. This took some effort as other elements in the navigation are also affected.

/* --- Donate Button ---*/
.nav-wrapper ul li:last-child a {  /*--- target last item in nav ---*/
 border: 1px solid #56a17e;   /*--- all this is styling the button ---*/
 border-radius: 4px;
 background-color:#56a17e;
 color: #ffffff !important;
 padding: 12px 22px 8px;
 margin-bottom: -6px;
 margin-left: 12px;
}
.nav-wrapper ul li:last-child a:hover {
 background-color: #79d1a8;  /*--- hover color ---*/
}
.nav-wrapper ul li .folder-child-wrapper:last-child a {  /*--- remove style from the last-child dropdowns ---*/
 border: 0;
 border-radius: 0;
 background-color: transparent;
 padding: 0;
 margin-bottom: 0;
 margin-left: 0;
}
.nav-wrapper ul li .folder-child-wrapper:last-child a:hover {
 color: #577c92 !important;  /*--- including this ---*/
}

Other "Enhancements"

There were obviously many other custom enhancements made—not to mention all the responsive code. Here are a few other enhancements made to the site:

Dropdown navigation styling
Completely redesigned News widgets, posts and section
Custom Events section styling
Secondary navigation styling
Banner area with 70% opacity over black
Custom Gallery slider for homepage hero area
Customized Store
Custom FAQ accordion widget added.

Sorry, no code included for these enhancements. Feel free to contact me for more info.

← Interactive Cisco Product Tour Cyren Phishing Cyber Threat Report →