Showing posts with label SharePoint Branding. Show all posts
Showing posts with label SharePoint Branding. Show all posts


Fifty+ SharePoint 2013 Sample Background Images

The following applies to SharePoint 2013 and SharePoint Online / Office 365.

Theme Background Images

When designing a theme for your site you can use a background image for the page. Did you know that SharePoint 2013 includes more than fifty 1024 x 768 sample images? Ten of the sample themes use the first ten of these images. These ten images and forty more can be found at the following URLs:


Replace the “image_bg002.jpg” with the names from the samples below.


Background images used with the sample themes:



Additional Background Images Available:






And a few more interesting images from that folder:




SharePoint 2013 – Restoring the 2010 Navigate Up Crumb Trail Button



SharePoint 2007 had the nice complete "bread crumb trail" across the top of every page:



SharePoint 2010 removed those and gave us a very limited, library relative, crumb trail which has gaps if too long:


As a compromise, 2010 gave us a little button / dropdown called Navigate up to make up for the missing crumb trail:



What Microsoft giveth, Microsoft takes away. No more crumb trails in 2013!  I think 2013 users are supposed to only "Follow" or search for sites. :-)

Actually… the Navigate up button is still there, but it's been hidden! It's just between the site logo and the Top Link Bar. All you need to do is make two quick changes to your master page, and the crumb trail is back!

In the example below I'm in a subsite named Sales Training and I've drilled down into a library with a bunch of folders looking for the 2014 schedules. In two clicks I can quickly jump up to a higher level folder, library or site.

Site with the restored Navigate Up button:



Get back the crumb trail!

The steps:

  1. Open your site in SharePoint Designer 2013.
  2. In the left panel click Master Pages.
  3. Click your master page (probably Seattle.Master for a typical Team Site).
  4. Click Edit File.
  5. Search for "breadcrumbdropdown".
    (If you don't find it, you may be working with a customized or branded master page.)
  6. Make two edits…
    1. In the line above change display:none to display:inline
    2. Two lines down change Visible="false" to Visible="true"
  7. Save the master page, and if prompted, click Yes.
  8. Return to your site and refresh the page!




Change the SharePoint 2013 Suite Bar Text


Hacking around with PowerShell always finds some new property or method that I would never have gone looking for! This time it is a SPWebApplication property that sets the text in the "Suite Bar".

The default text in the suite bar is "SharePoint" for on premises installs and "Office 365" plus an icon for the cloud versions. The actual HTML for the text is "<div class="ms-core-brandingText">SharePoint</div>".

Examples from on premises SharePoint and Office 365:


… but… I don't know how to get access to the SPWebApplication object in Office 365 from PowerShell! You can still change it using JavaScript. (See notes at the end of this article.)


Using PowerShell

The following PowerShell will list the Suite Bar text for each of your web applications:

PS C:\> Get-SPWebApplication | Select DisplayName, SuiteBarBrandingElementHtml

DisplayName               SuiteBarBrandingElementHtml
-----------               ---------------------------
My Sites - 82             <div class="ms-core-brandingText">SharePoint</div>
SharePoint Intranet - 80  <div class="ms-core-brandingText">SharePoint</div>
SharePoint Testing - 81   <div class="ms-core-brandingText">SharePoint</div>

To change the text, access your web application object (mine will be the 2nd in the list, so [1]), and set the SuiteBarBrandingElementHtml to your new text. You will probably want to include the default CSS class for consistency. Remember to do the .Update, or nothing will be saved!

PS C:\> (Get-SPWebApplication)[1].suitebarbrandingelementhtml = 
"MA<span style='color:#FF2020'>X</span> Technical Training" PS C:\> (Get-SPWebApplication)[1].update()

The above will change the text to:

If I include the DIV and class from the default text then is will look like this:


Can't use PowerShell?

You can use JavaScript or jQuery to change the Suite Bar title text in both on premises SharePoint and Office 365. All you need is some code to find the DIV with the class of ms-core-brandingText and change it's contents. When working with Office 365, be aware that the text is also a hyperlink to, so be careful not to break it!

In jQuery it might look like this:

$('.ms-core-brandingText').text('Your New Title Text');

Here's an article about changing the text in Office 365:


Have fun and don't break anything!



Reduce Spacing in a SharePoint 2013 Top Link Bar


The top link bar in SharePoint 2013 and Office 365 adds a lot of space between each menu item, 30 pixels to be exact. You can tighten this up quite a bit by changing the default spacing with a block of CSS added to your master page.

Default spacing:


After the CSS change below:


Add the following to your master page somewhere after the CssLink control (<SharePoint:CssLink runat="server" Version="15"/>). Just before the </head> tag works.

.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item 
   border-right:1px solid;

If you just want to adjust the space and not add the lines, then only change the margin:

.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item 




Am I a SharePoint Site Collection Administrator?


In my training and consulting I often run into people who are not sure if they are a Site Owner or a Site Collection Administrator.

Go to Site Actions, Site Settings and see if you have a link to "Site collection administrators". If you do, then you are one!  (In SharePoint 2013 the Site Actions link is the "gear" image)

If you don't see the link, don't stop yet… you may be in a subsite. Look for "Go to top level site settings" and if you see it, click it.


Here's the "Site collection administrators" links:





Note: You could have Full Control as a Site Owner or be a Site Collection Administrator and still not be able to do everything in your site. Your SharePoint server administrators can block certain features like creating subsites, even if you have Full Control.




Freezing the Title Row of a SharePoint 2010 List or Library


SharePoint 2010 lists and libraries do not have scrollbars. The pages do, but when you scroll down a long list you will find that the column headings scroll off of the top of the page. The little project below is a quick and dirty little project to add scrollbars to a list and lock the column titles in place.

Before scrolling: (click the image for a larger version)


After scrolling (headings have scrolled off of the top):


After the fix below:


Bonus! Notice that not only are the column headings always displayed, but so is the "Add new item link" at the bottom!

Before you continue…

  • This is a work in progress and presented as starting point for your own experiments!
  • This has only been tested in SharePoint 2010
  • It can be made to work with 2013, but there's a few extra steps that I'll need to document
  • This works with View pages… it needs more work before being used with views displayed in web parts
  • There's some excess white space at the top of the list.
  • This does not work with the following view options (and probably a few more):
    • Grouping
    • The Content Editor Web Part as adding it breaks the default view selection behavior (You must use SharePoint Designer)
  • There is a flaw with FireFox and possibly other browsers:
    • The heading row may be listed twice


If you are OK with the above, then give it a try!


  1. If you don't want to customize the default "All Items" (allitems.aspx) view then create a new Standard view
  2. You may want to customize your view and set the item limit to a number larger than the default of 30. Do not exceed 5000. (A SharePoint restriction)
  3. Open the site in SharePoint Designer
  4. Click Lists and Libraries and click your list
  5. Click the view you want to customize
  6. Click the Advanced Mode button in the Home tab of the ribbon
  7. In the Code pane scroll down and find "</WebPartPages:WebPartZone>" – you will add your code between that tag and the "</asp:Content>" tag
  8. Copy the code from below and paste between the two tags listed above
  9. Edit the following line and replace Bikes with the name of your list
        var SummaryName = "Bikes "
    Note: View your list page, use the browser's View Source feature and search for "summary=". Copy what follows including any spaces. If your list is named Bikes and has no description defined then you will find "Bikes ".  (note the space at the end) If your list has a description then you may find something like "Bikes This is a list of bikes for sale."  (note the exact use of spaces and the possible presence of a period or other punctuation)

    Another example: The default Shared Documents library has this summary name: "Shared Documents Share a document with the team by adding it to this document library."
  10. In the <style> section adjust the height of the scrolling area of your list – you may need some trail and error here
      overflow-y:scroll !important;
      overflow-x     :auto
  11. Save your changes and test your view

If it does not work:

Check your SummaryName! It has to be exactly what's found in the view page's HTML.

Try a delayed run of the script…

  Comment out this line by adding two slashes at the beginning:
    //or call the function immediately
    TTNListScroll();         <—this line

  And uncomment the spBodyOnLoadFunctionNames line:
    // update the list after the page has loaded



The code:

function TTNListScroll()
  // Scrolling list code from
  // Edit the next line with your list's summary name
  var SummaryName = "Bikes 2 ";
  var TTNmyTable;    
  var TTNListDiv = document.createElement('div'); 
  var TTNHeadingDiv = document.createElement('div');
  var tables = document.getElementsByTagName("TABLE");
  for (var i=0;i<tables.length;i++)
    if ( tables[i].summary == SummaryName )
      TTNmyTable = tables[i];
  if(TTNmyTable == undefined)
    // Table not found!
    // you may want to comment out the next line after testing
       alert("table '" + SummaryName + "' not found");
  // make a copy of the table for the heading area
  // udpate the page
  var TTNnode = TTNmyTable.parentNode
  TTNnode.replaceChild(TTNHeadingDiv, TTNmyTable);
  // hide the heading row of the main list
  // make the DIV for the heading the same width as the main list
  TTNHeadingDiv.childNodes[0].style.width = TTNListDiv.childNodes[0].offsetWidth 
// update the list after the page has loaded
//or call the function immediately
<style type="text/css">
  overflow-y:scroll !important;
  overflow-x     :auto





SharePoint 2010–Fun with Scrollbars!

Please, please, please… I'm not starting a debate on the pros and cons of scrollbars!   Smile   I'm just showing how to add them if you need them…

The following is for SharePoint 2010 and Office 365 / SharePoint Online.

Change How the Page Scrollbars Work

SharePoint uses JavaScript to make sure the ribbon stays at the top of the page. This results in the ribbon staying fixed, but also means that we have a custom scrolling area below the ribbon. If you prefer more natural scrollbars then take a look at Kyle Schaeffer's article here:

Below is the before and after of Kyle's changes. While the cosmetic changes are minor, Kyle lists additional benefits in his article.



Add Scrollbars to Quick Launch

Note: If you just want to tighten up the Quick Launch area then see this article:

When you scroll down in a SharePoint page to find what's at the end of the Quick Launch area you also scroll the top navigation area out of site. This area has the site title, top link bar, search and the Tags and Notes buttons. To be able to browse the Quick Launch area without scrolling the entire page add this CSS to your master page:


You will need to carefully select the height property and/or write some JavaScript to set the height based on the user's browser settings.


If you want to scroll the entire left navigation area then use this CSS:



Setting the height of this area gives you a little bonus of adding text or links just below the navigation area. Search for "MSO_ContentTable" in your master page and place your content between the two "</div>" tags above this line. (This example is for the standard v4.master page. Yours may be different.)



Add Scrollbars to the Content Area of the Page

If you would like to always leave the Navigation area on the left side of the page and the title area on the top of the page you will need add scroll bars to the primary content area ("ms-bodyareacell"). You will need to carefully select the height property and/or write some JavaScript to set the height based on the user's browser settings.




Add Scrollbars to a Web Part

This one is easy as it can be done from the web part's properties panel. Just click the web part's dropdown menu, click Edit, expand the Appearance section and enter the height.


Here's the result:


If you really want to force a web part or all web parts to display at a fixed size you could set the .ms-wpContentDivSpace class. Most likely you will want to do this at a single page level instead of in the master page.


If you want to change the height of a single web part then view the source of the page and search for "#MSOZoneCell_WebPartWPQ" until you find your web part. Copy the name that you find there, including the digit at the end and add it to your style selector.

#MSOZoneCell_WebPartWPQ5 .ms-wpContentDivSpace



Last Chance to Sign Up for SharePoint Cincy 2012!



SharePoint Cincy – March 16th, 2012

Northern Kentucky University’s Center for Applied Informatics and MAX Technical Training are bringing a major SharePoint event to the Cincinnati area! SharePoint Cincy will be held at the METS Center located in Erlanger, KY. The METS center is near the Cincinnati airport (CVG) and has lots of free parking.

You’ve got to be registered to attend and it’s filling up fast. Last year was a sell out and this year is a bigger and better event!

See the site for the agenda, speakers and registration:




SharePoint Cincy – This Friday - March 16th, 2012



SharePoint Cincy – March 16th, 2012

Northern Kentucky University’s Center for Applied Informatics and MAX Technical Training are bringing a major SharePoint event to the Cincinnati area! SharePoint Cincy will be held at the METS Center located in Erlanger, KY. The METS center is near the Cincinnati airport (CVG) and has lots of free parking.

Only a few days left!

You’ve got to be registered to attend and it’s filling up fast. Last year was a sell out and this year is a bigger and better event!

See the site for the agenda, speakers and registration:




Lots of great speakers will be there! (And I will be speaking there too :-) )

  • Robert Bogue, Thor Projects LLC.
  • Mike Buob, Sogeti, USA
  • Steve Caravajal, Ph.D, Microsoft Corporation
  • Bill Crider, Ascendum
  • Jorge Guerreiro, K2
  • Brian T. Jackett, Microsoft
  • Tavis Lovell, Ascendum
  • Tony Maddin, Ascendum
  • Jennifer Mason, SharePoint 911
  • Sean P. McDonough, Idera
  • Chris Murphy, Ascendum
  • Nitin Nagar, Ascendum
  • Ted Perrotte, Aspect Software
  • Mark Rackley, Juniper Strategy, LLC
  • Raveen Rajavarma, Ascendum
  • Clint Richardson, Ascendum
  • Larry J. Riemann, CBTS/Indigo Integrations
  • Jeffrey Segebarth, NewsGator Technologies
  • Peter Serzo, High Monkey Consulting
  • Mike Smith, MAX Technical Training
  • Adam Solzsmon, Ascendum
  • Matthew Tallman, Ascendum
  • Eric Weissmann, Ascendum
  • Shane Young, SharePoint 911



SharePoint 2010: Cannot find ContentPlaceHolder 'PlaceHolderLeftActions' in the master page '~masterurl/default.master' #sharepoint #sp2010


A simple error caused by a minimal problem   ;-)



The odds are you or someone on your team was playing with master pages and set the minimal.master as the default master page. As the minimal master is not a complete master page, some of the place holders needed by many pages are missing.


SharePoint Designer

To fix, just go to SharePoint Designer and reapply the v4.master (or which ever master you normally use.)



Site Actions, Site Settings

The Settings page has a fall back master page (Simplev4.master) to use whenever there is an error loading a master page. So if you don’t have SharePoint Designer available, and you are using a site based on a publishing template, then you can just navigate to the Site Settings page and pick a master page there.


or just go directly to:


Note, this only works with sites with the publishing features enabled.



10 Reasons Not to Brand SharePoint


I wrote a magazine article! While that was fun, I’m really surprised at the follow up it received. It’s gotten some interesting comments via Twitter, a discussion over at LinkedIn and even a couple of articles about the article! Some folks strongly agree, some strongly disagree and one even thinks it’s funny. As long as I got people interested in the topic, I‘m happy!


So do me a favor… I’d love to know what my “regulars” think of the article. Take a look at it and post your comments there, here or any where. I’d love to know what you think either way.


Twitter comments:!/search/%2210%20reasons%20not%20to%20brand%20sharepoint%22!/search?q=%23SPRebrand!/kerriabraham


The LinkedIn discussion:


Even some articles about the article:




SharePoint Saturday Cincinnati is ... well this Saturday!


Cincinnati’s first SharePoint Saturday is in three days! Are you registered yet? If not, go here now:

With twenty different presentations you can’t miss!


I will be giving two presentations:

  SharePoint Governance... It may not be what you think it is...


  SharePoint 2007, 2010 and Office 365 for Site Owners and Power Users



                                Tweet it! (#SPSCincinnati)

                                     Blog it!

                                         Be there! 

                                             and Learn!

                                                                and remember… it’s FREE!



SharePoint: Create an Alert from Anywhere


Users typically create an alert from a list’s ribbon or an item’s dropdown or ribbon. Regardless of where they click they get directed to /_layouts/SubNew.aspx, which is the Alert creation page. (Would you have guessed that a page named SubNew was used to create alerts?) As long as you know how to setup (or copy) this URL you can create a link to create an Alert from anywhere.

In this article we will see how to:

  • Create our own links to create a new Alert
  • Add these links to pages
  • Add these links to Quick Launch
  • Display the Alert page in a dialog box


Alert URLs

The URL to SubNew looks like this for a list or library level alert:


And like this for an item or document level alert:


http://intranet/sites/training the path to your site
?list= The Globally Unique ID (GUID) for the list or library (See below)
&Source Optional – if provided, the user will be redirected to this page when the OK or Cancel button is clicked in the Alert page.
(Ignored with used with &IsDlg=1)
?ID= The internal ID for the list item or document (See below)
&IsDlg=1 2010 only – used to hide the navigation parts of the master page when a page is displayed as a dialog box (See below)



List GUID: Each list and library in SharePoint (actually, just about every object in SharePoint) has a unique ID based on a GUID. This ID can be found in may URLs (example: List Settings or Library Settings) and can also be found by using PowerShell, the SharePoint API or tools like this or this.

SharePoint is not consistent in the formatting of a GUID. In some cases all of the letters must be lower case, in others they must be uppercase and in some it does not matter. As you can see in the two examples above, the GUID is sometimes escaped and sometimes is plain text. In the Alerts URL it does not seem to matter which form is used.

     Escaped:   %7BE7735F69%2D5542%2D4B8F%2D9426%2DD7757EAFABD9%7D

     Not escaped:   {E7735F69-5542-4B8F-9426-D7757EAFABD9}

List item ID: Every list item has a unique integer ID. This ID unique to the list and is never reused in the same list. (Add items 1, 2 and 3, then delete 2 and add one more. The new one will be 4. 2 will never be reused.) You can display the ID by simply adding the ID column to a view.

IsDlg: Setting this to 1 does not make the page display as a dialog, rather it tells the master page to hide most navigation elements. You can test this by going to just about any page other than your Home.aspx page and adding ?IsDlg=1 or &IsDlg=1 to the end of the URL.


See here for more about IsDlg and even how to display dialog boxes from Quick Launch.


Adding an Alert URL to a page

Using a SharePoint Rich Text editor (in a Wiki home page (home.aspx), a Content Editor Web Part or a Rich Text multiline column in a list) just click the Insert tab of the ribbon, click Link and paste in the URL for the Alert.



Adding an Alert directly to HTML:

Create an anchor tag (<A>) and add the URL for the alert. Example:

<a href="http://intranet/sites/Training/_layouts/SubNew.aspx?List={E7735F69-5542-4B8F-9426-D7757EAFABD9}&ID=1&Source=http%3A%2F%2Fintranet%2Fsites%2FTraining%2FShared%2520Documents%2FForms%2FAllItems%2Easpx"> Alert me! </a>

Note: Do not include the “&IsDlg'=1” unless you will displaying the alert page as a 2010 dialog box.


Adding an Alert to Quick Launch (or a Links list)

Too easy… just an a new link to Quick Launch using the URL copied from the Alert page.


Adding an Alert to Quick Launch (or a Links list) that displays as a SharePoint 2010 dialog box

See this article for more details and examples of SharePoint 2010 dialog boxes:

You will need to combine some JavaScript for the dialog box with the Alert’s URL to create the Quick Launch link. The following must be typed as all one line! Also note the use of single quotes (‘) around the URL.

JavaScript:var options=SP.UI.$create_DialogOptions();
options.height = 400;


  • Set options.url to your Alert URL, but remove the &Source= section (unless you want to send the user to a new page after creating the alert)
  • If the alert page is in the same site collection, set options.url to a relative address:
      relative:     /sites/Training/_layouts/SubNew.aspx?List
      absolute:  http://intranet/sites/Training/_layouts/SubNew.aspx?List
  • Quick Launch has a limit of 255 characters for the URL. To save space:
    • Use relative URLs
    • Do not use “&Source=” when using “&IsDlg”  (Ignored with used with &IsDlg=1)
    • Use an un-escaped version of the GUID
  • You can set the options.height and options.width to what ever looks best.



The results:






SharePoint 2010 Book Recommendations

I have not created a book list in quite a while and needed to put together an updated SharePoint 2010 book list for the folks who attend my classes. This list is not complete and unless otherwise noted only contains books I have personally reviewed.

Let me know of there are any other books you think I should review and possibly add to this list…



Categories of books below:

  • SharePoint 2010- “the big picture” / overview / understanding
  • SharePoint 2010 End Users / Site Owners / Power Users
  • SharePoint 2010 Administrator
  • SharePoint 2010 Developer
  • SharePoint 2010 Governance


SharePoint 2010 - “the big picture” / overview / understanding

Essential SharePoint 2010: Overview, Governance, and Planning (Addison-Wesley Microsoft Technology Series)
This book is for anyone wanting to find out what SharePoint can do. It's sometimes described as the book to give to your manager who knows nothing about SharePoint and wants to know what it can do while not having to learn every detail about how to do it.


SharePoint 2010 End Users / Site Owners / Power Users

SharePoint End User

SharePoint 2010 How-To

Click here for my review of this book.


SharePoint Workflows

SharePoint 2010 Workflows in Action

Includes both SharePoint Designer and Visual Studio workflow topics.


SharePoint Designer

Microsoft SharePoint Designer 2010 Step by Step (Step by Step (Microsoft))


SharePoint Branding and Customization

My book of course!

SharePoint 2007 and 2010 Customization for the Site Owner

This book is designed to get you started in customizing your SharePoint site with the tools you have readily at hand. This book has complete copy and paste solutions, and it also shows how each solution was crafted and how it works. After working through a few of the customizations and picking up some basic skills, you can start to figure out how SharePoint has been put together and start creating your own customizations.

SharePoint 2010 branding in practice: a guide for web developers

Click here for my review of this book.


SharePoint and InfoPath

Designing Forms for SharePoint and InfoPath: Using InfoPath Designer 2010 (2nd Edition) (Microsoft .NET Development Series)


SharePoint 2010 Administrator

These include books for everyday use and for certification prep.

(1) = I supply this book with my “SharePoint 2010 Certification Bootcamp for Administrators” class.

SharePoint Administration

Mastering Microsoft SharePoint Foundation 2010 (1)

Click here for my review of this book.

Microsoft SharePoint 2010 Administrator's Companion (1)

Essential SharePoint 2010: Overview, Governance, and Planning (Addison-Wesley Microsoft Technology Series)  (1)
This book is for anyone wanting to find out what SharePoint can do. It's sometimes described as the book to give to your manager who knows nothing about SharePoint and wants to know what it can do while not having to learn every detail about how to do it.


SharePoint and PowerShell

Automating SharePoint 2010 with Windows PowerShell 2.0

Excellent book! Over 700 pages on both PowerShell for SharePoint and "got to knows" about administration. If you are building multiple farms, finding yourself doing the same thing over and over again, or creating a scripts for a disaster recovery plan, then you need this book!



SharePoint 2010 Developer

These include books for everyday use and for certification prep.

(2) = I supply this book with my “SharePoint 2010 Certification Bootcamp for Developers” class.

SharePoint Development

SharePoint 2010 Development with Visual Studio 2010 (Microsoft .NET Development Series) (2)

Professional SharePoint 2010 Development (Wrox Programmer to Programmer) (2)

Inside Microsoft SharePoint 2010 (2)


SharePoint Workflows

SharePoint 2010 Workflows in Action (2)

Includes both SharePoint Designer and Visual Studio workflow topics.

SharePoint Governance

SharePoint Deployment and Governance Using COBIT 4.1: A Practical Approach

Click here to read an excerpt of this book on TechNet.


Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.