Old character page layout

WolfLord

Alright, I find myself missing the old characters page layout from before the reforge. It is more condensed this way but me and my players preferred it before. It just doesn't seem as clean now. and It doesn't show the whole picture for some of the characters, AND when you do click on a character their main picture is off floating to the side instead of bigger and on the page, also miss the old version. Do others agree? Or are there any CSS ways to get it more like before without too much fuss? Just wondering if anyone else shares these concerns.


"Avatar: Conquest of the Imperial Order":https://avatar_adventures.obsidianportal.com/
"Duskreign’s Favorite CotM January 2012":http://www.obsidianportal.com/campaign/wyrmshadow/wikis/012012
"CotM November 2011":http://blog.obsidianportal.com/november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order/?utm_source=rss&utm_medium=rss&utm_campaign=november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order

madartiste

Easiest thing I can think of off the top of my head is:
@.character-avatar {display:none;}
.character-portrait {float:left;padding:0 10px 10px 0;}
@
Under description (or bio if that's where you want it) put:
first and the other words will float around it. You can find the portrait URL by checking the pages source code (you can do a search for "character-avatar" and it should be under that div). Looks like the portraits remain at the same size you upload them as, so it shouldn't be shrunk.

Alternately, if you just want to un-constrain the width of the character portrait on the right sidebar, you can use: @.character-avatar img {width:auto !important; max-width:none;}@

If you want the character list page to be more like it was, this is what I can up with:
@/*PUT ALL CHARACTERS IN A SINGLE FILE COLUMN*/
.character-list-item-container {clear:both !important;}
/*REMOVE WHITE BACKGROUND FROM CHARACTER ENTRIES*/
.character-list-item-container .character-list-item {
background-color: transparent !important;}
/*REMOVE RIGHT SIDE FADE OUT GRAPHIC*/
.right-side-fade-out {display:none;}
/*CHANGE WIDTH OF CHARACTER ENTRIES*/
.character-list-item-container {width:75% !important;}
/*GIVE CHARACTER LIST AREA A WHITE BACKGROUND AND PADDING ALL AROUND*/
.character-list {background-color: white; padding:20px;}
/*REMOVE CHARACTER QUICK DESCRIPTION*/
.character-info div:first-of-type div:first-of-type {display:none;}
/*REMOVE LINE UNDER CHARACTER'S NAME*/
.character-info .title {border-bottom: none !important;}@

And if you don’t even want the edit icon to show:
@.icon-edit {display: none;}@

I'm not sure it's EXACTLY like it was, but I think it's closer.

WolfLord

Thanks for the help! I will play around with this :))

madartiste

Happy to help! I hope it gets to you closer to what you're looking for. :)

WolfLord

That is much better thank you so much. the only last thing if you can think of a way to fix it, on the main character list page it isn't showing the whole picture for each one of them, and i have black boarders around each picture which are getting cut off at different points and it looks sloppy, any way to make it show the entire picture for each of them? swing over and see what im talking about

https://avatar_adventures.obsidianportal.com/characters

madartiste

Ugh, yeah. It looks like when OP makes those thumbnails it makes them at 96x96px, resizing the shortest dimension and making it 96px while cropping the long dimension to 96 as well (if that makes any sense). Unfortunately, I can't fix that since it appears that the actual thumbnail image is cropped. EX: "Thumbnail Example":https://db4sgowjqfwig.cloudfront.net/images/590087/_imssssages_square_thumb.jpg

The only way to solve it would be to make all your character portraits square. :P
Unless I'm missing something. Which is possible.

WolfLord

haha yeah i figured thanks for the help i will work with it :P it is looking way better with your code though thanks again!

madartiste

Really glad I could help. :)

WolfLord

Okay last question i promise.... is there any way to make the whole white column where the character list is thinner and centered? there is a lot of extra space now

madartiste

Hmmm... Your character page looks a bit funky in terms of width. I'll need to investigate. I'm not sure why your character page is so wide... I think it might have to do with this piece of CSS since it's the same on the map page: @.collapsable-nav-row.collapsed .main-content-container.full-width {
width: 100%;
}@

You can try @.character-list {width:75% !important;margin-right:65px;}@
to start with.

WolfLord

That definitely made the width a lot better. is there any way to push it over to the right more now? the nav bar is overlapping it because it is flushed to the left side, compare it to my home page now to see what i mean

WolfLord

I got it to work! :DDD it's looking pretty good now woo thanks!

madartiste

Whoops. I noticed I put margin-right instead of margin-left for the .character-list. Sorry about that!
Actually, give this a try. It should also wrangle the width of the character search bar for you. The left margin might be off, though, so it might need some adjustment: @.character-index .main-content {width:75% !important;margin-left:65px;}@
This should effect the .main-content div (that center div) on the character page only. If you want to adjust that on the map page as well, you can try: @.collapsable-nav-row.collapsed .main-content-container.full-width {width:75% !important;margin-left:65px;}@ and see if that sorts both pages out.

WolfLord

PERFECT! you rock =]

madartiste

Sweet! Glad it worked. :)

Schneidend

Great suggestions so far. Is there a way to separate characters into PCs and NPCs like the old site?

madartiste

Schneidend. Not exactly. However, if you put a space in front of the PC's names, it will automatically bump them to the front of the list. They will be in alphabetically order in front of any character that doesn't have a space in front of their name.