Quartz Version 2.0 Theme Overview

The Quartz Version 2.0 Theme allows you an easy way to customize your REACH site for your organization's needs. When editing and updating REACH Themes, a basic knowledge of HTML and CSS is recommended. 

The Quartz Version 2.0 Theme is based on Bootstrap 3, you can find documentation here: https://getbootstrap.com/docs/3.3/css

Quartz Version 2.0 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 involved the Layout Template.

Index Template

The index is the Home Page of your REACH Website. 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.

CSS Information: Colors and Logo

Your Logo image and many colors for your REACH Quartz Version 2.0 Theme are set using your Portal Design Settings under Settings > Portal Design.

Using the Portal Design Area, you can set the following:

Logo Image - used for Navigation/Menu Area
Background Color - Only used on the Donation Page and Pages Supporters access once logged in
Font Family - Only used on the Donation Page and Pages Supporters access once logged in
Default Text Color - Paragraph/Body font color
Heading Text Color - h1, h2, h3, h4, h5, h6 font color
Link Text Color - Links listed on a page (not the buttons)
Content Wrapper Background Color - Only used on the Donation Page and Pages Supporters access once logged in
Message Background Color - Use as Accent Background and on  Donation Page and Pages Supporters access once logged in
Default Header Background Color - Use as Header Background 
Default Header Text Color - Use as Header Text Color
Site Name Color - Used for Site Name in Menu if no Logo is present
Menu Background Color - Menu Background Color
Menu Link Text Color - Navigation / Menu Text Color
Button Color - Background of Buttons
Button Text Color - Text Color of Buttons
Button Hover Background Color - Hover Background of Buttons
Button Hover Text Color - Hover Text Color of Buttons

Banner/Hero Images And Custom CSS

Your Banner Images for your Home Page, Sponsorships, Campaigns, Places, and Project Pages are set using your Portal Setup Settings under Settings > Portal Setup.

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 recommend not changing information on the quartz_css partial. 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. 

For example, to remove 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.

The map can be removed by deleting the map_project partial on the Project Template:

  <!-- PROJECT MAP DISPLAY -->
  {% include 'map_project' %}
  <!-- PROJECT MAP DISPLAY -->

404 Page

The Quartz REACH Theme includes a 404 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 and a list of a few random available sponsorships. The message and sponsorship information can be updated by editing the 404 Template.

If you need additional assistance with your REACH Theme, we do offer site design customization. Email us to request a quote. 

REACH20200908

Feedback and Knowledge Base