Responsive Resizing of Promoted Links

Responsive Promoted Links App Part

So, previously I wrote about changing the look and feel of the SharePoint Promoted Links app.  If you have modified your promoted links as listed in this article, you’ll see something like this:

Maximized window view:

The problem is that if you resize the window, your tiles get cut off– not a big deal if you have a large enough monitor, but if you’re on a tablet, you’ll lose some links on the page.

Resized window with tiles cut-off:

 

If you modify the max-width property, and set the width to auto, you get a nice little responsive design-like feel and behavior out of the promoted links.

All tiles shown with resized window:

Here’s the specific code I’m talking about:

.ms-promlink-body {
height: 200px;
max-width:850px;
min-width:215px:
width: auto;
 
}

 

Go here for the full source code of the promoted links modifications.

Hide Change the Look

Hide Change the Look

You may not want your users to have easy access to change the look and feel of the SharePoint site they have access to.  You should always ensure that users have the exact permissions they need– and nothing more, but in any case you can hide the option to change the look of the site from the site actions/gear menu.

 

Want to hide it?

Drop this code in:

.ms-siteactions-root .ms-core-menu-list li[onmenuclick*=”designgallery.aspx”]

How to Use the Code Snippets on this Site

Using the Code Snippets on this Site

The code snippets on this site are CSS code blocks that either set or override SharePoint’s built in Cascading Style Sheets (.CSS files).  In order to use the codes here you’ll have to use one of the following methods.  There are other ways of doing this, including modifying the master page file in SharePoint, or the Master CSS file, but I do not advise going down that path unless you’re comfortable– in which case you probably won’t be referencing this article anyway.

Either method you choose will require a content editor to be placed on the page you want to modify.

How to Add a Content Editor to a SharePoint Page:

Edit your page through the tabular menu

When the edit menu appears:

  • Click the “Insert” tab
  • Click “Web Part” in the insert tab
  • Under “Categories”, click “Media and Content”
  • In “Parts” to the right, click “Content Editor” and add it to the page.

Once the editor is displayed, you’ll need to click on the Web Parts context menu.  It appears as a down-pointing arrow in the top-right corner of the Web Part.

  • Click “Edit Web Part” in the drop down menu that appears.
  • Set the title of the content editor under the “Appearance” section to “CSS Edits”
    This ensures that you can easily identify what is in the editor, either in the page edit view, or on the web part maintenance page.
  • *Optionally* I’ll typically set the “Chrome Type” setting to “None” under the appearance section of the Web Part menu so that the content editor will not appear in a normal page view. This just makes for a better user experience.

Now, you’ll choose which method you’ll be using to add CSS snips into the editor.  There are two main options; I typically use option 1.


Option 1: Create a CSS file and Link to it in the Content Editor Web Part

This options is more versatile; it allows you to create a single CSS file that you can edit in the browser and associate many content editors to a single file.  If you have multiple pages with common elements you’d like to change or modify, this is easier.

  • Open a text editor on your computer (Notepad, or NotePad ++).
  • Leave the file blank and save it as [Filename].css — the name of the file doesn’t matter, but you may choose to make it meaningful like “SalesPage.css” or “SiteMods.css”.
  • On your SharePoint site, go to the gear menu, select “Site Contents”
  • Click the title of the library “Site Assets”
  • Upload your .CSS file into the Site Assets Library.
  • On the page where you’ve inserted the content editor, paste the URL of the .css file saved in site assets.  (Typically you’ll use “/siteassets/[Filename].css”)
  • Now that you’ve linked the Content Editor to the CSS file, you’ll return to the “Site Assets” library, and edit the CSS file– dropping in the code from these articles.

 


Option 2: Insert Embed Codes into Content Editor

This options is fairly basic; this is more suited to only modifying element(s) on a single page.  It is also a little more conveluded as you must edit the content editor web part each time you want to update the code.  — If you do not edit the webpart, and only click on “edit snippet”, the page will appear to update and use your CSS, but your changes will not be saved.  

Once you’ve added the Content Editor Web Part to the page, clicked the context menu link, and selected “edit web part” in the dropdown menu:

  • Click the insert tab in the tabular menu at the top of the page and click “Embed Code”
  • Paste the code snippet into the window

 

*** Note: When using this option, you’ll need to go into the Edit Web Part menu each time before you can edit the snippet, or your changes will not be saved.  For this reason, unless the code you’re dropping in is only for one element on a single page, Option 1 is recommended.

New Page Layouts in SharePoint 2016

Page Layouts in SharePoint 2016

New “Site Pages” in SharePoint online have a header that takes up a ton of white space on the page. The new experience has a specific tag that determines the new layout of the page.  This tag is the </mso:PageLayoutType> tag in the source code of the page.  Personally, I’m not a fan of unused space.  Let’s look at an example.

Look at All this Extra Room!

Here’s our Sales Dashboard page…notice the enormous amount of extra room on the page before we even get to the content.


Let’s reclaim some of that precious real estate…

Open the page in SharePoint Designer.  You’ll only be able to change the tag if you edit in advanced mode.

 

Look at line # 8 in SharePoint Designer, this shows that page has the Article type assigned to it:

 

Change: 

<mso:PageLayoutType msdt:dt="string">Article</mso:PageLayoutType>

To: 

<mso:PageLayoutType msdt:dt="string">Home</mso:PageLayoutType>

You’ll be left with the end-result shown below.

 

The future of SharePoint page layouts…

With this new “modern” experience on lists, libraries, and now pages, their goal is to revamp the way that users access content.  It is also making things more viewable and accessible on mobile devices.  As they roll out new layouts in the future, the way the pages and content are displayed will change.  The consensus online is that it will be better, and things like this layout, featuring a giant portion of unused space will be only one of multiple options.  So far, I’ve only see the two layout tags Article & Home in the source of the pages.  I’ll update this post as that changes.

 

Hide the SharePoint Top Site Menu With CSS

Hiding the Top Site Menu

Typically all SharePoint sites have a top menu that displays links to other pages and sites in SharePoint. You may want to hide it if you’re setting up your site in such a way that it would prevent a natural flow, or even confuse your users– in which case, you may consider hiding the menu altogether.

Want to hide the top site menu with CSS?

Drop in this code:

<style>
.ms-breadcrumb-top {
    white-space: nowrap;
    display: none;
}
</style>

Hide the Office365 Suite Bar with CSS

Hide the Office365 Suite Bar

The Office365 Suite Bar is a great component of SharePoint sites and pages. It allows quick access to Office Apps, and displays the name of the app the user is currently working within. However, in some cases, like working with external users, or for the purposes of a specific custom-application you’ve built, it may make sense to hide the bar.

This CSS code will prevent the bar from being displayed. Simply add a content editor to your page, insert a code snippet, or save it in a .CSS file in the site assets library, and enter the URL of that file in the content editor.

Want to hide the Office365 bar and get a little more real estate for your site/page?

Drop this code in:

<style>
div#suiteBarTop {
display: none;
}
</style>