The Quartz 2 and Ruby 2 Themes provides you with an easy way to customize your REACH site for your organization’s needs.

To determine which Theme you are using, go to Settings > Themes. Your current Theme will show the Status of Active. Next to your Active Theme, click Actions > Edit.

For more information about using REACH Themes, visit our Themes article. When editing and updating REACH Themes, a basic knowledge of HTML and CSS is recommended. 

Note: Both the Quartz 2 and Ruby 2 Themes are based on Bootstrap 3, you can find documentation here: https://getbootstrap.com/docs/3.3/css

Theme Customization Options Layout Template#

The Layout Template will allow you to make updates to the main container of your website including the Navigation Area, Main Container, and Footer Area. Most basic customization needed will not involve the Layout Template.

Index Template#

The index is the Home Page of your REACH Website. This is where you can edit and remove those sections.

This can be done by editing the Index Template of your Active Theme.

• Go to Settings > Themes
• Next to your Active Theme, click Actions > Edit
• Next to your Index Template, click Edit

The template defaults to show all sections including:

HOME PAGE HERO IMAGE – default – Banner Image can be added under Settings > Portal Setup
TOP BANNER – section_banner_top partial – Call To Action can be added under Settings > Portal Setup
COUNTERS – section_counters partial
CONNECT WITH US – section_social partial
SPONSORSHIPS – section_sponsorships partial
SPONSORSHIP PROGRAM – section_sponsorship_information partial
RECENT NEWS – section_recent_news partial
CAMPAIGNS – section_campaigns partial
TEAM – section_team partial
BOTTOM BANNER – section_banner_bottom partial – Uses information From Call To Action
CONTACT US – section_contact_us partial

Partial Sections can be removed by deleting the ‘include’ information for the partial. For example, if you do not want to show the TEAM area, you would delete the following lines from the Index Template:

  <!– TEAM SECTION –>
  {% include ‘section_team’ %}
  <!– END TEAM SECTION –>

You can also reorder the sections by changing the order the partials are shown on the page. Make sure to copy / delete / paste the full partial information. For example, to place the Campaigns before the Recent News you would change:

  <!– RECENT NEWS SECTION –>
  {% include ‘section_recent_news’ %}
  <!– END RECENT NEWS SECTION –>

  <!– CAMPAIGNS SECTION –>
  {% include ‘section_campaigns’ %}
  <!– END CAMPAIGNS SECTION –>

To this order:

  <!– CAMPAIGNS SECTION –>
  {% include ‘section_campaigns’ %}
  <!– END CAMPAIGNS SECTION –>

  <!– RECENT NEWS SECTION –>
  {% include ‘section_recent_news’ %}
  <!– END RECENT NEWS SECTION –>

To edit information in each section, go to the Partial for the section. For example, to edit your Team information, edit the section_team partial.

Colors, Logo, Banner/Hero Images #

Your colors, logo and banner/hero images (on your Home Page, Sponsorships, Campaigns, Places and Project pages) used for your REACH Quartz Version 2.0 Theme can be customized in Settings > Portal Branding. View our Portal Branding article for more information.

Custom CSS#

Most of the CSS information for your Quartz Version 2.0 Theme is set using the quartz_css partial. However, many section partials include Style information at the top of the partial needed for most updates. For example, you can change the background color and font color of the Recent News Section by accessing the ‘section_recent_news’ partial. 

 At the top of the partial is information on the current style settings starting with:
<!– Style for the Recent News Section Can Be Updated Below –>

By updating the style area on the partial, you do not need to add other CSS elsewhere.

We do not recommend changing information on the quartz_css (Quartz 2) or the ruby_css (Ruby 2) partials. Instead, use the ‘custom_css’ partial to add custom CSS for other changes not available on the partials.

Team Section on Home Page#

Information to update your Team Information is included in the section_team partial. Included is information on how to change the images for your Team. The section can be removed from your Index Template as needed.

Maps for Place Locations#

Your Places Template includes a Location Map of all Places added to your REACH account. Place location can be added by editing the Place in your REACH Account. The map will only display if a location is set for at least one Place.

Each individual Place Page also includes a map if the location information is available. The Map can be removed from the Places Template and the Place Template by deleting the map partial. 

To remove the map from the Places Template remove the following lines:

  <!– PLACES MAP DISPLAY –>
  {% include ‘map_places’ %}
  <!– PLACES MAP DISPLAY –>

The Map is also included in the Project Template to display the location of a Project that has been linked to a Place. A Project can be liked to a Place by editing the Project in your REACH Account.

To remove the map from the Project Template remove the following lines:

  <!– PROJECT MAP DISPLAY –>
  {% include ‘map_project’ %}
  <!– PROJECT MAP DISPLAY –>

404 Page#

Both the Quartz 2 and Ruby 2 REACH Themes includes a 404 error page for visitors that try to access a URL not included in your REACH site. The 404 Template includes a message that can be updated to include a list of available sponsorships (chosen at random). The message and sponsorship information can be updated by editing the 404 Template. Learn more by reading our 404 Error Page article.