[How To] Alternate Character Listing Layout via CSS

Kallak
Kallak
edited March 2013 in Campaign Portal Building
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.
All the best,
- Kallak
«134

Comments

  • Kallak
    Kallak
    Posts: 1,090 edited April 2014
    *Updated:* 04/13/2013 (Reforged!)

    *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.
    Post edited by Kallak on
    All the best,
    - Kallak
  • Kallak
    Kallak
    Posts: 1,090 edited November 2013
    +FAQ:+ Updated: 11/13/2013
    *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.
    Post edited by Kallak on
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Wow! Awesome Kallak! Thanks for sharing!
    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.

  • madartiste
    madartiste
    Posts: 328
    This is very cool. Thank you! It's nice to see some options for this page. :)
  • SkidAce
    SkidAce
    Posts: 830
    Neat...

    can you or your players still see the "create new" button in this format?
  • Kallak
    Kallak
    Posts: 1,090 edited March 2013
    @SkidAce - Yes, all of the normal functionality of the Character Listing page is still present. The only thing not "there" are the tags under each character, as they are not being displayed. It should be noted however, that any character created will not have a character image to view on the listing page until you add the line from Step 2 for that character into the custom CSS.
    Post edited by Kallak on
    All the best,
    - Kallak
  • Keryth987
    Keryth987
    Posts: 1,047 edited March 2013
    OK, so, I'm using this. However, the link remains the default color for my entire site and it therefore REALLy had to see. I have this in my CSS

    /* 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
    Post edited by Keryth987 on

  • SkidAce
    SkidAce
    Posts: 830
    Neat...I'm getting there.

    Seems like long character names mess up the spacing though. Hmmm.

    http://www.obsidianportal.com/campaigns/alfaysia/characters
  • Davidnic
    Davidnic
    Posts: 4
    SkidAce, I'm running into the same problem. I've got some NPCs with really long names. Going to do some experimenting.
    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.
  • Kallak
    Kallak
    Posts: 1,090 edited April 2013
    Hm, I had not anticipated the effect of really long names. I guess I just assumed that the text would break into 2 rows without affecting the positioning of the box. I'll do some experimenting and see if I can correct the issue.

    @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.
    Post edited by Kallak on
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    Whoops, Kallack, that was me logged in as davidnic. He's my DM and is kind enough to let me do the coding for the page. Sorry for the confusion! :)
    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.
  • madartiste
    madartiste
    Posts: 328
    Aha I think I've got it, everyone!
    /*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.
  • Kallak
    Kallak
    Posts: 1,090
    @madartiste, you're the man! Also, I eliminated the "margin-left" tag inside the ".character-list-item a", "text-align:center" works better. not sure what I was thinking before, lols.

    Original post updated with the latest version of the code. Hats off to you madartiste, and enjoy our collaboration everyone.
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    You know, I didn't even noticed the margin-left vs. text-align myself! Heh. Sometimes you do things one way just to see how it looks and forget to go back and clean it up. Or at least I do, anyway.
    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!
  • madartiste
    madartiste
    Posts: 328
    Okay, new thing:
    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. :)
  • Kallak
    Kallak
    Posts: 1,090 edited March 2013
    You hit the wall that I was working on before I saw your padding idea. Stick with the padding and just add "overflow:hidden;" to the ".character-list-item"

    EDIT: original post updated with the "overflow:hidden;"
    Post edited by Kallak on
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    Ooooh, overflow:hidden... Man. I love it when the answer is simple, even if I couldn't figure it out. :)
    Thanks, Kallak! Looks like this should work perfect now. I'm not running into any more issues.
  • Kallak
    Kallak
    Posts: 1,090
    I think it's officially ready to be added to the unofficial FAQ post.
    All the best,
    - Kallak
  • arsheesh
    arsheesh
    Posts: 850
    FYI everyone, I've moved this thread over to the New CSS Discussions section.

    Cheers,
    -Arsheesh
  • wolfhound
    wolfhound
    Posts: 354
    Feethin' brilliant thread by the way, great, great work.
  • Kallak
    Kallak
    Posts: 1,090
    @wolfhound, much appreciated, especially coming from someone like yourself. Bringing it to the forums definitely opened it up to user testing and helped get a few of the original bugs ironed out (again, hats off to madartiste :D). Hopefully it finds use on many campaigns.
    All the best,
    - Kallak
  • wolfhound
    wolfhound
    Posts: 354
    *^_^*

    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.
  • madartiste
    madartiste
    Posts: 328 edited April 2013
    Aww, shucks. Kallack did the hard work -- and shared it with the rest of us.
    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. :)
    Post edited by madartiste on
  • Kallak
    Kallak
    Posts: 1,090
    @madartiste, definitely a lot of little details that can be played with. Your size transform from the test campaign is awesome, hope you don't mind that I stole it for my own page. It really makes the hovered selection pop. Good stuff.
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    No problem, Kallak! Glad you found it useful. :)
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    So, to help everyone not pick through the individual bits, could you post the full working code, one or both of you?

    Just trying to help out.

  • Kallak
    Kallak
    Posts: 1,090 edited April 2013
    The original post has been updated with the final default version of the code.

    +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.
    Post edited by Kallak on
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998 edited April 2013
    Thanks Kallak and Madartiste! I have too many to make this work for me, but I am sure others will benefit!
    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/
    Post edited by GamingMegaverse on

    Just trying to help out.

  • Kallak
    Kallak
    Posts: 1,090
    You have too many what to make it work?
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Characters- over 200! As a list of names, long- as a list of pics, ridiculously long.

    Just trying to help out.

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions