So you've decided to export some of your ListPro lists in HTML format to publish on the web but you’d like a bit more control over how the published lists look… If you don’t mind getting your hands dirty with a bit of HTML and CSS, then this article is for you.

ListPro makes it really easy to output to html – just open your list and Export to HMTL:

You can take the output file and open in a browser and Kazaam! - there’s your list ready for web. For this article I’m using a mini version of the Grocery List and I’ve exported it to a file called GroceryList.htm which looks like:

But let’s say you’re not so crazy about the default formatting and colors in your exported web page and would like to change them. It’s not too hard, but we’re now entering the world of HTML and CSS. CSS (Cascading Style Sheets) let you change the appearance of a web page without changing the content. There are several good resources for CSS: one is the A List Apart site which has many great articles on web development; another is Eric Meyer’s book, CSS: The Definitive Guide.

To change the appearance, you just need to change the appropriate CSS values in the file you just exported. Let’s open the file with a text editor - I’m using UltraEdit but Notepad works too. We see the following near the top of the file:

ListPro has defined a default appearance for much of the web page; for example, the font is set to Verdana with a size of 8pt. For our example, we’ll change the default caption font size, color and alignment to make it stand out a bit more. We just add the following bit of text anywhere in the CSS section:

 caption {
    font-size: 12pt;
    font-weight: bold;
    color: blue;
    text-align: left;
}

and the output changes to:

Note that our changes are now reflected in the blue “Grocery List” caption at the top of the page. We can change any of the CSS values that we’d like to as long as we follow the rules for CSS.

“Ok,” you say, “that’s great, but do I have to do this every time I output a file? Boring!” No, of course not. One of the great things about CSS is it can be separated from the HTML so you can apply it to multiple files.

To make this work, you’re going to need another export option. You can add additional export options by writing your own XSLT files but we’ll leave that for another article. I’ve built an export file called “External CSS.xslt” that you can download here. Copy or save the file to your HTMLStyles folder in your ListPro installation (typically it’s C:\Program Files\Ilium Software\ListPro\HTMLStyles).

Now when you export your list and pick “External CSS”, your web page will look for a file called ListPro.css and uses it for the styling information. You can change your ListPro.css file once and any web page that you export can use the customizations you’ve made without you having to change each file separately.