sp fest chicago - promoted links you get this one for free!!
TRANSCRIPT
![Page 1: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/1.jpg)
Promoted LinksYou Get This One For Free!!Stacy L. Deere-StroleFocal Point Solutions, LLC
![Page 2: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/2.jpg)
![Page 3: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/3.jpg)
• Quick Wins• Navigation• What is a Promoted Link?• Examples• Gotchas• Wrap-Up
![Page 4: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/4.jpg)
What is a Quick Win?
![Page 5: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/5.jpg)
Navigation
![Page 6: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/6.jpg)
![Page 7: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/7.jpg)
What is a Promoted Link?
• Tile List Web Part• Out of the Box• User Adoption Builder• Navigation
![Page 8: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/8.jpg)
Getting Started
![Page 9: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/9.jpg)
Where Do You Want To Go?
![Page 10: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/10.jpg)
My Stuff
![Page 11: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/11.jpg)
![Page 12: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/12.jpg)
Creating Promoted Link List
![Page 13: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/13.jpg)
Select & Create App
![Page 14: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/14.jpg)
New Promoted Link List
![Page 15: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/15.jpg)
Upload Images
Simple Drag & Drop
![Page 16: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/16.jpg)
Open Promoted Links
![Page 17: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/17.jpg)
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.
![Page 18: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/18.jpg)
Add Image
![Page 19: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/19.jpg)
Add Link Location
![Page 20: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/20.jpg)
Choose Launch Behavior & Order
Launch Behavior Options
1. In Page Navigation2. Dialog3. New Tab
![Page 21: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/21.jpg)
Finished Link
![Page 22: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/22.jpg)
Saved Link
![Page 23: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/23.jpg)
Add Web Part
![Page 24: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/24.jpg)
Select Web Part
Select your area, Choose Insert Tab, select web part, add and Save.
![Page 25: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/25.jpg)
Finished Product
![Page 26: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/26.jpg)
Editing Promoted Links
![Page 27: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/27.jpg)
Editing Continued…• Select the link to edit• Choose the Items Tab in the Ribbon• Edit link and save
![Page 28: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/28.jpg)
Customizing Your Promoted Links
<style>
.ms-promlink-body {
width: 800px;
}
.ms-promlink-header{
display:none;
}</style>
![Page 29: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/29.jpg)
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;}
![Page 30: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/30.jpg)
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
![Page 31: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/31.jpg)
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>
![Page 32: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/32.jpg)
Removing White Space<style>
.ms-webpartPage-root {
border-spacing: 0px !important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
</style>
![Page 33: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/33.jpg)
Adding Your Code
• Edit your page• Insert Tab• Add Web Part• Under Media &
Content• Select Script Editor• Add
![Page 34: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/34.jpg)
• Copy and paste your code• Select Insert• Save Web Part
![Page 35: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/35.jpg)
More FREE Stuff
promotedscript.txt
![Page 36: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/36.jpg)
![Page 37: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/37.jpg)
![Page 38: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/38.jpg)
![Page 39: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/39.jpg)
![Page 40: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/40.jpg)
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.
![Page 41: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/41.jpg)
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
![Page 42: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/42.jpg)
Gotcha #3 – Moving Sites
http://spmindmelt.focalpointsolutions.co/promoted-links-a-the-downside/
Description not actual address
![Page 43: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/43.jpg)
![Page 44: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/44.jpg)
Want More Free Stuff?
Icons.zip
![Page 45: SP Fest Chicago - Promoted Links You Get This One For Free!!](https://reader034.vdocuments.net/reader034/viewer/2022042722/5887e8851a28ab7d5c8b4b7d/html5/thumbnails/45.jpg)
@sldeere
www.linkedin.com/in/stacydeere
https://www.facebook.com/focalpointsolutions.co
BLOG: http://spmindmelt.focalpointsolutions.co
COMPANY: http://focalpointsolutions.co