helpscout-theme

HelpScout Theme

This is the codebase for the Greenspace HelpScout theme. Our HelpScout sites are configured to point to the stylesheet and javascript code from this repo, hosted using Github Pages directly from the master branch.

Helpscout Settings

Custom Stylesheet URL:

https://helpscout.greenspacehealth.com/css/style.css

<head> code:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://helpscout.greenspacehealth.com/sites/<site>/constants.js" ></script>
<script src="https://helpscout.greenspacehealth.com/scripts/script.js" ></script>

Images:

Code Structure

CSS

All the CSS code is written with overrides in mind. So the structure and selector specificity matches that of the original css selector code rendered by HelpScout. Custom CSS is of course added, and closely matches the Greenspace styleguide.

JS

The JS code is written in way to as to work generally across multiple HelpScout sites.

Sites

The configuration (content) and images is defined for each site in the /sites directory. This allows each site to have different content. Eventually the visual theme can be further customized for each site.

constants.js

This is where the modifications for nav menu items and categories are. The category ID’s are grabbed from the rendered source code that HelpScout provides.

The menu ID’s are a little trickier, as we also hide the primary navigation the helpscout renders. To get the ID’s, we can simply temporarily disable javascript, view the source, get the ID’s, then apply them in the site-specific constants.js file.

Deployment

Changes made to the master branch are automatically deployed after a few seconds using Github Pages.