Launchpad Widget - Small | Axero Documentation

The Launchpad is a custom widget that you can use to provide hyperlinks to launch into your other systems.

Add CSS Overrides

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

   /* Launchpad Widget - Small */
   .axero-launchpad-small .ax-app-logos {
       padding: 20px 20px 10px;
   }
   .axero-launchpad-small .ax-app-logos ul {
       margin: 0 0 4px;
       padding: 0;
   }
   .axero-launchpad-small .ax-app-logos li {
       margin-bottom: 10px;
       margin-top: 0;
   }
   .axero-launchpad-small .ax-app-logos li a.thumbnail {
       color: inherit;
       text-align: center;
       background: #fff;
       border: 1px solid #dfdfdf;
       box-shadow: 0 0 0 transparent;
       padding: 10px 0;
       font-weight: 400;
       height: 100px;
       position: relative;
   }
   .axero-launchpad-small .ax-app-logos li a.thumbnail .thumb-icon {
       display: block;
   }
   .axero-launchpad-small .ax-app-logos li a.thumbnail .thumb-icon img {
       margin: auto;
       max-width: 74%;
       max-height: 55%;
       width: auto;
       position: absolute;
       top: -15px;
       left: 0;
       right: 0;
       bottom: 0;
   }
   .axero-launchpad-small .ax-app-logos li a.thumbnail .thum-word {
       font-size: 12px;
       background: #f9f9f9;
       border-radius: 0 0 4px 4px;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       border-top: solid 1px #dfdfdf;
       padding: 3px 0;
   }
   .axero-launchpad-small .ax-app-logos li a.thumbnail:hover {
       text-decoration: none;
   }
   .axero-launchpad-small .ax-app-logos li.span4:nth-child(3n+1) {
       margin-left: 0;
   }

3. Click Save CSS Overrides.

Add Widget

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. This widget is best used in mid-sized to wider columns - 4 or greater.
5. On the Raw HTML widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. In the editor, add the following code.

   <div class="axero-widget axero-launchpad-small">
               <div class="axero-widget-header">
                   <h3>
                       Launchpad
                   </h3>
               </div>
               <div class="axero-widget-content">
                   <div class="ax-app-logos">
                       <ul class="thumbnails">
   <li class="span4">
                               <a href="https://login.microsoftonline.com/"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/office365.png"></span> <span class="thum-word">Office 365</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://qbo.intuit.com/c1/v1702.1434/0/login?redirect=true"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/quickbooks.png"></span> <span class="thum-word">Quickbooks</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://login.salesforce.com"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/salesforce.png"></span> <span class="thum-word">Salesforce</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://slack.com/signin"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/slack.png"></span> <span class="thum-word">Slack</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://www.workday.com/en-us/signin.html"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/workday.png"></span> <span class="thum-word">Workday</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://www.dropbox.com/login"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/dropbox.png"></span> <span class="thum-word">Dropbox</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://login.citrixonline.com/login?service=https%3A%2F%2Fglobal.gotomeeting.com%2Fj_spring_cas_security_check"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/citrix-go-to-meeting.png"></span> <span class="thum-word">GoToMeeting</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://account.docusign.com/#/username"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/docusign.png"></span> <span class="thum-word">Docusign</span></a>
                           </li>
                           <li class="span4">
                               <a href="https://github.com/login"
                                   target="_blank"
                                   class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/github.png"></span> <span class="thum-word">Github</span></a>
                           </li>
                       </ul>
                   </div>
               </div>
           </div>

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

Customize the Launchpad

Each item in the launchpad is an li element.

• To change a launchpad item's link, update the href attribute of the a element.
• To change a launchpad item's name, update the text in the span element.
• To change a launchpad item's image, update the src attribute of the img element. We recommend image sizes to be 50x50.