Stoverpix Projects

Take a closer look at a few of our projects

Golden State Youth Orchestra Website

Golden State Youth Orchestra Logo

Stoverpix worked with Graybird Foundation to launch a new, modern and responsive website for Golden State Youth Orchestra — formerly El Camino Youth Symphony and migrate the content from the previous dated CRM platform into WordPress and leverage the power and page building capabilities of the DIVI theme. 

As an event driven learning organization we leveraged the Events Manager plugin to achieve very specialized event pages, listings and Feature event rows with precision across devices like on the homepage. Stoverpix created easy to use templates (custom library modules) to quickly and easily implement and manage complex design structures via one post id change and a few image swops. Less than 1 minute to change the event rows to a new event.

Notable features of the website include:

  • Ken Burns style hero banner
  • Homepage events feature rows with built-in, auto optimized features which completely reformats content for mobile optimization. Try it out… just make your browser window narrow to experience.
  • Custom WooCommerce Store integrated with events as well as Tchotchkes
  • Integration with the existing CRM to retain membership data with existing members.
  • Customized event listing pages by all events, ensemble, location, date, etc…
  • Customized people section for Board, Conductors, Coaches, and Staff etc…
  • Social sharing sticky sidebar to share any page to every shareable Social Network
  • Easy to browse tabbed Audition Requirements tool for quick referencing information about all the ensambles.
  • Branded Media player
  • Alumni section with praise and stories back to 1963 and form for Alumni to interactively post their personal experiences.
GSYO Home Screen
GSYO Home Screen

About GSYO


Golden State Youth Orchestra (GSYO) previously El Camino Youth Symphony (ECYS) is a 501(c)(3) nonprofit organization founded in 1963 by William Galbraith, a young maestro who envisioned an orchestra that would give youth musicians the opportunity to perform challenging standard professional repertoire.

In 1965, Robert Sayre, then principal cellist with the San Francisco Symphony, became one of the first professional musicians to perform with GSYO. Since then, GSYO has continued to invite artists of international stature to perform as guest soloists with our highest level ensemble Senior Symphony. 

Feature Screenshots


Event Ticket Page
GSYO Tickets Page
Store Page
GSYO Store Page
Programs Overview Page
GSYO Programs Page
Ensemble Page
GSYO Ensemble Page
Ensemble Event List Page
Ensemble Event List Page

Foundation for a College Education Website

Golden State Youth Orchestra Logo

Stoverpix worked with Graybird Foundation to launch a new, modern and responsive website for Foundation for a College Education with all new simplified and and concise content using a new design by Mark Chaillie.  The homepage design has a special challenge by specifying the navigation bar to be on the bottom of a fullscreen hero banner which scrolls up and sticks to the top after scrolling down to the lower portion content. 

One way to get more engagement with the website is to create a robust event calendar for all classes and other events for all the different meetings, tutoring sessions, testing, field trips and more for 22 different groups.

Notable features of the website include:

  • Easy to update interactive, fullscreen hero banner
  • Homepage rows with visually engaging parallax effects which elegantly reformat for different devices 
  • Social sharing sidebar to easily share any page on the site across all social networks.
  • Full month calendar with option to view by any category like tutoring  
  • Customized event listing pages by all events, category, location, date, etc…
  • Customized Team section for Staff Members and Board Members which auto generates when adding new members
  • Google Translator to change the language to Spanish (or technically most any language)
  • Special top level pages with photo grid linking to content in that section
  • Easy to implement testimonials on various pages.
Fullscreen Top Portion Homepage
FCE Home Screen
Lower Portion Homepage
FCE Home Lower Screen

About FCE


Foundation for a College Education’s mission is to increase the number of students of color from East Palo Alto and similar communities who graduate from a four-year college or university.

The vision of FCE is to create a community where higher education is attainable. By engaging both students and parents in our work, we aim to create a community of learners who are armed with the right tools and information. Together, they play a pivotal role in sharing this information with other families about how best to take advantage of school resources and navigate the college admissions process, thus catalyzing change in the larger community.

Feature Screenshots


Top Level Page
Top Level Page
Full Calendar Page
Full Calendar Page
Event Category Page
Event Category Page
Single Event Page
Single Event Page
Team Page
Team Page

Berkeley Symphony Nonprofit Website

Berkeley Symphony Logo

Stoverpix worked with Graybird Foundation to launch a new modern and responsive website for Berkeley Symphony Orchestra with a requirement to automize the flow of data from their ticketing vendor to the calendar but still allow the ability to add more content like videos, Venue information, nearby dining, parking, expanded artist info, composer bios and more. 

I use the Events Manager plugin as my go-to calendar plugin because of the ability to style the content in any way I can imagine—also there is no yearly fee for the plugin which is important for non-profits. It’s super easy to manage the templates around whatever html/css code you want as a wrapper so there is no limit to how you style the content.

Notable features of the website include:

  • Ken Burns style hero banner
  • Homepage events feature rows with built-in, auto optimized features which completely reformat content for mobile optimization. Try it out… just make your browser window narrow to experience.
  • Easy auto-import content from ticketing partner to events section
  • Total control to build upon the auto imported content for event pages
  • Customized event listing pages
  • Customized people section for composers, artists, staff and more.
  • Partner dining section as well as easy to manage Season Sponsor module
  • Social sharing sticky sidebar to share any page.
  • Popup subscribe feature which only deploys once after scroll to bottom of page so as not to be overly obnoxious.
  • Special musicians login section

 

Graybird Foundation Website
Graybird Foundation Website

About GSYO


Golden State Youth Orchestra (GSYO) previously El Camino Youth Symphony (ECYS) is a 501(c)(3) nonprofit organization founded in 1963 by William Galbraith, a young maestro who envisioned an orchestra that would give youth musicians the opportunity to perform challenging standard professional repertoire.

In 1965, Robert Sayre, then principal cellist with the San Francisco Symphony, became one of the first professional musicians to perform with GSYO. Since then, GSYO has continued to invite artists of international stature to perform as guest soloists with our highest level ensemble Senior Symphony.

Reach for Home Website in SquareSpace

Reach for Home — Housing for People. Skills for Life.

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.

Surviving Skokie Movie 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.

Reach for Home CSS Editor
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 — A nonprofit website for nonprofits

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
Graybird Foundation Nonprofit Website

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


LifeMoves Website

LifeMoves Logo

LifeMoves is formerly InnVision Shelter Network. LifeMoves programs combat homelessness by teaching comprehensive life skills that help clients achieve long-term self-sufficiency, and effectively break the cycle of homelessness. Stoverpix was hired to produce the the website via designs supplied by BrewLife of San Francisco. The entire site had to be rebranded and included a few complex functionality like the Locations tool which integrates Google maps with content pages in a custom interface.

LifeMoves Website

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.

NAMI San Mateo County Website

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


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

 

Surviving Skokie Movie Website — Jack Adler Page

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.

BEA Liquid Thinkers Microsite (Flash)

Bea Logo

In 2007 if you wanted to do anything interactive, Adobe Flash was your only real option. The goal here was to create an immersive experience which tells the story of industry leaders which epitomizes “Liquid Thinking”. The folks at 11 Design did a fabulous job interpreting the concept into a User Experience which epitomizes the liquid concept interactively.

BEA Liquid Thinkers Website

BEA Exec2Exec Audience Microsite

BEA Logo

Executives are big picture people. Keep it high-level and get straight to the point. This is an edition of the site which focuses on SOA. This contains a Flash embed which plays a video and contains a scrolling content bar—not iOS mobile friendly. Keep in mind that in 2006 we were much more width constrained so zoom in on your browser if you start feeling claustrophobic.

BEA Exec2Exec SOA Website

Pin It on Pinterest

Share This