wolfhound
On the character listing page, a long character name overflows properly within the .character-info div. However, .quick-description does not and just gets hidden.
This cannot be fixed by user CSS changes as "script" is part of the css name for both the .quick-description and .description-text DIVs and thus gets filtered.
Comments
I can't help but notice the WIDTH on ...
.character-index.campaign-public-layout .character-list-item .quick-description .description-text
... is 10,000px (yeah 10k). However because "script" is in there... can't touch it from my side. Editing .character-list-item doesn't appear to do any good, or at least any of the iterations I tried. Adding overflow:auto or anything to the higher level (~/~ .character-info) doesn't appear to do it. Still not finding the magic combo.
I did add the entry for "OP Classes with the word “description”" in the list, but the other part is new. That seems like a problem to me, forcing such a ridiculous width, but do you think I should add it to the list?
For example if you add several sentences to the "Quick Description" for a character (like "The Quick Brown Fox..." x3) is it flowing off the right edge for others? Or a 10+ Tag taglist?
I don't think it was considered particularly important at the time that one would be able to see the full quick description. Now that others are posting their sentiments, however, perhaps someone will develop the code for this.
~Mae
CotM Selection Committee
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
.character-index.campaign-public-layout .character-list-item [class*="ription-text"]
It shouldn't be necessary, I hope they fix the filtering, but in the mean time this should help.
Can someone help?
Haven't tried Gwythinn's [class*="ription-text"] method, though. That would definitely be cleaner! After all these years, I never paid attention to the wild card for selectors. Nice find, Gwythinn!
If, however, what you want to do is trim the portrait to BE a circle... that's something else entirely and you might need a completely different approach. Is that what you want? I'd have to do some experimenting, but it should be possible using overflow:hidden and maybe some border-radius stuff. You also need to be cautious about scaling the size of the thumbnail portraits too much since they can quickly get pix-elated and end up looking blurry. In general you'll find that CSS/HTML deals with squares. Other shapes require some creative solutions.
@.character-list-item-container {position:relative !important; width:25% !important;height:325px !important;background-image:url(https://dl.dropboxusercontent.com/s/zemdqs63c322ile/Character%27s%20Background.png?dl=1&token_hash=AAHblMNhQSbjd4tws6Lsnk6ajncBMORfeXqEGYV1sAWUKg);background-size:225px 325px;background-position:12px 0px;background-repeat:no-repeat;opacity:1; display:inline; clear:none !important; color:transparent;margin-bottom:10px;}
.character-info {height: 190px; padding:16px !important;}
.character-list-item img.game-content-image {display: block; margin-left: auto; margin-right: auto; top:31px; width:135px !important; height:auto !important; position:relative !important;overflow:hidden;border-radius: 67.5px;-webkit-border-radius: 67.5px; -moz-border-radius: 67.5px;}
.right-side-fade-out {display:none;}
.character-list-item {background-color:transparent !important;}
.character-name.title {position:relative !important; margin-left:auto; margin-right:auto; margin-top:25px; width:95%; text-align:center;}
.character-info div:first-of-type div:first-of-type {overflow:visible !important; white-space:normal !important; width:100% !important;font-family:Tangerine !important;color:#000000 !important;}
.tags-list {position:absolute; bottom:5px;width:90%;overflow:visible; white-space:normal; padding-left:0px; margin:0px;max-height:45px; color: SaddleBrown ; text-align:center;}
.tags-list a {color:SaddleBrown ;}
.tags-list:before {display:none;}@