Home > Branding, SharePoint Foundation 2010, Visual Studio > A guide to Branding and SharePoint Foundation part 2

A guide to Branding and SharePoint Foundation part 2


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

 

Advertisements
  1. bkwdesign
    January 9, 2013 at 17:14

    Thanks for this tip!

  2. Susanne
    January 22, 2014 at 13:26

    What about SiteLogoImage? It also uses SPUrl…

    • January 22, 2014 at 14:34

      Hi Susanne.
      You are correct, in my Branding Project for Visual Studio however, I set the path to the logo on the sites, not in the masterpage. Like setting it manually using the gui. So using that will not be a problem.
      I do not remember now, but there may be a section on that in the readme file of the SPB project template.
      Regards
      // Thomas

  1. March 27, 2012 at 23:57
  2. May 22, 2014 at 21:46

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: