SharePoint Branding & CSS Specificity
We all know that best practices SharePoint branding avoids the use of !important in your CSS, but how do you correctly control the specificity of your CSS to mitigate the need for it?
The order of operations for your CSS depends on a number of factors, including the loading order of the stylesheet, the order of the styles within that stylesheet, and lastly the specificity of the style. SharePoint allows us to use the <SharePoint:CssRegistration> tag to help provide greater control over the loading order of stylesheets and ensure that your custom style sheet is loaded after all of the core ones. This allows us to easily override the out of the box classes easily, since styles loaded later will override matching properties of identically named styles loaded previously.
I recently ran into a problem when branding SharePoint 2010 MySites for a client. The SharePoint core CSS has classes for branding the “Add New” links on the bottom of list/library web parts (.ms-addnew a:visited, .ms-addnew a:active, .ms-addnew a, etc.). Simple enough, my custom stylesheet that is loaded after all of the core ones overrides the link color to my desired color. But on the MySite, there’s another core stylesheet (portal.css) that gets loaded as part of the layout of the MySite. The CSS link is actually rendered inside the main content placeholder, not in the head. These same few styles are redefined in portal.css, and since that is loaded later, it overrides my override of the core style.
Some people might now stand up, voilla… this is one of those cases where “you HAVE to use !important”, but this is not the case. Remember that little thing called specificity? A style loaded later will not override a previous style if that previous style has greater specificity. Since .class .class element is more specific than .class element, the browser will always choose a more specific style over a newer one.
This being said, crack open your custom master page, and find the opening <body> tag. If your masterpage has been derived from the default out of the box master, you’ll likely see that the body tag has a class attribute with a value of “v4master“. Add a second value to the class attribute (ie: class=”v4master customBranding”). We can now define more specific styles using the .customBranding selector. Using .customBranding .ms-addnew a will always take precedence over the .ms-addnew a in portal.css purely because it’s more specific than any styles already defined in the core stylesheets. No !important here.
Dynamic Master Page Logic
I recently had a need to set a specific master page based on a query string. In this particular example, a SharePoint page needed to be loaded within a frame which presented the need to load a custom master page without navigation, header, ribbon, etc. Initially, I took the approach of simply turning off the unwanted elements with CSS but this approach means those DOM elements are still loaded behind the scenes, even if they’re hidden. This produced a higher than desirable load time and I went off looking for a way to set the master page within my page layout, but doing so in such a way that the master used when the page was “framed” would only be used in that scenario, as opposed to all the time. The solution turned out to be quite simple…
On initialization, the page will grab the MasterPageFile property as set by the web’s configuration. Within my custom page layout, I added the following simple script block to override the default OnPreInit of the page and set my custom master.
<script runat="server">
protected override void OnPreInit(EventArgs e) {
base.OnPreInit(e);
if (this.Request.Url.AbsoluteUri.Contains("frame=true")) {
this.MasterPageFile = "framed.master";
}
}
</script>
I’m using the AbsoluteUri property to check the URL for my “frame=true” reference, which is what ultimately triggers the change in master page. If you go to http://lab/Pages/Test.aspx the Test.aspx page will be rendered using the master page the site is configured for. If you go to http://lab/Pages/Test.aspx?frame=true it will be rendered using the “framed.master” master page.
For some additional background, you can take a look at this post by Eric Overfield, and this post by Juan Larios.
Custom CSS and SharePoint Branding (The Right Way)
There was a post on Stack Exchange this morning that struck a bit of a nerve with me. I don’t aggravate easily, but I’m a firm believer that the purpose of public discussions is to promote best practice methods and share that knowledge with people that have asked for answers to their problems. When best practice approaches were suggested by James Love (@jimmywim) and myself, we were practically attacked by people insisting that their practices were the way things should be done. I’m not naive–there’s a lot of people that make a lot of bad decisions–but the purpose of the community should be (and largely is) to help share the right way things should be done. The size of the deployment or scope of the customizations shouldn’t be an excuse for making bad decisions and following bad practices. At the risk of beating a dead horse, this is the best practices approach for deploying custom CSS styling in SharePoint (and why you shouldn’t be using these other methods).
Suggested Method 1: Write your own custom CSS selectors, and put !important on every selector.
The first suggestion on Stack Exchange was that you had to put !Important on all of your selectors to override any SharePoint styles. If you find that you need to use !important to make your CSS take priority over the out of the box CSS, either your selectors are wrong, or your custom CSS is being loaded before the core CSS. When CSS is rendered, the highest priority selectors will be those that are the last to be loaded (unless an !important declaration exists). Not as big of a deal here but in terms of the actual order of operations, your browser will also treat any inline style attribute as a higher priority than your stylesheet (be it embedded or linked). SharePoint’s core CSS uses nested selectors, so the selectors for your custom CSS must follow suit. If SharePoint us using “body .s4-ca” and you make a custom selector called “.s4-ca”, the browser will render the more specific selector since it has a higher priority. Using !important is a bad practice (for all CSS/web development, not just SharePoint), because it drastically changes the approach you need to use to override that selector/class later. Finally, you need to think about cross-browser compatibility. In SharePoint 2010, this absolutely applies. In a lot of cases, you must write a style one way, then write a modifier to make that style render correctly in older browsers. Flagging !important on all of your styles makes this a real mess.
The use of the !important flag is simply a lack of understanding for how the browser will prioritize CSS markup. There’s a lot of resources out on the web that cover this, but in a nutshell: more specific selectors have priority over less specific ones, and in a scenario where two rules have the same weight, the last one specified will have a higher priority. Use debugging tools such as those in Internet Explorer or the ones within Google Chrome or the Firebug extension for Firefox to identify the selectors that SharePoint uses. Personally, I prefer Chrome because the developer tools are included without the need of an add-on, and you can make real-time changes to the CSS which are rendered in the browser as you edit (making it an excellent development companion when authoring new CSS). Once you know what selector SharePoint is using, use that same selector. Lastly, make sure that your custom style sheet is being loaded into the master AFTER SharePoint’s core files because remember, when rules have the same weight, the last one loaded takes priority. This ensures that your styles take over, without filling your markup with !important flags.
Suggested Method 2: Just modify the core files in SharePoint Designer.
Obviously it’s a bad practice to edit any core files, be it Master Pages, CSS or JavaScript. A particular user was adamant that it was an acceptable method because when you customize a file in SharePoint Designer a local copy is created just for that site, so you’re not affecting any other sites on the farm. While this is true, updates to core files can still be made during service packs or patches, leaving your customized file behind. Granted your custom master pages are never going to be updated, but keeping the core files uncustomized ensures you have a supported rollback plan–something you obviously loose when you start customizing the core files. There’s a lot of talk about SharePoint upgrades these days, and this is one of the things that will potentially make your upgrade an utter nightmare. Sure, you can go in and reset all of the customized files to their definition, but should you have to? Making a copy of a file takes all of a couple seconds and it will make your life 10 times easier if you need to reset to vanilla SharePoint. Can you just edit files, yes. Does it work, yes. Should you do it, no.
Best Practice Method 1: Branding Deployed via Solution
Hands down, the best practice for branding deployment is a Visual Studio solution packaged into a WSP and deployed to the farm. This method makes maintenance and updates to your branding solution easier, gives you more robust change control, and integration with source control (such as Team Foundation Server). Deployment via solution also makes your branding reusable between multiple site collections. Unlike modification of files in SharePoint Designer, you no longer have to touch 10 master page files to brand 10 sites; simply activate the solution. If you need to deploy an update to your solution, the update will automatically be pushed to each site where the solution is active (assuming you haven’t customized the files in SharePoint Designer). A correctly built branding package will also give you the capability to rollback to vanilla SharePoint with just a few clicks. It may not seem like an important thing now, but when you go to upgrade to the next version of SharePoint you’ll be glad you can do that.
Best Practice Alternative: SharePoint Designer
SharePoint Designer is a tool that has a lot of functionality. Yes, you have the ability to modify master pages and things of that nature, but it doesn’t mean that you should. Simply because you can do something doesn’t make it a best practice. That said, in certain environments you may not have the ability to deploy a solution; either due to a lack of staff with the know-how, a policy restriction, or lack of the necessary access to the server. In those scenarios (and only in those scenarios) should SharePoint Designer be used for branding. If you must use SharePoint Designer, you should follow some common-sense guidelines, one of the fundamental ones being to not modify out of the box files. If you need a custom master page, make a copy of the v4.master and work from that.
Where Should the CSS Live?
The purpose of a stylesheet is to promote reuse. It doesn’t make much sense to include your styles in every page, and in SharePoint 2010 where we have standard and minimal masters, it doesn’t make sense to duplicate your common styles by including them in each master page. Your stylesheet should be an external file, stored where it can be used by all instances of the masterpage(s) using them. If you’re deploying your branding using a solution, then most likely these files should live in a folder within the 14 hive. I’m personally not a fan of putting them in the style library, since (despite being able to manage it from the 14 hive), your browser will treat them as separate files for each site collection. This means that my browser will re-cache my stylesheet for each site I go to, even though they’re exactly the same file. If it’s 10 lines of CSS then this is negligible, but if I’ve got a few hundred it makes a difference.
Continuing Education
I’m not one of those people that usually promotes books, but if this topic is something that you wish to brush up on I suggest you get your hands on a copy of Randy Drisgill’s (@drisgill) book. He covers (in detail) processes for branding as well as the issue of CSS priority.
Demo
James created a great screencast that shows the process for correctly referencing external CSS files using the SharePoint:CSSRegistration tag. Check that out below, and visit his blog at http://e-junkie-chronicles.blogspot.com/.
Unveiling: New Branding
With some slight change of direction planned for my blog, I figured it was time to do a bit of rebranding. In line with my previous rumblings about personal brand awareness and About.me, I did a full ground-up rebranding including a complete theme refresh, navigation refresh, and re-categorization of every legacy post. I’ve also branded my Twitter and About.me profiles to match.
SharePoint for Public Facing Government Sites
Tasha (@TashasEv) re-tweeted a post by @TopSharePoint this morning with a list of public facing government sites built on SharePoint 2010. The list comprises of government sites from around the world, and while some of them aren’t terribly new it is still a great showcase of major organizations and agencies leaning on SharePoint for their public site needs.
About.me: Next Gen. Digital Business Card
My account over at About.me was initially created just as an experiment to see what the platform was like. The more time I’ve spent customizing my profile, the more I’ve realized that About.me really has the potential to become the next generation digital business card.
Not only is the profile itself surprisingly customizable (check out the directory if you think I’m kidding), but the social network integration is among the cleanest I’ve seen in a while. When you add your various social networks to your profile you have the option of just making them links, or actually loading the content into About.me. I have noticed some quirks, Foursquare for example will not show how many checkins I’ve got no matter how many times I remove and relink it, and I can’t seem to figure out what permissions it’s using to Facebook (since I gave it full permission and it only found three photos of me). On the flipside, the integration to Flickr, LinkedIn and Twitter seems spot on.
As the platform continues to develop, I expect it to get even more powerful; potentially to the point of being a central hub between networks. If you don’t have an account, head over to About.me and sign up (you’d hate to wait a year and not be able to get a cool URL).
(Personal) Brand Awareness
Successful brands have been balancing the line between print, web, and brick-and-mortar elements for decades. With the rapid adoption of social media, that trend has continued to the familiar social media tools we all use every day. The limitations of avatars, and sometimes little options for customization have forced us to be a little creative, but an uncompromising implementation of the brand is almost always possible.
Dell is one of those companies that has traversed the plethora of social media networks without compromising the integrity of the brand (which after-all, is the point). Support forums are easily recognizable with the Dell moniker, tweets carry the familiar Dell logo, the YouTube channel is heavily customized, and most importantly everything is consistent.
Now, you may be wondering why I put “Personal” in the title if we’re going to talk about Dell. The point here is that the same strategy of a major brand can also apply to your personal brand. There’s two schools of thought on personal brands: 1- branding is a big corporate term (so why should I care), and 2- there’s value in providing a consistent, recognizable, and professional image of yourself across multiple mediums. The first rule applies to those of you who are just casual users; you’re the people that use Facebook to just talk to family, Twitter to tell me that you and your BFF are going roller skating, and have no idea what LinkedIn is. For you, it doesn’t matter if your Facebook picture is a weekend snap of you drunk at a party, or your Twitter avatar is the default Twitter bird, because well, it just doesn’t matter. The second rule applies to anyone who uses a combination of these services in a professional capacity, such as selling a product, supporting a product, blogging, professional networking, or community involvement.
White Paper: SP2010 Enhancements for the iPad
My recent white paper titled SharePoint 2010 Enhancements for the Apple iPad includes topics on orientation detection, orientation-aware content, and cross-platform embedded video solutions.
