Stoverpix Projects — Design

Take a closer look at a few of our projects

Reach for Home Website in SquareSpace

Reach for Home (formerly North Sonoma County Services) worked with Graybird Foundation to create a new brand that more accurately represents the services rendered to the surprisingly large number of of homeless in the 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.

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.

Graybird Foundation Nonprofit Website

Graybird Foundation called on Stoverpix to build a website for the nonprofit LifeMoves (previously InnVision Shelter Network) after another vendor pulled out at the last hour. The project was delivered on-time, in-spite of the many custom requirements and fluid content changes along the way. From that, a partnership was born.  After partnering on several other projects, it was time to design and build a nonprofit website for Graybird Foundation.  The idea was to keep it simple, modern, clean and easy to update.

Tasks:

  • Content mapping / Flow
  • Wireframes
  • Static design of major pages for approval
  • Site build per design
  • Maintenance

About Graybird Foundation


Graybird Foundation donates marketing expertise and services to community, education and fine arts nonprofits in the San Francisco Bay Area.  GBF teams with their valued clients to identify, scope and deliver a bold marketing move. Stoverpix has partnered with Graybird Foundation to realize that mission by designing client nonprofit websites, developing creative and producing the web experience and all graphic assets.

Graybird/Stoverpix Clients


Cyren Botnet Cyber Threat Report

Cyren called on Stoverpix to design and produce a 28 page quarterly report about Botnet security. The report features many custom graphics to help illustrate the Botnet story, including 10 custom charts and 2 infographics. The infographics are also saved as standalone documents which are used for lead generation. The report is translated into two other languages and formatted in both Letter and A4 sizing.

At a Glance:

  • Cover design
  • 28 pages
  • 10 Custom Charts
  • 2 infographics
  • Screenshot integration
  • Editorial style images

About Cyren


Cyren’s cloud-delivered security services protect over 600 million web and email users against Internet threats. Cyren delivers this threat intelligence from the cloud in real time, wherever and whenever it’s needed – blocking over 130 million threats and detecting thousands of new, never-before-seen malicious files, URLs, IP addresses, and phishing sites.

Sample Report Pages


Berkeley Symphony Nonprofit Website

Berkeley Symphony Logo

The Berkeley Symphony folks worked with Graybird Foundation to do an interim design update to optimize the homepage and tighten up the overall page design sitewide. Stoverpix redesigned the homepage and implemented all changes to the WordPress theme on the live site after design changes were approved. We modified the process of updating the homepage to make it extremely simple, improved how events are implemented across the site and made substantial responsive rendering improvements. This is an interim update. Redesign to come later in 2017.

About Berkeley Symphony


The mission of Berkeley Symphony is to champion symphonic music as a living art form—creating live performances and educational programs that engage the intellect, spark the curiosity, and delight the spirit of Berkeley and surrounding Bay Area communities.

Features


Before & After

Berkeley Symphony was looking to do an interim redesign to tighten up the visuals, bring out the Calls-To-Actions, and to make easier to update. This needed to happen without any downtime of the live site. Our concentration was on the homepage, but included styling and improvements to the entire site. We separated out the CTA row under the hero as well as the Sponsorship and Events rows—which can now be easily added to any page and easily managed as single elements across the entire site. Responsiveness across the site was improved and optimized on the homepage especially. The Featured events are now front and center and designed so it’s easy to visually parse the event details.

NAMI San Mateo County Website

NAMI San Mateo County

Stoverpix was charged with interpreting the marketing strategies of graybirdfoundation.org into page designs which would facilitate the existing NAMI SMC content. The site was built in WordPress and all content was ported into the new site, reorganized per GBF specs so the content was simpler to browse, and made easier to update for the NAMI staff.

About NAMI San Mateo County


National Alliance on Mental Illness (NAMI) San Mateo County (SMC), was founded in 1974 as the Parents of Adult Schizophrenics.  The organization was subsequently renamed the Alliance for the Mentally Ill of San Mateo County, until its reformation in 1979 as the National Alliance on Mental Illness. NAMI SMC is a non-profit 501(c)(3) exempt organization governed by a dedicated volunteer Board of Directors.   The Board is comprised of family members who have a loved one with a mental illness and other interested parties involved in the local mental health community. As an independently operating nonprofit, NAMI San Mateo County receives no funding from NAMI National nor NAMI California.

Sample Website Pages


Cyren Phishing Cyber Threat Report

Cyren Logo

Cyren’s cloud-delivered security services protect over 600 million web and email users against Internet threats. Cyren entrusted Stoverpix to design and produce their Phishing Cyber Threat Report for 2016. This is a 26 page report which is a deep-dive into the intricacies of the inner workings of phishing, the history of phishing, and and how Cyren can protect clients from being a target  of the Phishing attacks.  Stoverpix is responsible for all aspects of design, production, output, and overall visual conception of an infographic, many custom charts and everything creative.

Surviving Skokie Movie Website

Stoverpix worked with Graybird Foundation to redesign the Skokie website to fulfill the marketing strategies of securing funding and make the film available to the largest possible audience. The site was previously built on the WIX platform which can be somewhat restrictive in terms of achieving some custom design goals. We took the best of what was already created and updated the overall look and feel, leverage responsive features in WIX, and added content to tell more of a story which includes features like:

  • Jack Adler page with extensive information about the star of the film
  • Praise section to post comments about the film
  • News/Events section where website visitors can view the calendar and coverage
  • Image gallery from Surviving Skokie festival screenings and events
  • Redesigned DONATE button and contributions page to easily seek contributions

 

About Surviving Skokie


Surviving Skokie is an award winning documentary by former Skokie resident Eli Adler about the provocative events of the 1970s, their aftermath, his family’s horrific experience of the Shoah, and a journey with his father to confront long-suppressed memories.

Eli Adler—a California-based professional cinematographer – started a quest to create his own movie and uncover details of his father, Jack Adler’s, painful past during the Holocaust. Inspired by a Chicago Tribune article and the 2009 opening of the Illinois Holocaust Museum & Education Center, the award-winning documentary is a ten-year labor of love.