In the days before Obsidian Portal rolled out the Custom CSS to Ascendant members, I had taken efforts to customize my campaign in every way possible. My crowning achievement was a "character page":https://dangerous-kalamar-4.obsidianportal.com/wikis/characters which, when combined with the "navigation replacement":http://forums.obsidianportal.com/comments.php?DiscussionID=2278&page=1#Item_47 I had devised - appeared as though my stock character page had been highly altered from the norm. It was awesome, and I loved it. Yes, it took lots of work to do, and to update, but it was special to me, so I didn't mind.
Later on, following the release of the Custom CSS feature, my "DANgerous Kalamar 4":https://dangerous-kalamar-4.obsidianportal.com/ campaign was awarded COTM for January 2013. My prized character page was officially on display front and center for all of Obsidian Portal to see. It was quite the victory for me (my players even made me a congratulatory banner to hang in the game room the next session), and I was pleased to be able to showcase my work and hoped that I could inspire others to push the envelope of what was possible on Obsidian Portal.
I started receiving messages a short time later, most of which were something along the lines of:
_"Dear Kallak, I'd really like to do that with my campaign, but I don't want to have to replace my stock navigation bar on 8-billion pages just to get that look. Is there a way to replicate your layout with just CSS and not all the endless div tags and navigation replacement that you use?"_
By that time, my campaign was nearing its end, and I had started to think forward to my next project. I still loved my version of the character listing page more than the standard one, but if it could be recreated with CSS modification - porting it over to my next campaign, and maintaining it there - would be significantly easier. With this in mind, I started to tinker with the stock character page, working on a fresh campaign and having the Custom CSS tool from the beginning the second time around. It took a bit of work, but I was able to create a block of "drag and drop" code to transform the standard character listing page into one closely resembling that first hand crafted one. It wasn't perfect, but with a little help from the great folks on the forums here the rough edges were polished away and after working out the last few kinks, it was complete. No navigation replacement or linking to a false character listing tab. Just a block of code to copy/paste and one entry in the CSS per character. It was simple, elegant, clean - and it allowed me to once again showcase my work.
The code block had to be reworked a bit following the underlying page structure changes of the Obsidian Portal Reforge, but I'm happy to report that the "four wide" layout is back, updated to post-reforge specs and ready to go. So, take a peek at my demo "HERE":https://css-character-layout-demo.obsidianportal.com/characters, and then come back and find out how you can implement this on your own campaign.