Over the time I’ve been using SharePoint, I’ve been taking notes on the tools and that make my job a little bit easier. Lately I’ve focused on collecting a ton of tips for working with branding in SharePoint2010. To help other people working with branding in SharePoint, I thought I should share some of my information. Read on for some “quick tips” from the C5 Insight team–we hope these tips make your job a little easier!

Tip #1: Use Third Party Fonts in a Master Page
Let me guess… you want to change the fonts used in SharePoint to match a marketing standard but the fonts aren’t included in SharePoint by default? Follow my lead and do it all with CSS. First, we need the font files. Usually when you download the font, you get multiple files to render in the different browsers including .eot, .svg, .tff, .woff to be able to be re-used in your environment.

I created a folder under the following path: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\<newfolder>

Now go edit your CSS. In my case I am storing the CSS files in the same folder, however, you could store the files in a style library. If you’re lucky, the fonts come with a sample CSS file that has the exact styles you need. At the top of your CSS file, insert the @font face styling that loads the files. In our case, we’re loading a font called “Gnuolane.” It will be similar to this:

    font-family: 'GnuolaneRegular';
    src: url('gnuolane_rg-webfont.eot');
    src: url('gnuolane_rg-webfont.eot?iefix') format('eot'),
         url('gnuolane_rg-webfont.woff') format('woff'),
         url('gnuolane_rg-webfont.ttf') format('truetype'),
         url('gnuolane_rg-webfont.svg#webfontTV9Olmrw') format('svg');}

Sometimes if the font doesn’t load right in another browser, check the svg id tag (#webfontTV9Olmrw). This needs to match the font file. Open the .svg file in Notepad++, and find its font id: 

    <font id="webfontTV9Olmrw" horiz-adv-x="470"

Now we can use the font in our CSS. For whatever element you want to style, use the following CSS:

     font-family: 'GnuolaneRegular',Arial;

Tip #2: Redirect the Site Logo Link in a Master Page
On a branding project, there are times when you need to force a specific site logo across site collections and want to redirect where the link takes you when you click on the site logo. If you’re doing custom branding, you’ve already created a custom master page. So let’s say we want our logo to be used in all sites no matter what. First, edit your master page at the following line:

      <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitleGraphic">

Notice the NavigateUrl tag. By default it uses the web object token represented by ~site. It could go to the site collection root instead of the web with ~sitecollection. If you want to redirect to the root of the webapp, just use “/<ns0:sgtag ns1:matchid="83cb7269-b8fa-4d77-9ae1-853bd4cc9902" ns1:suggestion=".”" ns1:matchtext="”." ns1:styleid="60d0c6ba-a590-4f27-b39d-cda5c5c30be9" ns1:ruleid="bffd300c-bffc-485a-a345-73b80e5a09af"><ns0:sgtag ns1:matchid="83cb7269-b8fa-4d77-9ae1-853bd4cc9902" ns1:suggestion=".”" ns1:matchtext="”." ns1:styleid="60d0c6ba-a590-4f27-b39d-cda5c5c30be9" ns1:ruleid="bffd300c-bffc-485a-a345-73b80e5a09af">”.<ns0:sgtag ns1:matchid="83cb7269-b8fa-4d77-9ae1-853bd4cc9902" ns1:suggestion=".”" ns1:matchtext="”." ns1:styleid="60d0c6ba-a590-4f27-b39d-cda5c5c30be9" ns1:ruleid="bffd300c-bffc-485a-a345-73b80e5a09af"> So no matter where you are in the site structure, you’re always taken back to the root like a portal site collection.

Tip #3: JavaScript to Get Current Year

This might be typically used in a footer, where you want the current year in a copyright. Ideally, you don’t want to have to edit the master page every year. JavaScript to the rescue! Assuming you want text like the following, as a hyperlink that opens in a new window with a dynamic year: 
       © 2013 C5 Insight, Inc.

Then you would insert the following into your master page in your footer, inside a div or table TD:
<a href="http://www.c5insight.com/" target="_blank">   
       &copy; <script type="text/javascript">var d = new Date();   document.write(d.getFullYear());    
       </script> C5 Insight, Inc.</a>

This uses the Date() method, dumps into a variable called d, then gets the year part of the date.

Tip #4: Using Multiple Image Maps on a Page
I actually discovered this tip by accident. We were using a temporary home page until the final intranet was released. On the page we had an image map that linked to a couple documents outlining the changes to come, along with an image map in the footer. When you use an image map, typically you just take the default name of “map.” If two image maps exist on the page with the same name, one was working and one was not. To fix this, just change the name of one of the image maps and both image maps will work fine. 

To find out more about this blog post or C5 Insight, please fill out our
Contact form.