Online Class: Building Compelling Branding for SharePoint Online Internal & Public Sites

On May 8, 2014 – 11am to 3pm Eastern USA time I’ll be doing an online class on Building Compelling Branding for SharePoint Online Internal & Public Sites.
This class is for designers, content managers, administrators and developers who want to learn about SharePoint Online (Office 365) Branding, Site Customization and Management.

Here is what you can expect from this class

Intro, purpose (15 min)
Overview of SharePoint Online sites and how they differ from one another (15 min)
-WIKI site, Team site, Public site, when do you use one and what are they for?

Customization options: SharePoint Designer versus Visual Studio (15 min)
-In this part, we’ll take a look at two of the most common customization options and
see some of the advantages in terms of using SharePoint Designer versus Visual Studio
for various business scenarios

Getting started with branding of a SharePoint Online site (30 min)
-Looking at key branding artifacts such as masterpages, stylesheets, page layouts and
how all of those can be branded, which tools to use and how it all comes together

Creating a SharePoint Online custom look (30 min)
-Custom look in SharePoint Online is the easiest way to get the most of branding; in
this part of the session we’ll take a look at what’s involved in creating your own custom look
and how to use it on the site. (Deliverable: sample custom look)

Applying more complex branding to SharePoint Online site by using master pages (30 min)
-Master page will give you the most power in terms of changing the look of SharePoint Online site; it’s a key to applying corporate brand so in this part we’ll focus on masterpage customizations and related content. (Deliverable: sample master page)

SharePoint Online public sites and how to brand one (30 min)
-SharePoint Online public site have a lot in common with the intranet sites but also few things different. The focus in this part of the session will be using branding features available in SharePoint Online public site to customize your own

Design manager and its role in packaging SharePoint online branding(15 min)
-In this part, we’ll see how you can easily transfer all of your SharePoint Online site customizations to a production site

Building interactive components for SharePoint online (15 min)
-If you found some cool JavaScript on the internet or creating something of your own, in this part, we’ll see what’s involved in having this customization packaged and deployed to your site
Deliverable: SharePoint Online app

Next steps/Questions (15 min)

Hope to see you there!


How to: dynamically resize images rolled up by SharePoint Content Query Web Part

Need to roll up images from an image gallery on your SharePoint site? No problem, Content Query Web Part is used to rolling up stuff. But have you seen how it rolls ups images from an image gallery? They’re tiny.

That’s because by default Content Query Web Part uses Thumbnail URL column for roll up and images in Thumbnail URL are tiny, they’re really meant for the list view when you go to the library.

old configuration

But here is the trick, every time you upload an image to a Picture Library, and this is applicable to the picture library only … two smaller images are generated, one located under [Photo Library URL]/_t/[original_image_jpg.jpg] that one is used for thumbnails in the library view. Another image is under this URL: [Photo Library URL]/_w/[original_image_jpg.jpg]

The difference in URL is the _t and _w. The one that gets served up in Thumbnail URL for the COntent Query Web Part is _t tiny little version. The one you want is under _w, which is a web friendly version.

There are two ways to approach this … one is to create a custom style in your Content Query WebPart and there you can change all you want. Another way, and perhaps quicker and more robust is to use JavaScript to adjust the URL of the image. We’ll talk about the later.

In order to make such adjustments, add a Script Editor web part to the page where you have your roll up and add the following JavaScript to it:

function FixCQWPImage() {
$("img").each(function() {
if ($(this).attr('src').indexOf("_t") != -1)
$(this).attr('src', $(this).attr('src').replace('_t', '_w'));

This basically replaces the _t with _w, that’s it … now call this function from your masterpage in document ready like this:

$(document).ready(function () {



Resolving SharePoint 2013 error “some apps [.... ] are not supported in mobile view”

Now that everyone is trying to do everything on their phone, you might get a complains from your users who try to access the SharePoint site that they get this error “…. some apps, such as [...], are not supported in mobile view”.

This can come from a web part or the page. You might be thinking that your web part is broken but the problem is actually much simpler than that.

I ran into this same issue on my SharePoint 2013 environment and the only way to see that this is obviously a SharePoint issue and not your custom app or web part was to run the page in mobile browser emulator (Firefox has a plugin called Default Agent Switcher) and see that the site itself is trying to be rendered in a mobile view.

In fact if you try to navigate to the root of the site which hosts your web part – chances are this is a team site and to improve your collaboration experience on the mobile device – those automatically have a mobile view enabled.

That problem view can be easily disabled by turning off this feature, Mobile Browser View:

mobile browser feature

… and that’s all there is to it, enjoy!


How to: enable inactivity log out for SharePoint server

Here is the scenario: you want to log out your users from the site if they’re inactive in the browser window for a defined period of this.
Below approach will work in the could, SP2010, 2013 since it relies on out of the box features on SharePoint.

This can simply be achieved by JavaScript since that’s the easiest way to determine whether the user has moved their mouse or pressed any keys; if not, then increment the counter and eventually log them out.

Here is the script you could use in your masterpage:

$(document).ready(function () {
idleTime = 0;

function LogOutInactive() {
var idleInterval = setInterval(timerIncrement, 60000);

$(this).mousemove(function (e) {
idleTime = 0;
$(this).keypress(function (e) {
idleTime = 0;

function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 9) {
window.location = "http://[your site]/_layouts/15/SignOut.aspx";

Basically, at the end there we verify whether the counter of inactivity is more than 9 minutes (meaning this is 10 minutes that the user has been idle for) and if that’s the case, we redirect them to the sign out page. The sign out page does all the magic and actually prompts you to log in again.



Scaling, backup and unicorns … running sites with azure

For the past few weeks I have been experimenting a lot with Azure and today I wanted to share with you how easy it is to scale the site with Azure and why would you want to do it.
As you may know, my blog has been hacked a month ago or so and content was badly damaged this time around, it took me weeks to clean up the content from all the links.
The issue was in part mainly due to my old hosting provider which didn’t seem to have a proper antivirus to capture any malicious uploads coming to already vulnerable wordpress platform. WordPress is vulnerable because everyone contributes to it with minimal quality control so it’s really up to a hoster and antivirus to try help catching everything that fell through the hole of bad code.
Long story short, I ended up on Azure with all the proper antivirus set up by default.
I used shared hosting for a while, but that doesn’t offer backups, so few days ago I switched to Standalone hosting, which does offer automated backups.
First of all, just to scale my site to a dedicated VM too 2 clicks and less than 1 minute. How long would it take you to do it manually?

On that note, you can configure for your environment to autoscale automatically as things get heavy on your site. So say you have a christmas campaign for online store, or building a cool app that hit the jackpot, you definitely need to scale fast! I mean, if your site gets hit hard all of the sudden, not only you’ll disappoint new customers, the existing customers will also suffer. So in Azure you can just set the autoscale based on the schedule or CPU usage.

scaling in windows azure

Backup’s pretty straightforward too, you can chose a database backup and the file system backup … and you can restore it pretty easily too!

azure backup

So with that I am hoping that with a bit more solid infrastructure I can spend less time restoring my blog and more time writing content … u should think the same for your business considering … you know, it’s a business :)


How to: Resolve Access Denied on ChangeSiteMasterPage.aspx

Recently I had a pleasure troubleshooting a very interesting issue, a user had Full Control rights on the SharePoint 2013 Office 365 site but could not access the page to change the master page. Since the user had a full control, they obviously were able to see many links on the site and from what I checked all of them worked but this one:

master page access denied

So I’d like to share could of troubleshooting steps I took to fix it; I won’t waste your time and go right into the details:

-Go to site permissions and ensure that the user which is experiencing the problem has correct permissions to perform action of changing of the masterpage; the permissions required are:

-Navigate to the master page gallery (Master pages and page layouts) and ensure that all masterpages are published, if some of the aren’t try to publish them and see if you get an error while publishing them – if you do get an error, you need to resolve that error first.

-Navigate to the master page gallery and ensure the user group Style Resource Readers has read access to the library

-Log in as a site collection administrator and navigate to Site Settings | Device Channels. Ensure that the user in question has at least read access to this list; if it doesn’t then add them, then log in as a user in question and try accessing the masterpage changer page again

-Deactivate site publishing feature and reactivate it

Hopefully this helped you save few hours!


How to: resolve ‘Server Error: This file may not be moved, deleted … ‘ when working with SharePoint master page

Does this look familiar to you?
spd error

How about this?
sharepoint file copy error

Let’s see if I can guess what you’ve been up to.
You opened your site with SharePoint Designer or Master page gallery through SharePoint UI and copied an existing masterpage, say a copy of seattle.master, into the gallery; now you’re trying to rename it and above is the error you’re getting. So far so good? The read on …

SharePoint 2013 has an *.HTML file associated with each *.master and you’re really supposed to edit the *.HTML file and not touch the *.master. But if you created the *.master file by other means and try to rename, delete, or edit it’s properties, SharePoint will try to access the associated *.html file and there isn’t one …. and being SharePoint, you will get an error.

To solve this and get rid of the error, do this:
-Copy the existing *.html file in the gallery
-Rename the copied *.html file to the name you wish to give (or have already given) to your custom master page
-To delete the masterpage, delete respective *.html file instead, etc

That’s it, enjoy!


How to: change the size of the column in SharePoint list view

Do you know how SharePoint determines the size of the Multiline Text type column for the list view? I don’t think SharePoint knows that either.
In essence, Multiline text columns, if there are several of them, seem to get their size from the heading text, so if the text is just one small word – then the entire column and it’s content will be all bunched up in a tiny little column.

SharePoint columns size is random

That’s not always convenient, so I thought it’d be cool to show you how you can control the size of the column using jQuery script.
Ensure you have a latest version of the jQuery file (in my case it’s jquery-1.10.2.js)
As always with these types of customizations, we will add a Content Editor Web Part on the top of the list view. The following is the code to be added to the web part.

<script src="/Shared%20Documents/jquery-1.10.2.js"></script>
<script language="javascript">


function AdjustColumnWidth(){
$("[DisplayName='BigColumn']").attr("style", "WIDTH: 550px");
$("[DisplayName='Column1']").attr("style", "WIDTH: 550px");
$("[DisplayName='Column2']").attr("style", "WIDTH: 550px");

Above you will see three lines of code in the AdjustColumnWidth function:

$("[DisplayName='Column2']").attr("style", "WIDTH: 550px");

See the part that has DisplayName=’Column2′, well change the “Column2″ to whatever is the display name of your Multiline text column. You can also change the width to whatever is the pixel size that you need your column to be

Save the web part content and the page and that’s it!

The result speaks for itself:

SharePoint columns size changed



How to: do advanced SharePoint list view filtering with query string paramters

The reason why this post says “advanced filtering” is because a while ago I wrote a post which explains how to pass query string parameters to a list view to do basic filtering; the only thing is that method only allow for exact match and not “contains”, “begins with” etc.
So this time, I’ll show you how you can pass a query string parameter to a view and do any sort of filtering just as if it was a query defined in a list view UI.

Here is the example of my end result – I pass in a parameter “ren” and it’s matched against a file name in a document library called “rename.txt”
query string filtering end result

Let’s see how to make this happen.

First, chose a list you want to do a custom filter on and create a new view with SharePoint UI.
Here, define how you want the view to look like and how it should be filtered. For example below I have a view in a document library which allows to filter the name of the document based on some custom keyword called “{Param1}” … We’ll talk what this custom param is all about.

view filtering options

By the way, you can define several filters if you like, there is nothing special about this method that will prevent multi-filter.

Next, open a SharePoint Designer and navigate to your list, open the new view you created as “Edit in Advanced Mode”.

newly created view

Locate the section which looks like this:
editing view in advanced mode

Add a new item to the ParameterBinding list as you can see above:

<ParameterBinding Name="Param1" Location="QueryString(param1)" DefaultValue=""/>

In my case, I added a new parameter called “Param1″ and its tied to a query string parameter called “param1″ – this later one is how the parameter is going to be referenced in a query string and can be different from the “Param1″.

While you’re editing your view, scroll down a bit till you see the section where the view query is defined, it’ll be right below the
<ParameterBinding Name="Param1" Location="QueryString(param1)" DefaultValue=""/>

Since you have already defined the filter parameter (the “[Name] [contains] “Param1″, in my case) when you created the view you should see it in the XML of the view like this:

filtering by param in a view XML

You’re all done, now you can save this view and call it with the specified query string parameter, in my case “param1″ and you will see only the files with names containing the letter passed.

Gotchas: One thing I will mention here is that if you don’t pass parameter in here, you will not get any results even if you document library is filled with documents. There are few ways to deal with it; one of the ways is to define a second filter which will always be “true” and make the OR relationship between both filters. I’ll let you decide your course of actions. Technically you would be using this specialized filter view for specific filtering requirements (say in a Page Viewer webpart etc) and All Documents view for general browsing purposes.



How to: Make SharePoint list view chrome-less (no master)

Ok, so this one was coming up few times and today I actually got a chance to do it … the scenario is this: you have a list which you want to embed as an iframe or Page Viewer webpart on other pages, the list is embedding fine but you see the chrome of the site in your iframe, how do you get rid of it.

The example I show here will be done on SharePoint 2010 because this was my requirement, but you can adapt the code to SharePoint 2013.

The idea is this:
-Add a piece of JavaScript (which in my case uses jQuery) to the child page which you want to display in an iframe or page viewer
-The child page, will accept a query string parameter telling it to either show or hide chrome elements
-If the parameter say “hide”, then the script will hide the title area, and quick launch and the footer etc

Ok, considering you already know how to add a web part to the page which is to be embedded on other pages, I’ll just give you the script which needs to be included in a content editor web part; remember you need to reference the jQuery unless you already use it in your site.


function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(||[,""])[1].replace(/\+/g, '%20'))||null

function hidePageChromeFunction() {
hidePageChrome = getURLParameter('HidePageChrome');
if (hidePageChrome == 'hide')
$("#MSO_ContentTable").attr("style", "left:-170px");


Now, save the page; all you need to test if this works as expected is to open the page and pass a URL parameter to it HidePageChrome=hide
Unless this parameter is passed, the page will render as usual and no-one will notice anything.

You can pass the parameter in Page Viewer web part or an iframe like this:


When called this way, all of the elements we have specified to be hidden, will be hidden