Header Widget | Communifire Documentation

Create a header with a welcome message. You can customize the header, subtitle, and background color to match your company brand and culture.

Add CSS Overrides

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

   /*Style for Header widget*/
   .axero-widget-full-header {
       color: #FFF;
       padding: 30px 0;
       margin: -30px 0 30px;
       background: radial-gradient(ellipse farthest-side at 100% 100%, #dbf6c8 20%, #1cafc6 50%, #012690 110%);
   }

3. Click Save CSS Overrides.

Add the Header Widget to a Page

1. Click System > Page Builder.
2. Edit a page.
3. Click the Layouts tab and add a 12 column layout onto the page.
4. Click the Widgets tab.
5. Drag a Raw HTML widget into the 12 column layout.
6. On the Raw HTML widget, click the gear icon > Edit properties.
7. In Title, enter Header. The widget title won't display on the page.
8. In the editor, paste the following code.

   <div class="container-fluid  axero-widget-full-header">
       <div class="container">
           <div class="row-fluid">
               <div class="span12 ">
                   <div class="axero-entity-formatted-content ">
                       <h3 style="text-align: center;">Welcome to the Communifire Intranet</h3>
                       <p style="text-align: center;">Get help, access company information, stay updated, and connect with coworkers.</p>
                   </div>
               </div>
           </div>
       </div>
   </div>

9. In line 6, replace Welcome to the Communifire Intranet with your own welcome message.
10. In line 7, replace Get help, access company information, stay updated, and connect with coworkers. with your own subtitle.
11. Click Save Widget.
12. Click Publish changes.
13. Click Go to page.

How to Customize the Header Background Color

1. Use a tool like Ultimate CSS Gradient Generator to generate gradient CSS code.
2. Copy the CSS code.
3. Go to Control Panel > System > CSS Overrides.
4. Locate the following line.

   background: radial-gradient(ellipse farthest-side at 100% 100%, #dbf6c8 20%, #1cafc6 50%, #012690 110%);

5. Replace this line with the code generated by the gradient tool. If the gradient is light, you may also need to change the line color: #FFF; to a darker color.
   
   Example resulting CSS:

   /*Style for Header widget*/
   .axero-widget-full-header {
       color: #FFF;
       padding: 30px 0;
       margin: -30px 0 30px;
       /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
       background: #b5bdc8; /* Old browsers */
       background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
   }

6. Click Save CSS Overrides.

Example result: