Work-apps widget | Community Development | Sandbox ConnAct

Use the Work Apps widget to link to features in your top level content or space content.

How to Create

Go to  Page Builder and edit the page you want to add this widget to. Then drag a RawHTML widget onto the page. Edit the widget properties and type Work Apps for the widget Title and copy/paste the HTML below into the widget RawHTML textbox. You can edit the HTML as you need.

HTML

<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>

CSS

Navigate to Control Panel > System >  CSS Overrides .  Copy/paste the CSS below into the CSS Overrides window. Then click Save CSS Overrides.

.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;}