Quote of the Day Widget | Communifire Documentation

Display a motivational or inspirational quote every day. The Quote of the Day widget cycles through a list of quotes you enter. Use this widget to encourage and inspire your people.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Quote of the Day as the Template Name.
4. Select Rich Text as the Widget Type.
5. In the editor, paste the following code.

   <div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
   
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       
       <div class="axero-widget-content axero-widget-content-padded axero-entity-formatted-content quotes-{{WidgetID}}">
         {{{Contents}}}
       </div>
       
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
   		{{{FooterHTML}}}
           
       </div>
       {{/if}}
       
   </div>
   <script>
       var quotes = $(".quotes-{{WidgetID}}").children();
       var count = $(".quotes-{{WidgetID}}").children().length;
       //Hide all the quotes
       for(var i = 0; i < count; i++) {
           quotes[i].classList += "hide";
       }
       
       //Display one of the quotes based on the current date
       var today = new Date();
       var todayDate = today.getDate();
       var indexToDisplay = todayDate;
       if(todayDate > (count-1)) {
           do {
               indexToDisplay -= count;
           } while(indexToDisplay >= count);
       }
       quotes[indexToDisplay].classList.remove("hide");
   </script>
   
   
   

6. Click Save Template.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page. 
3. Click the Widgets tab.
4. Drag a Rich Text widget onto the page.
5. On the Rich Text widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. In the editor, enter a list of quotes. Place each quote on its own, single line.
   
   Example:
   
8. Click the Template tab.
9. Select the Quote of the Day template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.

Style the Widget

Banner Style

1. In Control Panel > System > CSS Overrides, add the following code.

   /*Quote of the Day widget - banner style*/
   .quotes-banner {
       color: white;
       background: #04518e;
   }
   
   .quotes-banner p {
       margin-bottom: 0;
       font-style: italic;
       text-align: center;
       font-size: 20px !important;
   }

2. Replace #04518e with your desired background color.
3. If your background color is light, also replace white with black .
4. Click Save CSS Overrides.
5. Click System > Page Builder, edit the page containing the widget.
6. Place the Quote of the Day widget in a 12 column layout.
7. Edit the Quote of the Day widget.
8. Click Advanced.
9. In Custom CSS class, enter quotes-banner .
10. Uncheck Show header.
11. Click Save Widget.
12. Click Publish changes.
13. Click Go to page.

Gradient Banner Style

1. Get CSS code for a gradient background using a tool like Ultimate CSS Gradient Generator.
2. In Control Panel > System > CSS Overrides, add the following code.

   /*Quote of the Day widget - banner gradient style*/
   .quotes-gradient-banner {
       color: white;
       background: #cedce7; /* Old browsers */
       background: -moz-linear-gradient(top,  #cedce7 0%, #596a72 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to bottom,  #cedce7 0%,#596a72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
   }
   
   .quotes-banner p {
       margin-bottom: 0;
       font-style: italic;
       text-align: center;
       font-size: 20px !important;
   }

3. Replace the 5 lines after color: white; and before the first } with your gradient code. Or keep the code as-is to create the look in the screenshot above.
4. If your gradient background color is light, also replace white with black .
5. Click Save CSS Overrides.
6. Click System > Page Builder, edit the page containing the widget.
7. Place the Quote of the Day widget in a 12 column layout.
8. Edit the Quote of the Day widget.
9. Click Advanced.
10. In Custom CSS class, enter quotes-gradient-banner .
11. Uncheck Show header.
12. Click Save Widget.
13. Click Publish changes.
14. Click Go to page.