CSS Character Layout Demo
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,
-Kallak
CSS Character Layout Demo Comments
Thanks for your support. It is my hope that many people take this starting point and run with it in their own campaigns. I’ll be posting any necessary updates and/or changes post-reforge as soon as possible (if it’s broken too badly that is), so be sure to check back.
This is absolutely perfect, honestly can’t thank you enough for taking the time to set this up and share it.
FAQ
“Do I need to be an Ascendant member to do this?”
Yes, you do not have access to the Custom CSS without Ascendant membership.
“Why do you replace the thumbnail image for every character in the CSS, couldn’t you just resize the existing image via a CSS command?”
Yes, but with poor results. The default thumbnail image is 48×48 and becomes very grainy beyond 60×60 or so, which is why most sites that alter the character page edit them to be 60×60 or not at all. This means that in order to get larger images, they had to be hard coded into the Custom CSS. Swapping images without a per character Custom CSS entry would require javascript or the like, which is presently unavailable as a GM tool on Obsidian Portal.
“But I’ve got like 8000 characters, won’t this take forever?”
As with most things, the more entries you have to complete, the longer it will take – but remember you only need to do this once. Future additions generally come a few at a time, so maintaining the four wide layout is fairly easy. If you have a large number of characters for your initial conversion process, I strongly recommend reading the original forum thread where wolfhound posted a step by step tutorial on how to use regular expressions in programs (such as Notepad++) to cut the required time down by letting the program do much of the work for you.
“Where are my character tags?”
If you read back over the code in Step 1, you’ll note a “display:none” entry for the “#character-list .tag-list”. The four wide layout is intended to be a more visual method for character select browsing, leaving the function of listing by tag to the tag filter box in the secondary column. The tags are still there for your characters, they are just not visible under each character as before. This was a style choice made for the four wide layout. if you wish to show the character tags, you’ll need to remove the “#character-list .tag-list” from the last entry of the main block. This will require you to do other editing however, as you will now need to reconfigure things to allow space for the tags to be displayed.
“Why don’t my character images size up properly inside the border?”
This is likely the result of one of two issues:
[a] You are using non-square character images. Given that the four wide layout is configured for square images, using rectangular graphics may cause some issues.
[b] You may be using an older browser (or version of one) that doesn’t support the “background-size” entry in the code. Upgrade or switch your browser if possible