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;
}

 

Styling the SharePoint Content Search Web Part Images & Icons – Part 2

Styling the Content Search Web Part

Here’s a link to Part One of this post which dealt with the “List” Display Template of the content search webpart.

Here’s what the web part looks like with the following options: Slide Show – Large Picture.

It’s pretty bland, and honestly, I HATE the default image that has the question mark in it.  I appreciate that there’s a default image, but in reality, I’d like to change that to look a lot better.  I’ve created a background image that looks good when scaled up to the size of the slideshow, and want to replace the default image with mine.  One other thing to consider is that this overrides the image that is associated to the item in the webpart.  If you already have an image for the item that displays (instead of the grey question mark looking background), this CSS will prevent the image from showing.

First thing’s first: Insert the web part on your page.

  1. Put a content search web part on your page
  2. Select the content you want in the query
  3. Set the display template to the built-in template “Slideshow”
  4. Set the Item Display Template to “Large Picture”

Drop this code in:

.cbs-noImageContainer-ContentWrapperLarge {
 border-width: 5px;
 background-image: url(https://[IMAGE URL HERE]);
 background-repeat: no-repeat;
 background-size: cover;
}
.cbs-noImageContainer-ContentSmall, .cbs-noImageContainer-ContentLarge {
 display: none;
 }
.cbs-noImageContainer {
 display: table;
 background-color: black;
}

 

 

Here’s our Result:

 

 

Let’s break the code down and see what it does…

.cbs-noImageContainer-ContentWrapperLarge {}

This is the image container– that is, the actual “box” that the item’s image sits in.  Setting an image URL will replace the plain grey color.  Here are the main pieces to be concerned with in this block.

  • The boarder is optional, but I kind of like it.  You can either remove this entirely, or change the size as you see fit.  The default is 5px.
    • border-width: 5px;
  • Set the image url to one of your choosing. Upload a image to site assets library and drop the url into the css.
    • background-image: url(https://[IMAGE URL HERE]);
  • If you have an image that isn’t a “texture” that won’t look good repeated across and down, set the repeat to none.
    • Background-repeat: no-repeat;
  • Set the background size to cover to fill the entire container
    • Background-size: cover;
.cbs-noImageContainer-ContentSmall, .cbs-noImageContainer-ContentLarge {}

This is the container that holds the question mark graphic in the bottom right corner of the slideshow.

  • Just hide this completely
    • display: none;
.cbs-noImageContainer {}

This is the whole container for the slideshow.  I just set the color of the background to be black so that it blended well with the image I used.  Feel free to change it to whatever looks good in your usage scenario.

  • Set the color to whatever looks good
    • background-color: black;

 

If you’d like to use the image(s) I did, here’s a gallery of some good ones you can use.

 

Syncfusion Metro Studio: An Awesome Resource for Icons, Tiles, and UI Elements

Syncfusion Metro Studio is Awesome!

If you’ve ever struggled to find some basic images to use for icons, tile images for the Promoted Links Web Part, or any others, I wanted to share a resource that I use almost daily when building solutions and styling pages in SharePoint.

Syncfusion’s MetroStudio has thousands of wire frame and flat icons you can use for FREE.  You can even create custom icons with text, resize, change the shape, and colors.  It’s an awesome program that I’m sure most of you will find very helpful!

 

 

Targeting a Single Web Part with CSS

Targeting a Single Web Part with CSS

An important thing to note about using the CSS in general is that it saves a ton of time styling individual elements, and let you easily set a style for everything on the page.  Where this gets complicated is if you have multiple web parts on the page and dont want to modify all of them and would rather specify which one the CSS code modifies.

For example, if you were to add the following code to a SharePoint page, your CSS would be applied to all content on the page that was styled using the selector .someCSS{}.

<style>
 
.someCSS{
 
property: value;}
 
</style>

 

In order to make our CSS only apply to a specific web part on the page, we need to add in a declaration.  That is done using the following string: #MSOZoneCell_WebPartWPQXXX, (where XXX is the number in the div id of the web part on the page.)

<style>
#MSOZoneCell_WebPartWPQ2
.someCSS{
 
property: value;}
 
</style>

Here’s how to find out the number to add to the #MSOZoneCell_WebPartWPQXXX string.

  1. Use developer tools in Chrome (F12 when viewing a page).
  2. Choose the element selector in the top left corner of the developer tools window.
  3. Click the web part you want to target with your CSS code.
  4. You’ll see something like the image below.  The div id contains the number to add to the end of that string.

Styling the SharePoint Content Search Web Part Images & Icons – Part 1

Styling the Content Search Web Part

Check out Part 2 of this post where we style the Slideshow – Large Image display template.

The Content Search Web Part is one of the most versatile web parts in SharePoint.  It’s similar to the Content Query Web Part, but has some better functionality like searching throughout the site collections– which is great if you want to surface content from sub sites and other site collections onto a different page.  This is the perfect scenario for an “intranet homepage”.  There are a few issues that a lot of people take with it.  The biggest complaint I’ve seen online is that most people would like to set the image that is displayed for each item.  This post will show you how to set a Single, specific image to be displayed for each result, and change the spacing.  From what I’ve seen, there are a ton of hoops to jump through to get it to do that…things like search schema and managed properties you have to modify– until now.

Here’s what the web part looks like when you don’t modify anything but the search query to match specific documents and/or content types.

Pretty lame to say the least.

The biggest bummer, in my opinion, is the image.  To get it to display anything other than that placeholder, you have to go and associate crawled properties to managed properties in the search schema, set/enter the image url property for each item being returned, and then if you’re using SharePoint On-Premises you have to do a full re-crawl.  This isn’t a good approach if you have a lot of content being returned– especially if the returned results are of multiple content types.  We’re going to hack this web part to use a pre-set designated image instead! I’m really excited because I couldn’t find anything online about this, and had to result to doing it myself.  I’m also going to change the spacing in between the items to have it look more polished.

Let’s get to the fun part.

First thing’s first: Insert the web part on your page.

  1. Put a content search web part on your page
  2. Select the content you want in the query
  3. Set the display template to the built-in template “List”
  4. Set the Item Display Template to “Recommended Items: Picture on the left, 3 Lines on the Right” — FYI: When I was playing around and finding the CSS to modify, this was the item template I had selected.  The code below won’t correctly display the images if you use a different item template.

Drop this code in:

<style>
/* #MSOZoneCell_WebPartWPQXXX */
.cbs-picture3LinesImageContainer{
 
    width: 50px;
    height: 50px;
    background-image: url(https://[IMAGE URL HERE]);
    background-repeat: no-repeat;
    padding-right: inherit;
    margin-bottom: 5px;
    overflow: hidden;
    float: left;
}
.cbs-picture3LinesImg{
background-repeat: no-repeat;
display:none;
 
}
 
</style>

 

The code gives gives us a nice-looking result:

Let’s break the code down and see what it does…

.cbs-picture3LinesImageContainer{}

This is the image container– that is, the actual “box” that the item’s image sits in.  You can change the size of the image all you want in CSS, but if you don’t change the size of the container (and the margins) you’ll just have an image that’s resized in a box that isn’t.  Here are the main pieces to be concerned with in this block.

  • Width & Height Set this to be 50px by 50px– or however large your image is.  If you have a lot of items you’d like to display, you’ll want to keep this small.
    • width: 50px;
    • height: 50px;
  • Set the image url to one of your choosing. Upload a image to site assets library and drop the url into the css.
    • background-image: url(https://[IMAGE URL HERE]);
  • Set the margin on the bottom of the image to 5px… anything less makes items look cramped.
    • margin-bottom: 5px;
.cbs-picture3LinesImg{}

This is the original image that the webpart will use if there is no value in the managed property for the item in the results.  Its an ugly question mark that looks bad.  If you have a publishing image or other assigned image, it will display here.  I prefer to have a uniform and consistent look to all of these items, so I’ve set it to not be displayed– the image set in the CSS above will be used in it’s place.

  • Set the background to not repeat
    • background-repeat: no-repeat;
  • Set the image to not be displayed
    • display:none;

And there you have it.  With a couple of simple lines of CSS, you’re able to leverage the Content Search Web Part — and set the item image!

* NOTE: If you have multiple content query web parts on the page and want to specify which one this CSS modifies, be sure to set the #MSOZoneCell_WebPartWPQXXX property — I included it in my code (but commented it out).  Use developer tools in Chrome (F12 when viewing a page), choose the element selector, and then click the webpart.  You’ll see something like the image below.  The div id contains the number to add to the end of that string.

 

Check out Part 2 of this post where we style the Slideshow – Large Image display template.