This “campaign site” was created to serve as the instruction booklet for what I am dubbing the “four wide” alternate character listing layout. The concept originated with my first campaign Crucible of the Blacksoul. I wanted something not seen on every other site for my character page, and so I created my own. While I was extremely happy with the page, it required a great deal of work to implement and maintain. The standard Obsidian Portal navigation tabs had to be replaced (a project which necessitated a block of code copy/pasted onto every page of my campaign), and the page had to be updated every time a new character was added to the game. Since the page was created with a series of div tags and positioned with inline style elements, every character had to be repositioned manually whenever a new character was added.

As that campaign neared its end, I began working on ideas for my next campaign website. Many people had complimented me on the character page I had made, and I wanted to be able to carry the concept over to my new site. If I were able to recreate the layout with just the Custom CSS, it would be far less work for me in the upkeep department, and it would also allow me to “share the wealth”, as I had received numerous messages from visitors asking if it were possible to duplicate the look of my page without having to replace the standard navigation tabs and link to a custom made character page. So with a bit of work (and some problem solving assistance from madartiste on the forum topic I made), I’m happy to present the polished version of the code on this page.

Thanks for reading and enjoy,


CSS Character Layout Demo