Loading ...

Launchpad Widget - Large | Axero Documentation

Home » axero documentation » Wiki » Documentation » Control Panel » System » Page Builder » Page Builder Extras » Launchpad Widget - Large
Axero Documentation  Wiki
Public Space
Activity Stream Content
Version 12

Launchpad Widget - Large

0 
 /5
0 (0votes)

Note: Using this widget requires HTML knowledge. We recommend using the Navigation Widget and Launch Pad 1 Template instead.

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

Launchpad Widget

Add CSS Overrides

  1. Click the gear icon > Control Panel > System > CSS Overrides.
  2. Add the following code, at the bottom. 
    /*Style for Laucnhpad Widget - Large*/
.axero-launchpad-large .ax-app-logos {
    padding: 20px 20px 10px;
}
.axero-launchpad-large .ax-app-logos ul {
    margin: 0 0 4px;
    padding: 0;
}
.axero-launchpad-large .ax-app-logos li {
    margin-bottom: 30px;
    margin-top: 0;
}
.axero-launchpad-large .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-large .ax-app-logos li a.thumbnail .thumb-icon {
    display: block;
}
.axero-launchpad-large .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-large .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-large .ax-app-logos li a.thumbnail:hover {
    text-decoration: none;
}
.axero-launchpad-large .ax-app-logos li:nth-child(4n+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 wider columns - 6 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-large">
            <div class="axero-widget-header">
                <h3>
                    Launchpad
                </h3>
            </div>
            <div class="axero-widget-content">
                <div class="ax-app-logos">
                    <ul class="thumbnails">
                        <li class="span3">
                            <a href="https://www.namely.com/login/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/app-namely.png"></span> <span class="thum-word">Namely</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://app.bamboohr.com/login/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/bamboohr_v2.png"></span> <span class="thum-word">BambooHr</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://account.box.com/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/box.png"></span> <span class="thum-word">Box</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://signin.webex.com/collabs/auth"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/cisco-webex-logo.jpg"></span> <span class="thum-word">Webex</span></a>
                        </li>
                        <li class="span3">
                            <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="span3">
                            <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="span3">
                            <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="span3">
                            <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>
                        <li class="span3">
                            <a href="https://id.atlassian.com/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/jira.png"></span> <span class="thum-word">Jira</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://www.linkedin.com/uas/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/linkedin.png"></span> <span class="thum-word">LinkedIn</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://login.mailchimp.com/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/mailchimp.png"></span> <span class="thum-word">Mailchimp</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://login.marketo.com/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/marketo.png"></span> <span class="thum-word">Marketo</span></a>
                        </li>
                        <li class="span3">
                            <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="span3">
                            <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="span3">
                            <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="span3">
                            <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="span3">
                            <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="span3">
                            <a href="https://www.zendesk.com/login/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/zendesk.png"></span> <span class="thum-word">Zendesk</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.

Wiki Index

Pages