I like using CSS classes to format specific content of my blog posts, in order to keep my formatting centralized. I prefer HTML that looks like this over inline styles:

If you invoke the <span class="code">GetData</span> method, ...

Quickly inserting CSS directives is something you can’t easily do with Windows Live Writer. This started to annoy me while writing an article, so I came up with two simple plug-ins that do just that: Formatting selected text through CSS classes.

Plug-in 1: Quick-Insert a Predefined CSS Class

This is a very simple plug-in that stores one (1) single CSS class name, and applies it to the selected text with a single click. This is a fastest possible way to format several junks of your post with the same CSS class.

The simple assignment comes has a price, however: It takes some more work to reconfigure the used CSS class. Therefore, it mainly makes sense if you have quite a lot of similar content to format at once. Otherwise, the second plug-in is probably the better choice.

Using the Plug-in

Once the plug-in is installed (instructions at the end of the article), you’ll notice an additional entry on the side bar and the Insert menu of the tool bar, saying “Quick CSS…”:

All you have to do is selecting the portion of text you’d like to format, and click on the plug-in. The configured CSS class name will be immediately applied to the selected text.

First invocation / configuration

The first time you click on the plug-in, there is no formatting happening. Instead, the plug-in displays its options dialog because no CSS class has been configured yet. This dialog allows you to quickly set the CSS class that should be applied:

Subsequent clicks on the plug-in directly apply the class name you configured – this dialog is only opened automatically the first time.

Changing the Class Name

You can change the name of the used CSS class at any time. This requires a bit of work though, as you’ll have to go through Live Writer’s options dialog:

Plug-in 2: Selecting a CSS Class from a List of Class Names

This is a more flexible plug-in. It takes two clicks to format your text with a given CSS class, but it maintains a configurable list of CSS class names, and allows you to quickly select the class name to be applied from a popup.

Using the Plug-in

Once the plug-in is installed (instructions below), you will find a new entry saying “CSS Format…” on the side bar and Live Writer’s Insert menu. Clicking the plug-in (which causes a short delay the first time) opens a popup that lists your CSS classes in alphabetic order. In order to apply a CSS class to the selected text, just double-click a class name:

Most Recently Used Items

Note that if you have configured 10 or more CSS class names, the popup will display two lists, of which the upper list contains the 5 most recently used class names.

(I could make that feature configurable in a subsequent release, if requested.)

Configuring / Importing CSS Class Names

The plug-in allows you to quickly configure class names through a custom configuration dialog, and also supports importing class names directly from a CSS Style Sheet. You can open the dialog through the Popup by clicking the “Options” button:

Style Sheet Import

Clicking the Import Style Sheet button opens a file dialog that allows you to select a style sheet (probably the one you’re also using on your blog). Once selected, the plug-in imports all new class names from the style sheet.

Live Writer Bug: Reformatting Span-Tags

It appears that Live Writer has a bug when it comes to reformatting already formatted text spans. There’s currently no simple fix for this bug, so keep this in mind:

Imagine you have a preformatted junk of text that looks like this:

<span class="foo">hello</span>

Now, if you select the word “hello”, and try to assign it another CSS class (bar), you’d expect the new markup to look like this:

<span class="bar">hello</span>

Instead, Live Writer just keeps the old span, and wraps it into a second one.

<span class="foo"><span class="bar">world</span></span>

Download and Installation Instructions

Download Links

Plug-in 1: Hardcodet.LiveWriter.QuickClassInsert.dll

Plug-in 2: Hardcodet.LiveWriter.ApplyCss.dll

The second plug-in requires Microsoft .NET Framework 3.5 SP1 (download here)

Installation

In order to install a plug-in:

1. Make sure Live Writer is not running
2. Copy the plug-in DLL into Live Writer’s Plugins folder. Usually, this is the following path: C:Program FilesWindows Live WriterPlugins

Source Code Download for Developers

You can also download the source code of the plug-ins:

css-plugins-for-live-writer.zip