Site Logo link to Root Site Collection in SharePoint 2013

For most users, the Company Logo in the header of a site indicates a link to the Root level Home page of the Site. However, in SharePoint 2013 the SiteLogo snippet provides us with a Clickable Logo that links to the homepage of the current site only. So within a sub-site, the default behaviour would redirect us to the home page of that particular sub-site, and not to the Root Home Page.

To convert the SiteLogo code snippet into the good ol’ fashioned Root Home link that we’re used to, we need to change the “SPSimpleSiteLink” into “SPLinkButton“, which would then allow us to add the appropriate redirect url property to the Site Logo.

1. From the Snippet Gallery, copy and paste the default SiteLogo code snippet into your master page into the appropriate place you want it to be displayed.

2.  In the SiteLogo code, search for SharePoint:SPSimpleSiteLink to find the relevant opening and closing tags. Now simply change the tag names to SharePoint:SPLinkButton instead.

3. Then simply add the attribute NavigateUrl to this tag and set it’s value to “~sitecollection/”.


Default snippet code:

<!--MS:<SharePoint:SPSimpleSiteLink runat="server" CssClass="ms-siteicon-a" ID="x7917ecc8c38d4bd69f58e338eab54c8c">-->

Should become this:

<!--MS:<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/" CssClass="ms-siteicon-a" ID="x7917ecc8c38d4bd69f58e338eab54c8c">-->

Applying Custom Styles to Page Layouts in SharePoint 2013

When working with SharePoint, there may always be an occasion where you want to apply some specific styles to appear only when a page uses a specific Page Layout. For example, your Master Page may contain a Left Navigation that is needed throughout the site, but you may want to hide it just on your Landing Page Layout.

There are basically 3 ways in which this can be achieved:

01. Custom Style sheet

In your custom Page Layout, search for id=”PlaceHolderAdditionalPageHead. You’ll find it in an opening tag that looks like this:

<!–MS:<asp:ContentPlaceHolder id=”PlaceHolderAdditionalPageHead” runat=”server”>–>

Continue reading

Cufon Tutorial – Hover, Foreign Characters, jQuery, Punctuation

Here’s a quick, no-fuss guide to working with Cufon.  Examples included

Hover effect on links

Set “hover:true” in your Cufon.replace statement.


Cufon.replace('a.linkStyle', { 
    hover: true, 
    fontFamily: 'National Book' 

Foreign character support

Select required glyph support checkboxes before generating cufon files.


Continue reading

SharePoint 2013 – Open in Explorer

If you’ve worked with SharePoint Designer, 2010 or 2007, you’ll know that it likes to do a little number on you when you try to edit certain files within Designer itself. Try opening a file to edit and then save it, and most probably you’ll find yourself with an error on your site. It doesn’t happen all the time and with all files, but when it does occur, it’s quite a headache so I do my best to avoid it.

To combat this, I used to check-out a file in Designer, and then open up a local copy of the file in a separate editor like Dreamweaver. Then I would make my changes and save, and finally, drag and drop the updated local file from File Explorer into Designer. Phew! That’s quite a waste of time when you consider doing this repeatedly, whenever you make a change in the file and want to see it reflected in your site.

Luckily, SharePoint 2013 gives us a simple neat feature to bypass this hassle, called Open in Explorer. Essentially, it does exactly what its name suggests. It will open up your site files in File Explorer so that you have direct access to edit them however you choose, bypassing the possible pitfalls of SharePoint Designer. This is especially useful if you prefer to use editors other than Designer to make changes to your site code.

So here’s a step by step example of how to use the Open in Explorer feature in SP2013.

Continue reading

Like Riding a Bike

A year ago, I did a 1-year internship as a Trainee UX Engineer. It mainly involved Web Development and SharePoint Branding. After being completely absorbed in HTML and CSS for a year, I returned to University to finish the final year of my degree. That meant a whole year away from Web Dev related material. Now, as I am planning to rejoin my previous workplace and resume my work in a couple of weeks, I decided it was time to take my HTML/CSS skills off the shelf and dust them off and see if they still work.

There’s an expression that goes like this:

“It’s Like Riding a Bike — A skill that, once learned, is never forgotten”

They say, once you learn to ride a bicycle, you can never forget. Here’s me, hoping that Web Dev and SP Branding is like riding a bike 🙂

So over the course of the next few days I plan to refresh myself thoroughly (or as thoroughly as possible) on my HTML and CSS. Let’s call it a Refresher Course in SharePoint Branding.

Here’s my plan (subject to change, ofcourse):

  • Day One – The Best of HTML
  • Day Two – CSS: Greatest Hits
  • Day Three – SharePoint’s Anatomy
  • Day Four – SP Branding Tidbits
  • Day Five – Leftovers

Here’s hoping that by the end of this series, I’ll be polished, sharp and work-ready 😉

Welcome to… Me

My First Blog! And my first Blog Post!

Hmm… so here are the basics…

Me ==> Fresh off from University and ready to put all that I’ve learnt to some use… Man, I hope I learnt something…

This Blog ==> As of this moment, I plan to fill it with official-type stuff… you know, work related things. But I can’t predict where we might end up. So let’s see how it goes 🙂