SharePoint Conference catchup with Heather Solomon

While I was at the SharePoint Conference in Seattle, I caught up with Heather Solomon (SharePoint branding MVP) from SharePointExperts.com.

Below are some of the tips and tricks that we discussed (and some of my own tips):

1. Explore using CSS to customize the OOTB navigation controls before you go out venturing on creating your own.
2. Incorporate the @import to include your CSS in your Master Pages. Heather's opinion is that you should only use the alternate CSS option to tweak particular areas.
3. Store your CSS and branding images on the web server. Images go in their own directory under 'Template\Images'. The CSS file should be stored inside a directory under 'Styles' (under the 12 hive).
4. Package your branding in Solution Package/Feature. Check out
   http://codeplex.com/stsdev for a Visual Studio Project Template for this (developed by Ted Patterson and Andrew Connel)
5. On the development machine, turn off custom errors in the web.config (
   set Callstack = False. Set CustomErrors=Off)
6. Apart from using Alternate Stylesheets, Themes can also be used to help brand the Application.master template (remember you can't actually change the HTML structure though)
7. Meeting Workspaces do not pick up your custom master page. There is some special code in the meeting workspace master page that renders the multiple meeting navigation that you normally see on the left hand side. You need to create a separate masterpage for the meeting workspace, then create a feature stapling to the meeting workspace to change its default master page.
8. Blogs and Wikis use different styles, so be careful
9. Take advantage of contextual selectors (e.g. div#mydiv ms-SPLink {...} )
10. The word specificity (which I can never pronounce in meetings) basically means that a number is derived from the way in which an element is styled. Sometimes you see styles overriding others when you see things like class names sitting right next to the element. Think of the number as A-B-C. For each ID that you use, you add 1 to A. For every class you use, you add 1 to B. Then for a base class definintion, you add 1 to C. So p#largetext ul.mylist li has a specificity of 1-1-1 (or 111). If I just set a style on li (corresponding to a specificity of 1), the specificity with the highest number would be applied to the element.
11. Don't go crazy with classes. Use IDs more often and classes sparingly. That way in your CSS, you can use contextual selectors to define a style. E.g. div#mydiv table tr td a { font-family: Verdana }. In this example I haven't used classes at all. I am basically finding the element by starting at the ID level first.
12. Heather mentioned that in the past, she has seen SharePoint Designer take grouped styles (e.g. h1, h2, h3 ....) and separate them to h1 {} h2 {} etc (so adding more lines than what is necessary). Heather uses 'Top Style Pro 3.5' to author her CSS, but she hasn't tested opening up a CSS stored in the 'Style Library' areas (remember that she prefers to have the CSS stored on the web server).