COVID-19 Emergency Fund Campaign Progress Indicator

1. Link to the campaign page where the Campaign Progress Indicator will be built.
2. Name of the giving form and link.
3. Name of the designation to be used.
4. Any specific color to be used (see Step 2 under Styling the Campaign Progress Indicator below for areas where we can change colors.

Setting up the Campaign Progress Indicator

1. Under Content Modules, drag and drop a Campaign Progress Indicator module into your main content area on the desired interior page.

2. Open the Campaign Progress Indicator module and select the desired Online Giving Campaign and Designation, if applicable.

3. Select your Goal Type and input your Goal Amount. Additionally, you can add adjustments to Donation Amount, Number of Donors, and Number of Donations, if needed (typically used for things like offline donations).

4. Choose your Start Date, End Date, and Time Zone, then click Next to proceed to the next step.

5. Under Template, click the New Template button.

6. Choose a title for your Campaign Progress Indicator template (e.g., COVID-19 CPI) and input it into the Template Title field.

7. Copy and Paste the following HTML into the Template Content area and then click Save.
   

   <div class="imod-progWidget defaultW2 overlayCircle">
       <div class="thumb">
           <div class="title">[TitleText]</div>
           <img src="[GraphicURL]" alt="[AltText]">
           <div class="giveBtn"><a href="[LinkURL]" class="expand">[LinkText]</a></div>
       </div>
       <div class="statsPanel">
           <div class="data-viz">
               <div class="vizWrapper">
                   <div class="bar">
                       <div class="value">[GoalPercentage]%</div>
                       <div class="progressBar" style="height:[ProgressPercentage]%"></div>
                   </div>
               </div>
           </div>
   				<!-- raised start -->
           <div class="statLeft">
               <div class="widgetStat amt-current">
                   <span class="label">[CurrentTotalLabel]</span><span class="value">[CurrentTotal]</span>
               </div>
           </div>
           <!-- raised end -->
           <!-- goal start -->
           <div class="statMid">
               <div class="widgetStat amt-goal">
                   <span class="label">Goal</span><span class="value">[Goal]</span>
               </div>
           </div>
           <!-- goal end -->
           <!-- donor start -->
           <div class="statsRight">
               <div class="widgetStat donors"><span class="label">Donors</span><span class="value">[DonorCount]</span>
               </div>
           </div>
           <!-- donor end -->
       </div>
   </div>

   Along with the progress percentage, the Campaign Progress Indicator shows three main stats: amount raised, goal, and amount of donors. If one of these stats is unnecessary for your purposes (or you are utilizing your Campaign Progress Indicator in a narrow content area and want to conserve on space) you can simply remove it from the Campaign Progress Indicator template. To do so, select and delete everything from the opening fund detail comment (e.g., <!-- goal start -->) to the ending fund detail comment (e.g., <!-- goal end -->).
8. Select the new Campaign Progress Indicator template you just created from the list of templates and click Next.
9. Populate the content for your Campaign Progress Indicator:
   • Enter a title for your campaign in Title Text
   • Leave Custom Landing Page URL blank; this field is not used in this Campaign Progress Indicator template
   • Upload an image under Graphic/Image to represent your campaign. Recommended images widths range from approx. 1140px to 825px depending on the width of the content area in which you're placing the Campaign Progress Indicator. When in doubt, aim for a wider image. Image height is variable but it is recommended to use a landscape-oriented image. Note: an image is not required. If you choose to not use an image, the Campaign Progress Indicator title text will sit in a smaller area with a black background.
   • Provide descriptive Alt Text for your image.
   • Provide button text under Giving Form Link text (Link to Giving Campaign). This button will link to the associated giving form you selected earlier in step 2.
   • Finally, leave Description; this field is not used in this Campaign Progress Indicator template. We recommend using a Mobile Ready Content Block on the fund page below the Campaign Progress Indicator to provide a description of the fund.
   • Click Save.

Styling the Campaign Progress Indicator

The Campaign Progress Indicator comes with basic colors built in. If you would like to update these colors, the following steps will help you do so.

1. Under Content Modules > Content, drag and drop a Content Block above the Campaign Progress Indicator on your fund page.

2. Open the Content Block, toggle from Design to HTML mode, and paste the following code into the Content Body area:

   <style>
       .imod-progWidget.overlayCircle .vizWrapper .bar .progressBar {background-color:blue;}
       .imod-progWidget.defaultW2.overlayCircle .statsPanel .data-viz .bar {background-color:pink;border-color:green;}
       .imod-progWidget.overlayCircle .giveBtn a.expand {background-color:red!important; color:white;}
       .imod-progWidget.overlayCircle .statsPanel {background-color:yellow;}
       .imod-progWidget .statsPanel {color: black;}
   </style>

   
   
   The written out colors seen in the code above correspond to the visualization below.
   
   
3. To change a color, simply replace the spelled out color in the code above with your desired HEX color value. For example, if you would like to change the yellow area to a light gray color, it would look like this:
   
   

   .imod-progWidget.twoCol .statsWrap {background-color:#f6f6f6;}

   where #f6f6f6 is the HEX value for light gray.
   
   
4. If you are happy with the default color that initially loaded when you set up the CPI, simply change the spelled out color to inherit to leave it as it was.