A Quick Win is something that takes little time and money but has a LARGE impact...Promoted Links are exactly that so check it out! Promoted links is an out of the box function that provides an easy way to manage a visual layout of links on your site. With the links being part of a list you get various features that a list provides such as security trimming, views, and opening in a separate window. In addition, as with all the great features and functionality there are always some downsides and gotchas that you need to be aware of and know how to fix or work around them. In this presentation you will learn what to watch out for and how to avoid some potential issues.

1. Promoted Links
You Get This One For
Free!!
Stacy L. Deere-Strole
Focal Point Solutions, LLC

2. Housekeeping…
• Download EventBoard Mobile and remember to
fill out session evaluations…
– http://app.spsdc.org
• Phasers set to stun, mobile devices set to
silent…
• You must be present to win at the wrap-up…

3. Thanks to our Sponsors!!!

5. Agenda
• Quick Wins
• Navigation
• What is a Promoted Link?
• Examples
• Gotchas
• Wrap-Up

6. What is a Quick Win?

7. Navigation

9. What is a Promoted Link?
• Tile List Web Part
• Out of the Box
• User Adoption Builder

10. Get Started

11. Where Do You Want To Go?

12. My Stuff

14. Creating Promoted Link List

15. Select & Create App

16. New Promoted Link List

17. Upload Images
Simple Drag &
Drop

18. Open Promoted Links

19. Create Link
• Title: Enter Title
• Background Image: Paste Image from
Site Assets
• Background Image Description: Optional
• Description: Enter Description
• Link Location: Enter Location Link is
going too.
• Link Description: Optional
• Launch Behavior: Choose Option
• Order: Enter Order of your link in the list.

20. Add Image

21. Add Link Location

22. Choose Launch Behavior &
Order
Launch Behavior Options
1.In Page Navigation
2.Dialog
3.New Tab

23. Finished Link

24. Add Web Part

25. Select Web Part
Select your area,
Choose Insert Tab,
select web part, add
and Save.

26. Finished Product

27. Editing Promoted Links

28. Editing Continued…
• Select the link to edit
• Choose the Items Tab in the Ribbon
• Edit link and save

29. Customizing Your Promoted
Links
<style>
.ms-promlink-body {
width: 800px;
}
.ms-promlink-header{
display:none;
}
</style>​

30. Code – Adjusting Size
• Add a script editor web part to a page.
• Then Edit Source and paste this in there:
<style>
.ms-promlink-body {
width: 800px;
}
.ms-promlink-header{
display:none;
}
</style>​
This piece adjusts the width:
.ms-promlink-body {
width: 800px;
}
This piece removes the arrows:
.ms-promlink-header{
display:none;
}

31. Code – Multiple Lines
<style>
.ms-promlink-body1 {
width: 350px;
}
</style>
<script type="text/javascript" src="/Scripts/JQuery/jquery-
1.8.1.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#promotedlinksbody_WPQ2").addClass('ms-promlink-body1');
});
</script>
promotedlinksbody_WPQ2 is the id of the
tile you could get using inspect element

32. Code – No Title
Hover
In order to show the title define a new css class,
and add it to the promoted link.
<style>
.ms-tileview-tile-detailsBox2
{
position : absolute;
top: 0px!important;
/* [ReplaceColor(themeColor:"TileText")] */ color:#fff;
/* [ReplaceColor(themeColor:"TileBackgroundOverlay")] */ background-
color:rgba( 0,0,0,0.2 );
}
</style>
<script type="text/javascript" src="/Scripts/JQuery/jquery-1.8.1.js"></script>
<script language="javascript">
… ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
ControlID= ControlID + '_4';
$("#" + ControlID).width(ImageSize);
$("#" + ControlID).height(ImageSize);
$("#" + ControlID).addClass('ms-tileview-tile-detailsBox2');
…
</script>

33. Code – Removing White Space
<style>
.ms-webpartPage-root {
border-spacing: 0px !important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
</style>

34. More FREE Stuff
promotedscript.txt

39. Gotcha #1
Publishing Portal Template - You won’t find it unless you activate a
feature named “Team Collaboration Lists”.
•To enable the “Promoted Links” list, follow the below steps:
•In your Publishing Portal site, click on Settings icon.
•Under site actions category, click on Site Features.
•Find Team Collaboration Lists feature and active it by clicking on
Activate button.
•Click on Settings icon and then press on Add an App button.
•Search for Promoted Links and add this app to your site in order to
create your own list.

40. Gotcha #2
Content & Script Editor Web Part
•NOT turned on by default in O365
•To turn on must adjust setting in
SharePoint Admin
Turning Scripting OnOff
https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f?ui=en-US&

41. Gotcha #3 – Moving Sites
http://spmindmelt.focalpointsolutions.co/promoted-links-a-the-downside/
Description not
actual address

42. Want More Free Stuff?
Icons.zip

43. Wrapping Up…
• Download EventBoard Mobile and remember to
fill out session evaluations…
– http://app.spsdc.org
• You must be present to win at the wrap-up…

44. Thanks to our Sponsors!!!

45. Join us at #SharePint sponsored by Kemp
Technologies at World of Beer of Reston in the
Towncenter just across the bridge
Why? To network with fellow SharePoint
professionals
What? SharePint!!!
When? 6:15 PM
Where?
World of Beer Reston
1888 Explorer Street
Reston, VA 20190
Thanks to
Kemp Technologies

46. @sldeere
www.linkedin.com/in/stacydeere
https://www.facebook.com/focalpointsolutions.co
sdeere@focalpointsolutions.co
BLOG: http://spmindmelt.focalpointsolutions.co
COMPANY: http://focalpointsolutions.co