← Showcase Site Components

Testimonials

This component is used for FIs to include statements from their employees, members, whoever they’d like to vouch for their customer service/exemplary performance as a financial institution. It has spaces for an optional headshot and a text space for a quote.

This component includes a SECTION on the existing homepage template, and a SECTION on the sidebar of subpages.

Homepage

JSON Files

  1. package.json - For the homepage section, all the necessary pieces in the mustache are controlled by the package.json file. Make sure that your componentTestimonial variable in the package.json file is set to true if things aren’t working!

  2. -make.json - Since this is a component that adds content areas to the homepage, make sure to run gulp make-everything, grab the list of content areas from the templates.json that is generated, and paste them into the home template in your -make.json file.

Mustache Files

  1. src > templates > _partials > _testimonial.mustache - The PARTIAL which is included on the homepage.

  2. src > templates > home.mustache - The homepage, which includes a div with an ID of testimonialSlider that wraps the slider for your theme. If you are using the most recent showcase files, this should be automatically un-commented based on the true value that you set in your package.json. If you’re working with older files, here is information on the placement of the testimonial slider for each theme:

    • Alabaster: Testimonials are between the 2-column slider (or the featured rates, if they’re using that component as well) and the 3-column card ads. testimonialSkip div wraps around the 3-column card ads.
    • Rosewood: Testimonials are between the 2-column sub-ads and the e-mail signup. testimonialSkip div wraps around the email collection form, so may need to be moved if client is not using the email collection form.
    • Midnight: Testimonials are between the sub-ads with the accordions, and the slider of ads with the large circle image. The testimonialSkip div is around the latter.

Script

  1. src > scripts > banno-functions.js - If left empty, the testimonial can cause extra blank space on the homepage. This script determines if there’s any content in the testimonial, and if not, removes that extra space.

  2. src > scripts > script.js - Inside the window on load function, in the ELSE. Adds/removes a class from the testimonial component depending on if an image has been placed for the background area.

  3. src > scripts > sliders.js - There are TWO instances for this slider, one inside the IF and one inside the ELSE. Make sure to uncomment both of them, because one works when the slider is in the CMS (and makes it easier to edit) and one works on the published page.

Styling

  1. src > scss > themes > _general.scss - Generalized styling for both the slider component on the homepage, AND the cell component that goes within the sidebar on subpages.

  2. src > scss > themes > [yourtheme].scss - Includes specific styling based on the theme for the testimonial component AND the cell that goes within the sidebar on subpages.

  3. src > scss > cms.scss - Styling to make sure that the testimonial slider is as easy to edit as possible in the CMS.

Subpage

Mustache Files

  1. src > templates > _partials > subpages > sidebar.mustache and possibly src > templates > _partials > subpages > sidebar-members.mustache - The sidebar area for the subpages. You will need to un-comment the mustache partial call for the testimonial cell so that it’s included when you run make-everything.

  2. src > templates > _partials > subpages > testimonial-cell.mustache - The actual content area for the testimonial cell.

Styling

  1. src > scss > sections > home.scss - Generalized styling for both the slider component on the homepage, AND the cell component that goes within the sidebar on subpages.

  2. src > scss > themes > [yourtheme].scss - Includes specific styling based on the theme for the testimonial component AND the cell that goes within the sidebar on subpages.

Example Sites

Alabaster

Rosewood

Midnight