Character Name Overflows but Quick Description Does Not

wolfhound
wolfhound
edited October 2013 in Bug Reports
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

  • wolfhound
    wolfhound
    Posts: 354
    Hmm. Anyone else encounter this phenomena on the Character page?

    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.
  • Belrathius
    Belrathius
    Posts: 206
    Hey Wolfhound,

    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?
  • wolfhound
    wolfhound
    Posts: 354
    ... I don't know. Anybody else encountering it?

    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?
  • Maesenko
    Maesenko
    Posts: 325
    It's think it's funny you mentioned this, as I actually made a very similar comment in the beta forums back when the character page was first being worked on. The only solution that we came up with was the idea of a marquis code, particularly one that only moved when the mouse was over the character box (that last part was Langy's idea).

    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
    Thorvaldr
    Posts: 141
    Yeah, I noticed that last night while I was trying to get my Characters page back in order... I was driving myself insane trying to figure out ways to move or modify that... and then I gave up. :P

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • Gwythinn
    Gwythinn
    Posts: 2
    Here's a CSS selector I used to access the description text on the characters page:

    .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.
  • Peaceful_Warrior
    Peaceful_Warrior
    Posts: 4
    It appears that the Character's description can be rearranged though... https://greyhawk-937-cy-the-age-of-steam.obsidianportal.com/characters

    Can someone help?
  • madartiste
    madartiste
    Posts: 328 edited January 2014
    Since I did the work for Age of Steam, here's what I used to target the character quick description: @.character-info div:first-of-type div:first-of-type {overflow:visible !important; white-space:normal !important; width:100% !important;font-family:Special Elite !important;color:#331A00 !important;}@

    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!
    Post edited by madartiste on
  • madartiste
    madartiste
    Posts: 328
    It looks like you're pretty close. I'll take a look at it when I have some time, but if you're just using the default portrait thumbnail from the character page it won't ever be bigger than that, so it won't need to be trimmed.

    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.
  • madartiste
    madartiste
    Posts: 328 edited January 2014
    Peaceful_Warrior, I liked the look of that enough that it kept me tinkering. :) I couldn't blow up the circles enough to cover the whole space since the thumbnails started to pix-elate. I also don't think I had my campaign settings the same as yours, so some of the spacing might be off. Just keep in mind, don't give your characters long names or it won't fit nicely in that box. Give this a try and see what you think:
    @.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;}@
    Post edited by madartiste on
  • madartiste
    madartiste
    Posts: 328
    For those of you who are interested, you can make some crazy shapes using css: "CSS Shapes":https://coderwall.com/p/xrxaxa
  • madartiste
    madartiste
    Posts: 328
    Hey, no problem. It was an interesting puzzle, which is what caught my attention. I even learned a new trick. :)
Sign In or Register to comment.

April 2024
Season of Strife

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

Categories