Food for thought
How your blog can help victims of Hurricane Katrina

Just Your Style

In an effort to make it even easier for our TypePad Pro users to do cool things with their blog design, we created TypePad's new Custom CSS (Cascading Style Sheets) feature. You can now tailor the look and feel of your weblog without having to manage the complexity of advanced templates. By customizing the CSS instead of the templates, you can concentrate on the presentation of your weblog without having to worry about the underlying page structure.

And the best part of customizing the CSS rather than using advanced templates? Any time we add new features and content modules you'll be able to use them right away.

We asked Randy Reddig the TypePad engineer who developed this feature to tell us about why he created custom CSS and how you can take advantage of it on your blog.

Randy Reddig on Custom CSS

Q: What do you do at Six Apart?

Randy Reddig's photoA: I'm an engineer at Six Apart. I'm on sort of a long leave of absence from the gaming industry, implementing user interfaces. A typical day here involves wrangling JavaScript with a side of CSS to make our web apps hum. Some of the things I've done here include the standard Six Apart HTML and the new JavaScript libraries used in TypePad and Movable Type 3.2. Both the published side of things (weblogs) and the application interfaces present interesting challenges. I enjoy long walks in the park and am equally at home with contentEditable and unordered lists.

Q: What motivated you to develop Custom CSS for TypePad and how did it come about?
A: The Six Apart standard HTML was a project I started last December to fix a number of bugs in TypePad. We had a bunch of nifty themes designed by Dave Shea but our users were coming up with new and interesting ways to break them every day. Something had to be done. So I took a look at the whole set of layouts, themes, templates and modules that comprised the majority of TypePad's (and eventually Movable Type and LiveJournal) published output. Then I sat down at my desk with a Mac and a Windows box, 8 browsers and a death wish. Sometime in January, with a bit of scruff and hoarseness of voice I emerged with a set of shiny new templates and CSS files that rendered them to Shea's original specifications. Minus some bugs, of course. So they were released to customers, and the mixed-media layouts on TypePad were once again the belle of the ball. After that, I refactored the standard layouts, updated the first-pass of standard HTML, and by this summer, all of TypePad was running the new HTML, and Custom CSS feature.
Q: What are some of the things you can do with Custom CSS?
A: The great thing about Custom CSS is that you do things like:
  • increase the font size of your weblog or use entirely new fonts or text treatments
  • change the background color and/or images of any part of the page
  • finely tweak the column widths or completely rearrange the page structure (CSS Zen Garden).
Using the new CSS feature you also have the huge advantage of added control, while at the same time retaining all of the convenient features associated with our standard design templates, such as:
  • an easy-to-use side bar content selector
  • a drag-and-drop side bar module layout editor
  • a configurable weblog archives
  • a custom theme editor, and
  • a layout selector.
All of TypePad's new themes are implemented using CSS on top of the Six Apart standard HTML [1], which is now available in TypePad, Movable Type and LiveJournal. We encourage all Pro users to check out our Custom CSS help documentation, and to experiment with this cool, new feature. We think you will find CSS a much easier way to customize your design than hacking HTML at the expense of so many great features! But if you feel that Advanced Templates are the best way to go, we have updated our documentation for Advanced Templates. These updates included a new section devoted to a listing of TypePad's template modules, and completely revised documentation for TypePad's default templates. You should find this documentation helpful if you are customizing your weblog's design using advanced templates. We also hope that you will find that by abstracting out the components of your weblog into template modules that we have made it easier for you to customize small portions of your weblog's design without to wade through large and cumbersome HTML and CSS templates. Whichever approach you choose, we look forward to seeing all your new blog designs.
Notes [1]TypePad's new standard HTML was developed to meet these requirements:
  • maximum browser compatibility (Firefox, Safari, and Internet Explorer 5+ on Windows and Mac OS)
  • robust container for user content
  • the layouts/themes had to withstand malformed HTML (within reason) inside posts or sidebar content
  • scalable
  • lots of different content modules
  • several (9+) layouts
  • hundreds of themes
  • easy to implement new themes
  • common CSS factored out into a base CSS file
  • consistent CSS class and ID naming
  • consistent page and module structure
  • generic names for major content blocks to encourage "thinking outside the box"
  • "sidebar" or "content" renamed to generic containers "alpha," "beta," etc.
  • any theme, any layout, any module--anywhere, any time
  • easily customizable/extensible by users (Custom CSS) or partners