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.
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.
<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>
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;}
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.
How can I use my own images?
Hey Max,
You can use your own images, you just need them hosted. You can host them somewhere yourself or you can upload the images to Files and use the image path in the View File page. You could create a private space called "Media Assets" and mark Guest > View for files in permissions for better organization.
You could create a private space called "Media Assets" and mark Guest > View for files in permissions for better organization.Hi Max - I've tried the above instructions, but my PNGs are still showing up as broken links on my home page. Any advice?
To clarify - PNG links are broken when I log out and view as guest. When I view the page as admin, they are all visible.
Hey Peter, check View All permission for Guest as well.
Hey Matt,
I dont get it. I put a png image in a private space and copy and pasted the web address into my html code but it only show a broken image symbol. It doesnt work.
On the View File page, right click on the image and copy the image url address, don't use the web address of the View File page.
Image URL Example: /fileattachment?file=M8Pxz7qrnyj%2FPuRo27yPpg%3D%3D&v=1
Hello!
The default layout for this widget is 3 across. How can I change it to be only 2 across? I was trying to mess with the CSS line but I can't get it to change.
.ax-app-logos li.span4:nth-child(3n+1){margin-left:0;}
Hey Daniel,
Make the following changes:
span4
span6
3n+1
2n+1
Grace
Also change span4 to span6 in the CSS code.
Please enable JavaScript to use file uploader.
is requesting access to a wiki that you have locked: https://my.axerosolutions.com/spaces/5/communifire-documentation/wiki/view/22025/launchpad-widget-small