Launchpad Widget - Small | Communifire 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 */
   .ax-app-logos{padding:20px 20px 10px;}
   .ax-app-logos ul{margin:0 0 4px;padding:0;}
   .ax-app-logos li{margin-bottom:10px;margin-top:0;}
   .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;}
   .ax-app-logos li a.thumbnail .thumb-icon{display:block;}
   .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;}
   .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;}
   .ax-app-logos li a.thumbnail:hover{text-decoration:none;}
   .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. This widget is best used in mid-sized to wider columns - 4 or greater.
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, add the following code.

   <div class="axero-widget">
               <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.