Kallak
Greetings all,
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.
Comments
*NOTE: ENTRY SIZES AND MARGINS FROM THE DEFAULT BLOCK ARE SIZED FOR A MAIN CONTENT AREA OF 730PX WIDE. IF YOUR SITE USES A DIFFERENT WIDTH, YOU WILL NEED TO ADJUST THE MARGINS AND SIZES PROVDED*
+Step 1: The CSS Block:+ (Copy and Paste into your CSS)
@/*ALTERATIONS FOR CHARACTER LISTING*/
.character-index .character-list-item-container {
position:relative !important; width:178px !important;height:178px !important;
display:inline; clear:none !important; color:transparent;margin-bottom:6px;
margin-left:3px;margin-right:3px;
}
.character-index.campaign-public-layout .character-list-item .character-info, .character-index .character-list li {padding:0px !important;}
.character-index .character-info .tags-list,
.character-index .character-list-item .game-content-image,
.character-index .character-list-item .character-info .right-side-fade-out,
.character-index .character-info div:first-of-type div:first-of-type {display:none !important;}
.character-index.campaign-public-layout .character-list-item h4.character-name {border-bottom:0px !important;}
.character-index.campaign-public-layout .character-list-item h4.character-name a {
color:white !important;text-decoration:none;position:absolute !important;bottom:0px !important;
left:0px !important;width:178px;padding-top:153px;padding-bottom:3px;padding-left:3px;
padding-right:3px;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;
}
.character-index .character-list-item .character-info {
text-align:center !important;border:3px solid black;background-size:178px, 178px;
background-repeat:no-repeat;height:178px !important;width:178px !important;
}
.character-index .character-list ul {padding-left:6px;padding-right:6px;}
.character-index .character-list-item .icon-edit {text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;color:white;}@
*Thanks to madartiste for correcting the long name/text positioning problem*
*Thanks to Thorvaldr for sorting out the "clear:none" issue in my absence, saved me a bit of development time*
+Step 2: Per Character CSS Entry:+ (Copy and Paste the lower line into your CSS one time for each character and edit as described in Step 3)
@/*CHARACTER PORTRAIT ASSIGNMENTS FOR CHARACTER LISTING*/
.game-content-image[title="XXXXXX"] + .character-info {background-image:url(YYYYYY);}@
+Step 3:+ (Edit the Per Character Line for each character as follows)
[1] Replace the XXXXXX with the ".game-content-image" title entry for the character in question. You can get this in a couple different ways. Probably the easiest is to just view the page source. You'll want to right click on the page and then select *View Source*, or *View Page Source* (this will change slightly depending on what browser you use). You can also use *Inspect Element* or the like to get this.
[2] Go to the Character Page of the character in question and copy the address for the image of that character. In Firefox, you can right click on the picture and select *Copy Image Location*, in Internet Explorer you can right click on the image, select *Properties* and then highlight and copy the *Address (URL)* entry (other browsers may differ). Once done, paste the address for the character in question in place of YYYYYY.
[3] Update your CSS and go back to the character page. Should look like mine does.
- Kallak
*Do I need to be an Ascendant member to do this?*
Yes, you do not have access to the Custom CSS without Ascendant membership.
*Does this work with the recent Reforge?*
Yes indeed!
*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 96x96 and tends to becoming grainy with resizing. This means in order to get larger images without that loss of image quality, the images has to be hard coded into the 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 down further into the thread. "wolfhound":http://www.obsidianportal.com/profile/wolfhound has created 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-info .tags-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-info .tags-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.
- Kallak
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Just trying to help out.
can you or your players still see the "create new" button in this format?
Unconquered Kingdoms, July 2016 CotM
- Kallak
/* default link behavior */
#campaign-content a:link {color:midnightblue;text-decoration:none;}
#campaign-content a:visited {color:midnightblue;text-decoration:none;}
#campaign-content a:hover {color:blue;text-decoration:underline;}
#campaign-content a:active {color:midnightblue;text-decoration:none;}
and this later on
/*ALTERATIONS FOR CHARACTER LISTING*/
.character-list-item {border:2px solid black;width:156px;min-height:156px;display:inline-block;margin-bottom:10px;margin-right:7px;text-align:center;background-repeat:no-repeat;background-size:156px 156px;}
#character-list img.game-content-image {display:none;}
a.character_link {font-size:16px;font-weight:bold;color:white;text-shadow:2px 2px #000000;}
.character-list-item a {position:relative;top:130px;text-decoration:none;margin-left:-2px;}
div.tag-list {display:none;}
/*CHARACTER PORTRAIT ASSIGNMENTS FOR CHARACTER LISTING*/
#character-list-item-444441.character-list-item {background-image:url('http://cdn.obsidianportal.com/images/1089704/Demona.jpg');}
#character-list-item-444439.character-list-item {background-image:url('http://cdn.obsidianportal.com/images/1089701/Kira_Adami.jpg');}
but the links in the images remain Midnightblue. I thought the link designation in the a.character._link would override the other settings. Anyone have any thoughts?
Peace and Long Life,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
Seems like long character names mess up the spacing though. Hmmm.
http://www.obsidianportal.com/campaigns/alfaysia/characters
Unconquered Kingdoms, July 2016 CotM
Keryth, you might need to narrow in even further with selectors, maybe? I've run into times when CSS is unexpectedly picky about what selectors I used. Maybe... #campaign-content #character-list a.character_link? I'd need to do some testing. My selector-fu is pretty weak.
@Davidnic, Just wanted to say that your character page on that test campaign is looking pretty good. ALSO!! after seeing that you are/were at a similar stumbling block to myself in efforts to expand the link to cover the image and thus make the whole image clickable, I was able to blend the 2 methods and achieve the desired result. I had not considered padding to push the text downward. Thanks for the padding idea Davidnic.
- Kallak
I discovered the padding trick when I was hunting for link formatting tricks on the internet, so I can't really take credit but I'm really glad it was useful for you! Now if I can just figure out how to make the text align to the bottom, it might solve our problems with the multi-row names.
/*ALTERATIONS FOR CHARACTER LISTING*/
.character-list-item { border:2px solid black;width:156px;min-height:156px;display:inline-block;margin-bottom:10px;margin-right:7px;text-align:center;background-repeat:no-repeat;background-size:156px 156px;position:relative }
div.tag-list { display:none; } #character-list img.game-content-image { display:none; }
a.character_link { font-size:16px;font-weight:bold;color:white;text-shadow: 2px 2px #000000; }
.character-list-item a { position:absolute;bottom:0px;text-decoration:none;margin-left:-2px;display:block;padding-top:130px;width:100%; }
I gave the .character-list-item a position of relative and then gave .character-list-item a position:absolute and bottom:0px. Seems to be working! Give it a try and let me know if anything needs adjustment.
Original post updated with the latest version of the code. Hats off to you madartiste, and enjoy our collaboration everyone.
- Kallak
Thank you for the kudos -- I will accept being "the man" though I usually go by "the gal." ;)
Also, Kallak, thank you so much for sharing this code with us! It's really great to see how far you can push things with CSS even with the restrictions we're under. I was pondering what to do with a character page for a new campaign I was helping davidnic with, and this turned out to be absolutely perfect!
A better way to make the entire image a link is to add height:156px to .character-list-item a. The padding can cause some odd behaviors in the links that are more than one line high. The problem with the height is that it puts the text at the top again and I haven't figured out to align it to the bottom of the block. vertical-align:bottom seems to be useless. I think I need to experiment more, but if someone wants to tinker too it might get done faster. :)
EDIT: original post updated with the "overflow:hidden;"
- Kallak
Thanks, Kallak! Looks like this should work perfect now. I'm not running into any more issues.
- Kallak
Cheers,
-Arsheesh
- Kallak
Yes indeed, hats off to you and madartiste, as for its use - I'm in the process of gathering up all my character IDs to roll it out with Dresden ASAP.
It'll be exciting to see what everyone does with this code, actually. From tinkering around with it myself, I can say there are a TON of styling options.
You can differentiate between NPC and PC portraits with .pc-list or .npc-list class selectors. This might be useful if you have a whole ton of NPCs or if you just want to make your PCs' listings a little more glitzy. You could also use opacity to gray-out deceased characters. Or use the ability to use multiple background images to sort of "stamp" something over the portrait -- which might be really fun if your campaign has something of a rogues gallery of bad guys that the players really enjoy taking out.
Just soooo many options with this code! So, thanks again, Kallack. I'm really having fun with it. :)
- Kallak
Just trying to help out.
+Things to note:+
[1] You may have to play with margins to suit your own tastes
[2] This code is for the list only, other changes to the character page are not included
[3] This default code does not contain the style additions that madartiste, me, or others have done, such as color change hovers, size alterations on hover, etc..
[4] The provided block of code is for 4 wide specifically, if you wish to do another selection (such as wolfhound's 5 wide), you'll need to change sizes and margins to suit your needs.
- Kallak
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Just trying to help out.
- Kallak
Just trying to help out.