Launchpad Widget - Small | Communifire Documentation

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

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, type Launchpad 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>
                    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>

CSS

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

/* 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;}

Images

The images are uploaded to a Communifire CDN and are linked in the HTML above. You can use those images or use your own. We recommend image sizes to be 50x50.