Work Apps Widget | Axero Documentation

Use the Work Apps widget to link to features, content, and external systems.

Add CSS Overrides

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

   /*Style for Work Apps widget*/
   .ax-action-buttons{padding:20px 20px 10px;}
   .ax-action-buttons ul{margin:0 0 4px;padding:0;}
   .ax-action-buttons li{margin-bottom:6px;}
   .ax-action-buttons li a.thumbnail{text-align:center;background-color:#fafafa;color:inherit;background-image:-moz-linear-gradient(top,#fff,#f2f2f2);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f2f2f2));background-image:-webkit-linear-gradient(top,#fff,#f2f2f2);background-image:-o-linear-gradient(top,#fff,#f2f2f2);background-image:linear-gradient(to bottom,#fff,#f2f2f2);background-repeat:repeat-x;border:1px solid #dfdfdf;box-shadow:0 0 0 transparent;padding:10px 0;font-weight:400;}
   .ax-action-buttons li a.thumbnail .thumb-icon{display:block;}
   .ax-action-buttons li a.thumbnail .thumb-icon i{font-size:20px;}
   .ax-action-buttons li a.thumbnail .thum-word{font-size:12px;}
   .ax-action-buttons li:nth-child(3n+1){margin-left:0;}
   .ax-action-buttons li a.thumbnail:hover{text-decoration:none;}

3. Click Save CSS Overrides.

Add Template

1. Click System > Page Builder.
2. Add or edit a Page Builder page.
3. Click the Layouts tab and add a layout onto the page.
4. Click the Widgets tab.
5. Drag a Raw HTML widget onto the page. This template is best used in wider columns - 6 or greater.
6. On the Raw HTML widget, click the gear icon > Edit properties.
7. Update the widget Title.
8. In the editor, paste the following code.

   <div class="axero-widget">
       
       <div class="axero-widget-header">
           <h3>Work Apps</h3>
       </div>
       
       <div class="axero-widget-content">
   
   <div class="ax-action-buttons">
     <ul class="thumbnails">
     <li class="span4">
       <a href="/people/pages" class="thumbnail">
         <span class="thumb-icon"><i class="icon-group"></i></span>
         <span class="thum-word">People</span>
       </a>
     </li>
         <li class="span4">
       <a href="/spaces/1/human-resources/files" class="thumbnail">
         <span class="thumb-icon"><i class="icon-folder-open"></i></span>
         <span class="thum-word">Documents</span>
       </a>
     </li>
         <li class="span4">
       <a href="/spaces/1/human-resources/calendar" class="thumbnail">
         <span class="thumb-icon"><i class="icon-calendar"></i></span>
         <span class="thum-word">Calendar</span>
       </a>
     </li>
     <li class="span4">
       <a href="/spaces/1/human-resources/wiki/view/72/company-handbook" class="thumbnail">
         <span class="thumb-icon"><i class="icon-copy"></i></span>
         <span class="thum-word">Policies</span>
       </a>
     </li>
         <li class="span4">
       <a href="/spaces/1/human-resources/wiki/view/72/company-handbook" class="thumbnail">
         <span class="thumb-icon"><i class="icon-book"></i></span>
         <span class="thum-word">Procedures</span>
       </a>
     </li>
         <li class="span4">
       <a href="/spaces/1/human-resources/articles" class="thumbnail">
         <span class="thumb-icon"><i class="icon-file"></i></span>
         <span class="thum-word">News</span>
       </a>
     </li>
   </ul>
   </div>
   
   </div>
   </div>

9. Modify the template to use your own links and icons.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.

Customize the Work Apps Widget

Change Link and Link Text

Each item in the Work Apps widget starts with <li> .

• To update an item's link, modify the href attribute of the a element.
• To update an item's text, modify the text that appears between <span class="thum-word"> and </span> .

Change Icons

1. Search for an icon in FontAwesome.
2. Click the icon.
3. Click the icon HTML to copy it to your clipboard.
4. In the Raw HTML widget, find the line you want to update.
5. Replace the i element with the code you copied. (For example, replace <i class="icon-group"></i> with <i class="fas fa-paperclip"></i> )

Add Links

The format for a link is:

<li class="span4">
    <a href="{URL}" class="thumbnail">
      <span class="thumb-icon"><i class="{ICON_CSS_CLASS}"></i></span>
      <span class="thum-word">{LINK_TEXT}</span>
    </a>
  </li>

Add new links on new lines, in the section after <ul> and before </ul> .