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

A guide to Branding and SharePoint Foundation part 1


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

About these ads
  1. Matthew
    November 26, 2013 at 15:56

    Very helpful.
    Do you have any suggestions for grabbing files (specifically images) from SharePoint using external JS or CSS files?

    • November 28, 2013 at 09:01

      Hi Matthew.
      Please elaborate, I did not get what you were after? :-)

      Regards
      // Thomas

  2. Matthew
    December 2, 2013 at 15:44

    I have images uploaded to all of my site collections at /_catalogs/masterpage/Images. I want to call these images through a javascript/stylesheet file that will be appended to the masterpage when activating a feature (e.g. AlternateCssUrl).

    Basically the code would be something like:
    $(“”).attr(“src”, “_catalogs/masterpage/Images/image001.gif”);

    Now I have followed your instructions as well as any other tutorials regarding SharePoint Relative Urls, but none of them seem capable of translating the SP syntax from an external file.

    • December 2, 2013 at 15:48

      Hi.
      Why not use the full URL instead of the relative? Have you tried it?
      If only to see if the rest of the code works?
      // T

      • Matthew
        December 2, 2013 at 16:26

        I know the rest of the code works. My js file will brand the masterpage and my stylesheet will alter an adjacent element next to where my image should be. If I check IE dev tools, I can see my files being read.

        And where I should see something like:
        “sharepointdev.site-central.com/sites/newsite/_catalogs/masterpage/Images/image001.gif”,
        all I see is:

        You suggest I use the images located in one site collection to define all my other site collection masterpages and web applications? How does that make it any different to storing the images into the HIVE 15?

  1. March 27, 2012 at 23:48

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

Follow

Get every new post delivered to your Inbox.

Join 231 other followers

%d bloggers like this: