Archive

Archive for March, 2012

A guide to Branding and SharePoint Foundation part 2

March 27, 2012 5 comments

A guide to Branding and SharePoint Foundation
Part 2

Part 1 | Part 2 |

This is the part two of the series trying to cover the tweaks needed to get a starter branding going on a SharePoint Foundation installation.

In part 1 I tried to explain why the most common method of using the $PUrl to get the relative path does not work and also how to customize the masterpage in order to insert a custom favicon without the use of $SPUrl. Now I will cover how to add a custom CSS to your master without the use of $SPUrl.

The most common method on a SharePoint server is to add this line:

<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/My Branding/MyStyles.css %>”After=”corev4.css” runat=”server” />

After the default CSS loader:

<SharePoint:CssLink runat=”server” Version=”4″/>

But since the use of $SPUrl is unavailable to us, we need to find something else. If we use a hardcoded path it will work as long as the master is deployed only in the site collection root, but if we want to use the same master in all subsites(spwebs) as well, then we need a way to get the relative path from the sitecollection root. In my SharePoint Branding Project Foundation adaptation I solved it like this:

<asp:literal runat=”server” Text=”&lt;link href='”/>
<SharePoint:ProjectProperty Property=”SiteUrl” runat=”server” />
<asp:literal runat=”server” Text=”/Style Library/My Branding/MyStyles.css’ rel=’stylesheet’ type=’text/css’/&gt;”/>

What the code does is that it builds a new href link that point to the custom css deployed to the site collection style library, same as the <SharePoint:CssRegistration would, it renders a link and loads the css. If we want the custom css to be applied after the default, then we also need to add these lines before the default css line.
The trick to this is the use of the webcontrol SharePoint:ProjectProperty that is available for use in Foundation as well as Server. This will give you the URL to the Site Collection root, for example:

http://www.mycompany.com/sites/finance

Putting two literal contols before and after the webcontrol to fill in the text needed for a complete link tag is all that is needed.

This solution works very well for me, I hope that you will also find some help in my suggestion.

See also part 1, on how to add a custom favicon to your Foundation master

Stay tuned!

Regards

 

A guide to Branding and SharePoint Foundation part 1

March 18, 2012 6 comments

A guide to Branding and SharePoint Foundation
Part 1

Part 1 | Part 2 |

SharePoint branding is something that most everyone wants to do, the default design is pretty good and stylish but it get dull and it does not fit in with any organizations brand book or design policy. A lot of posts have been written on the subject of SharePoint branding, many books have been published and most of what can be covered has been covered. What I found though during my work with the SharePoint Branding Project, is that there is a lack of information about branding and Foundation. Lots of organizations run Foundation, the reasons for doing so are many but the facts remains, SharePoint Foundation 2010 has a very large installed base. So, can’t we just buy the book on SharePoint branding and implement it in our Foundation farm? The answer to that question is most of the time no, or rather, not very likely. SharePoint Server has one vital component that Foundation lacks, it has a publishing infrastructure feature. In most cases the publishing components are used for some vital parts of a branding package, the most common one that you will see in almost every post is the

<% $SPUrl:~sitecollection/pathtosomething/%>

The SPUrl token is very handy when storing files in a centralized location in SharePoint, like for example the ‘sites/mycompany/style library/’. Lets use the FavIcon as an example in the first part.

<link rel=’shortcut icon’ href='<% $SPUrl:~sitecollection/Style Library/My Branding/Images/favicon.ico %>’/>

This tag would in Server farm pick the FavIcon image out from the site collection root. In Foundation you would see an error similar to this:

‘The expression prefix ‘SPUrl’ was not recognized. Please correct the prefix or register the prefix in the <expressionBuilders> section of configuration.’

Accessing CSS or Image files in the Style Library is easy using the $SPUrl expression builder to get the relative Site Collection Root URL(/sites/mycompany) or even the current Web Root URL. In Foundation the SPUrl token can’t be used so we need something else. One solution is pretty easy, just enter the relative path:

<link rel=’shortcut icon’ href=’sites/mycompany/style library/my branding/Images/favicon.ico’/>

For the Site Collection Root the path would resolve to:

http://webapplication/sites/mycompany/Style Library/My Branding/Images/favicon.ico

Perfectly allright, the favicon would be loaded. This is a great solution, with one huge flaw. If you have the branding implemented in all of your subsites then the path will be correct only in the root. Since the path is relative, it would in an example subsite look like this in the master:

<link rel=’shortcut icon’ href=’sites/MyCompany/Style Library/My Branding/Images/favicon.ico %>’/>

For my SubDivision subsite the path would resolve to:

http://webapplication/sites/mycompany/subdivision/Style Library/My Branding/Images/favicon.ico

Not ok! The load would fail since the favicon.ico is not located there. So, the permanent relative is only good for a site collection root with no subsites. You could obviously add the file to every subsite so that the path would work, but that is not really an option in most cases. So, how do we do it then…? In my own SharePoint branding project I use this workaround to replace the <link rel=’shortcut icon’ token:

<asp:literal runat=”server” Text=”&lt;link rel=’shortcut icon’ href='”/>
<SharePoint:ProjectProperty Property=”SiteUrl” runat=”server” />
<asp:literal runat=”server” Text=”/style library/my branding/images/favicon.ico’/&gt;”/>

It is a workaround, but it works. This will in reality build a relative path to the Site Collection Root even in the subsites and it will build up the <link> token by using 2 literal asp controls and the SharePoint:ProjectProperty control that is available in Foundation. The result in runtime will be the same as for a URL built on the $SPUrl expression builder.

<link rel=’shortcut icon’ href=’sites/mycompany/style library/my branding/Images/favicon.ico’/>

Add this to your Masterpage and you will have a functional FavIcon that uses a relative path.

Stay tuned!

Best regards