engage: promoted links - you get this one for free

Promoted LinksYou Get This One For

Free!!

Stacy L. Deere-StroleFocal Point Solutions, LLC

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…

Thanks to our Sponsors!!!

Agenda

• 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

Get 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

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 could get using inspect element

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>

Code – Removing White Space<style>

.ms-webpartPage-root {

border-spacing: 0px !important;

}

.ms-webpartzone-cell {

margin: 0px !important;

}

</style>

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 #2

Content & 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

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…

Thanks to our Sponsors!!!

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 professionalsWhat? SharePint!!!When? 6:15 PMWhere? World of Beer Reston1888 Explorer StreetReston, VA 20190

Thanks toKemp Technologies

@sldeere

www.linkedin.com/in/stacydeere

https://www.facebook.com/focalpointsolutions.co

sdeere@focalpointsolutions.co

BLOG: http://spmindmelt.focalpointsolutions.coCOMPANY: http://focalpointsolutions.co