Symphony Resources
Quick Start Guides
Symphony Quick Start Guide
This is the whole 32 page document intended to address all levels of employees and staff (leadership, divisional staff and local units).
Wufoo Quick Start Guide
Instructions on how to create and duplicate forms.
For Divisional Webstaff
Video Tutorials
Firstly, we highly recommend you view the Symphony videos the Metro Division made before watching the videos in the list below, which were created by USW (doesn’t include a lot of our custom development).
HTML Support
Symphony Style Guide
Obtain HTML snippets for brand colors, button styles, donation arrays and other utilities built to match the Symphony aesthetic.
Twitter Bootstrap (v.3)
Symphony leverages many utilities from Twitter Bootstrap, primarily “the grid” (no, not like Jeff Bridges in Disney’s 1982 cult classic Tron). This gives you a ton of flexible, responsive options when laying out content on HTML enabled Metro Unit sites. “I want 4 columns at full width, 2 columns on tablets, and full with columns on mobile”, stuff like that!
Icons
Codepen Link to Symphony’s Icons
Additionally, you’re free to use any icons on Font Awesome!
Note: Font Awesome icons can be edited through the .fa CSS class (or individual icons can be edit through their specific CSS class). Try to match these icons to our internal, Symphony icons (such as color).
HTML for a Ministry Landing Page (Metro Unit Sites)
This gives you the consistent layout for the user across all 12 ministry grid items. You will need to update content and images!
Digioh Lightboxes
Short-term, fundraising efforts that align with your local, cross-platform campaigns. Maximum of 1 per month, not exceeding 5 days total/mo. Requested and set up by THQ staff (Brian).
Purposes: Email subscriber acquisition, Driving revenue on website during campaigns
Note: You’ll need to use source codes in the donation form link.
Source code one should be “WebsiteModal” followed by the date
Example = WebsiteModal01012020
Relative Path Theater Images
Scenario:
You want to syndicate a theater image, BUT want it to resolve to a relative path, a page on the local sites. Use this snippet that uses JQuery to append a button after the last div of the theater image.
In the Weeds:
Baked into the header of each Symphony site is a javascript variable, fullSiteDomain. Using JQuery we can append anything to the end of the variable. This is how we achieve relative path buttons. Within the snippet, there’s an <a> tag with this inside: href=”‘+ fullSiteDomain +’/overcome-poverty”. In this case, /overcome-poverty is the example, but it can be anything page alias that all your sites have, such as a ministry grid item, /who-we-are, or a story you syndicate across your division. If any of the sites don’t have the page, it will resolve to a 404 page.
Steps/Notes:
- Design the aesthetic of the theater image without a button with the WYSIWYG editor, then toggle on/enable HTML.
- In the HTML editor, add <script>$( “.finalLine” ).append( ‘<div><a class=”btn btn-red btn-solid” href=”‘+ fullSiteDomain +’/overcome-poverty”>Overcome Poverty</a></div>’ );</script>
- This script calls a CSS class, finalLine. You’ll need to add to the last div, this snipped appends a div after the div that has the CSS class it calls. You need to add a specific class to keep this button restricted to this theater slide (otherwise it will append the same button across your carousel). If you want to add two slides with relative paths, these classes need to be unique (like “finalLine2”)!
Here is an example of a full relative path theater image:
<div class=”hero filter filter-black-blue to-right”> <div class=”heroImage-container”> <img src=”https://s3.amazonaws.com/usc-cache.salvationarmy.org/2c25a112-4477-4f40-b560-befc069bb3f3_stuff-the-bus.jpg” class=”heroImage lazyload” alt=”Help start the school year off right”> </div> <div class=”heroText-container”> <div class=”heroText u-textCenter”> <h1 class=”heroText-headline”>Ways to Give</h1> <p class=”heroText-subheadline finalLine”>Dynamic Ways to Give button below!</p> </div> </div> </div> <script>$( “.finalLine” ).append( ‘<p><a class=”btn btn-red btn-solid” href=”‘+ fullSiteDomain +’/ways-to-give”>Learn More</a></p>’ );</script>
- IMPORTANT: if you toggle back to WYSIWYG, you will lose the QJuery snippet, this must be deployed from the HTML setting, not WYSIWYG to work correctly! (This warning is displayed in the editor)
- IMPORTANT: Pasting the snippet in from a text editor could reformat the apostrophes and quotation marks, causing the code to fail! You might have to re-add these values in the editor
- Original theater image taken from MDQA Conductor
Auto Scroll Elements
Have a button scroll to a section of your webpage:
<a class=”btn btn-red btn-solid” href=”javascript:void(0)” onclick=”symphony.site.animateScrollTo($(‘#services‘))”>State Relief Efforts</a>
You’ll notice JS voids the href tag, and there is onclick to scroll to an ID called Services. In this example you’d add id=”services” to a div to have a button at the top of the page (or wherever you put it) scroll down the the corresponding section.
View example by clicking “Find your local updates” on https://centralusa.salvationarmy.org/heartland/covid-19-information
Custom Development
“By the Numbers” Infograpic grid
- Uses Bootstrap rows/columns so it plays nice with Symphony (which also uses Bootstrap).
- The JQuery added makes all the boxes have equal height, which makes the grip more aesthetically pleasing.
