Message Box Widget | Axero Documentation

Use the Message Box widget to highlight important announcements.

Add CSS Overrides

1. Click the gear icon > Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Message Box*/
   .axero-widget.axero-widget-message-box { 
       /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1a2168+0,0f133f+100 */
       background: #1a2168; /* Old browsers */
       background: -moz-linear-gradient(top, #1a2168 0%, #0f133f 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(top, #1a2168 0%,#0f133f 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to bottom, #1a2168 0%,#0f133f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2168', endColorstr='#0f133f',GradientType=0 ); /* IE6-9 */
       color: #fff;
   }
   .axero-widget.axero-widget-message-box .axero-widget-content {
       padding: 0 20px 15px;
   }

3. Click Save CSS Overrides.

Add the Header Widget to a Page

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 Raw HTML widget onto the page.
5. On the Raw HTML widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. In the editor, paste the following code.

   <div class="axero-widget axero-widget-message-box text-center">
       <div class="axero-widget-header">
           <h3>Announcement!</h3>
       </div>
       <div class="axero-widget-content axero-entity-formatted-content">
   <i class="icon-bolt icon-2x"></i>
   <h3>Make Sure You Turn in Your Open Enrollment Forms by Friday</h3>
   <p>It's that time of year again. Health insurance is important to stay on top of. See Peggy in HR for questions.</p>
   <p><a class="btn btn-success" href="#">Post Your Questions</a>&nbsp;&nbsp;<a class="btn btn-success" href="#">Download Forms</a></p>
       </div>
   </div>

8. Click Save Widget.
9. Click Publish changes.
10. Click Go to page.