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

sdeere@focalpointsolutions.co

BLOG: http://spmindmelt.focalpointsolutions.co

COMPANY: http://focalpointsolutions.co