I’ve been wanting to create a theme/stylesheet/layout that looks like a page from a book for ages, though not really found a good reason to actually sit down and do it.

Until yesterday that is, when I finally decided to bite the bullet and come up with some css for the Microlite20 Macropedia (my pet ultra rules-lite role-playing project) that’s a homage to the D&D books. The pages of those tomes have a particular style to them which manages to be both dictinctive yet not too distracting at the same time; in other words, perfect layout fodder.

I’ve recently worked out how to convert WordPress themes into something more friendly to OddMuse, my wikiblogging engine of choice. In the spirit of lazy designers everywhere I went on a theme hunt, sure that someone, somewhere has had a similar idea for a book-style theme. I met with no success from either Google or the WordPress Theme Viewer, so resolved to roll my own.

This was the end result:

To do this, I took a scanned page from one of the core D&D books and cropped out sections for the header, footer and small section for the repeating middle. I selected and removed the existing text, and blurred out the text from the small section of facing page to make it less obvious where the repeating joins are.

Next it was a case of making the central section tilable using a Displacement Map then blurring the join, and finally matching up the edges of the header and footer to make it invisible where they end and the middle section starts.

That was the graphics done, next was a case of dorpping it into the stylesheet and making sure that the content and sidebar fitted within the graphics. This involved making small adjustments to the margins and padding to suit.

Last of all, I selected a colour from the graphic using GIMP’s eyedropper and set the colour for links to the same to keep the text in sympathy with the surround.

You can see the finished style on the Macropedia site, and view the css itself here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.