Promoted LinksYou Get This One For Free!!Stacy L. Deere-StroleFocal Point Solutions, LLC
• Quick Wins• Navigation• What is a Promoted Link?• Examples• Gotchas• Wrap-Up
What is a Quick Win?
Navigation
What is a Promoted Link?
• Tile List Web Part• Out of the Box• User Adoption Builder• Navigation
Getting Started
Where Do You Want To Go?
My Stuff
Creating Promoted Link List
Select & Create App
New Promoted Link List
Upload Images
Simple Drag & Drop
Open Promoted Links
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.
Add Image
Add Link Location
Choose Launch Behavior & Order
Launch Behavior Options
1. In Page Navigation2. Dialog3. New Tab
Finished Link
Saved Link
Add Web Part
Select Web Part
Select your area, Choose Insert Tab, select web part, add and Save.
Finished Product
Editing Promoted Links
Editing Continued…• Select the link to edit• Choose the Items Tab in the Ribbon• Edit link and save
Customizing Your Promoted Links
<style>
.ms-promlink-body {
width: 800px;
}
.ms-promlink-header{
display:none;
}</style>
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;}
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 can get using inspect element
No Title HoverIn 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>
Removing White Space<style>
.ms-webpartPage-root {
border-spacing: 0px !important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
</style>
Adding Your Code
• Edit your page• Insert Tab• Add Web Part• Under Media &
Content• Select Script Editor• Add
• Copy and paste your code• Select Insert• Save Web Part
More FREE Stuff
promotedscript.txt
Gotcha #1Publishing 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.
Gotcha #2Content & Script Editor Web Part
• NOT turned on by default in O365• To turn on must adjust setting in
SharePoint Admin
Turning Scripting On\Offhttps://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f?ui=en-US&rs=en-US&ad=US
Gotcha #3 – Moving Sites
http://spmindmelt.focalpointsolutions.co/promoted-links-a-the-downside/
Description not actual address
Want More Free Stuff?
Icons.zip
@sldeere
www.linkedin.com/in/stacydeere
https://www.facebook.com/focalpointsolutions.co
BLOG: http://spmindmelt.focalpointsolutions.co
COMPANY: http://focalpointsolutions.co