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 the Ellipses on an App Part

Hide the Ellipses on an App Part

The ellipses are cool.  If you click them you get a nice little menu with actions you can take on the item or file in the same row.  sometimes, you just want to show the content, so you may want to hide them.

Want to hide them?

Drop this code in:

<style>
 
.ms-list-itemLink {
    display: none;
}
</style>

Hide App Part Header Row

Hide the Header Row of an App Part

Here’s a standard Announcement App Part

 

The header row contains the column headers in the view.  In some cases, you may want to hide this.

Want to hide it?

Drop this code in:

/* Hide Header Row */
 
.ms-vh, .ms-vh2, .ms-vh-icon, .ms-vh2-nofilter-icon, .ms-viewheadertr .ms-vh-group, .ms-vh2-nograd, .ms-vh3-nograd, .ms-vh2-nograd-icon, .ms-ph, .ms-pickerresultheadertr {
     display: none;
}

Some Helpful Tips for Using CSS in SharePoint

Helpful Tips for CSS in SharePoint

Below are a list of tips or tricks you can use to make your job of styling a bit easier.

  • Utilize the developer tools.
    If you haven’t already discovered the IE developer tools, you will want to make yourself familiar with it.  Like the name suggests, the toolbar is an important tool and in any web developer’s arsenal used for identification and troubleshooting purposes.  As someone who is trying to customize SharePoint, you will likely be in the toolbar utilizing the  “DOM Explorer” tab.  This lets you explore or select elements from the source file and show the styles that are applied to the object and where the style comes from.My favorite feature is the selector button which allows you to click the object on the page to see the style.  The selector button is in the top left corner of the DOM Explorer and looks like a mouse arrow over a rectangular box (highlighted in yellow).  The style results will show in the right window.You can look through various tabs on the results window.  I use the Styles tab to verify my custom CSS file is referenced and see the inherited styles; the Computed tab to quickly look at the style without all of the inheritance clouding the actual values; the Layout tab to help view and test offset, margin, border, padding, and explicit item size; and the Changes tab to apply style changes test out styles before including them in my custom CSS file.  Any changes you make in the Changes tab will be applied immediately so you can quickly see if you applying the style to the correct element.
  • Don’t be afraid to create multiple style sheets for various purposes.
    The intent of this tip is not to add complexity to your solution, but rather to show you how multiple style sheets can work together to accomplish a business requirement.  We frequently talk to clients who want to be able to print things from SharePoint, without printing all of the branding surrounding the content.  We can achieve this by creating a print.css file which will basically hide all of the master page area, allowing for only the content to be printed.  In the same file, you can control things like page margins, fonts, or even inject a logo or watermark on the page

 

  • You may need to utilize !important.
    If you have had any experience with styles or style sheets, chances are you’ve run across “!important” trailing behind a particular setting. This parameter gives weight to setting, so even though it may not be the last style applied (remember back to the order in which style sheets are loaded), it will override the setting. SharePoint has a different page lifecycle as compared to a regular aspx page, so there are times where the only way to get a style applied, is to the add this parameter; example below:

Hide the Browse and Page Tabs

Hide the Browse and Page Tabs

The tabular menu can be hidden, as seen in this post, but if you’d just like to hide the standard Browse and Page tabs that appear when working in SharePoint, here’s the code to do it.

Want to hide the Browse tab?

Drop this code in:

<style>
#Ribbon.Read-title { display : none; }
</style>

 

Want to hide the Page tab?

Drop this code in:

<style>
#Ribbon.WikiPageTab-title { display : none; }
</style>

 

Want to hide both?

Drop this code in:

/* Hide the BROWSE and PAGE Tabs */
<style>
.ms-cui-tts { display : none; }
</style>

Change the Loading Image on SharePoint External List

Change the External List Loading Gif

**So far this only works on Chrome =\

External lists pull content from an external data source and surface the items into SharePoint.  This allows you to easily work with the items using the SharePoint web/app part controls as you normally would with a standard SharePoint list.  The loading image that appears on an external list is a bit clunky, and dates back to SharePoint 2007– possibly earlier.

Here’s what that loading image looks like. 

I mean it works and does the trick to pacify users while content is loaded, but of course, I had other plans…I wanted to change it to something a little more industry-specific for my company.  Something like this:

So after looking around online, I was able to change the loading image (only in chrome so far) with a little CSS.

Want to change it?

Drop this code in:

div[style='padding-top:5px;']>center>img[src='/_layouts/15/images/gears_an.gif']{
    display:none;
}
div[style='padding-top:5px;']>center:before{
    display:block;
    content: " ";
    /* adjust height and width to fit your gif*/
    width: 70px;
    height: 70px;
    /* again, replace this url with the url of your .gif of choice */
    background-image:url('/_layouts/15/images/gears_anv4.gif');
    background-repeat:no-repeat;
}