I am frequently asked to build HTML email templates for clients and internal projects.  Recently, I created a template as a base to start from.  The template is available for download, feel free to download and use it if you are looking for a neat clean standards complient start to your email marketing campaign.

Sending HTML email can be a challenge.  Questions about image hosting, embeded CSS, viewer support etc. are exponentially more complicated than a simple web page. My approach to this project was to make the template as simple as possible placing the emphasis on the content with fewer images, included CSS, simple but elegant design and fully complient markup.

Just to be safe I designed for IE6 and up.  Because of this I am using a “transitional” DOCTYPE and hybrid markup strategy that utilizes tables for structure and CSS for font styles, backgrounds and margins.  The layout is a simple 2 column design with header and footer.  In its current form the template requires on four images, thumbnail and feature images are optional.

Super Clean CSS

Download the template and images

SharePoint 2010 presents a few branding challenges with the introduction of the “ribbon” into the Master Page.  However, while the ribbon adds a level of complexity to the branding exercise other parts of the job seem to be easier.  Adding a little style to the left or current navigation is a breeze.

Don’t over think it
There is always a temptation to start with an existing template and begin overriding the existing classes…DON’T DO IT!  Create your own style and reference it in the control.

I started with Randy Drisgill’s Starter Master Page.  Open your starter master page in SharePoint Designer 2010 and switch to split view so you can see your code in the top pane and your design in the bottom pain.  Click on the left navigation in design view and you will see the left navigation code highlighted.  Notice the line for “CssClass”?  That’s where we are going to put out class name but first let’s build our style.

Build your own style
First, take a look at the style code already in your Starter Page.  Randy has included a class called “customLeftNavHolder”.  This class is there to help keep the left navigation in roughly the right position.  I started by cutting that class from the master page and including it in my primary style sheet.  This class will allow us to tweak the position of the left navigation so we may as well keep it.  I added a top and left margin for some much needed white space.

The next step is to create your own style code.  I am keeping it simple with a background and image hover effect.

A note about CSS
I created a code block just for Current Navigation.  Over the years I have developed my own style for writing clean organized CSS markup.  While you can’t control the condition of Microsoft’s CSS you can control your own.  I would encourage you to do whatever works for you in your style sheet.  You will be referencing this CSS a lot so make sure you do what works for you!  I always create a clear block header and then nest my classes according to classes and their descendants.  Another thing I like to do is place the properties of each class in alphabetical order.

Once we have established our class we can add it to the master page.

Where should I put my CSS?
Good question, I guess the answer depends on your objectives.  I created a folded inside the style library and place my own image and style folders inside it.  This allows you to apply SharePoint check out and check in processes to your style sheets and images.  If security and performance is a huge concern you may consider putting your assets in the hive.

The final product
SHAZAM…that was easy!  Five minutes of work and our left navigation is custom

The developer tool bar is one of the most powerful weapons in your arsenal when it comes to SharePoint branding.  Digging down into the master pages and numerous style sheets to determine what classes are at work is so important, but if you are new to the IE Developer Tool Bar it’s not always obvious how to make it work for you.  With just a couple of simple steps you can pick apart the SharePoint style sheet properties like a pro.

Can’t us it if it’s not installed!  The tool bar is not part of the standard browser install so you are going to need to download and install it.  You can get it here…

After installing the tool bar you can launch it by opening IE.  In IE 8 go to Tools>Developer Tools.  This should launch a  window with the tool running.

Click on the window icon in the upper right corner of the tool to “pin” the tool to your browser window.  Now you’re ready to work! 

Open your SharePoint home page.  Now, the most obvious thing to do would be to click on the CSS tab…right?  Well that gets’s you a nice check list of all the classes that are current at work on the page but that hardly useful.  What if you click on View>Class and ID Information?  This option will label all the classes being used but the some many of the classes used in SharePoint are overlapping that this view is aweful, OMG make it stop!

No, the best thing to do is click on the HTML tab.  Next, select the arrow icon which will allow you to select parts of the page without activating the links.  Select any area of the page.  I selected that Site Actions button and not only are the style names displayed in the window below, they are also nested showing you the relationship of each style one to another.  Ladies and gentleman this is a big deal and could potentially save hours of searching through CSS files or view source.

Good luck with your project!