Making character portraits in the right sidebar bigger/two to a row?

daeranilen
daeranilen
edited April 2018 in Campaign Portal Building

So I've been fiddling with my CSS for a bit now, and I've run into something I can't figure out how to fix. I've got a nice round border on my front page character and player portraits that I'm really happy with (inspired heavily by oMiCid's work on Les Compagnons d'Ailleurs). However, adding that border has made the character portraits a little small for my taste.

I found some code to increase their size in this old thread:


.sidebar-party-members .player-character {width:140px;}

.sidebar-party-members .game-content-image {width:130px;}

However, this code creates some new problems for me. First, the portrait thumbnails are low-resolution, so increasing their size makes them SUPER blurry. Second, rather than arranging the portraits two-by-two, the third portrait in any row just overflows onto its own line.

Long story short, does anyone have any suggestions for:


  • code to change the image source for the portrait previews?

  • code to override the standard "three portraits to a row" format?

Post edited by daeranilen on

Comments

  • daeranilen
    daeranilen
    Posts: 4 edited April 2018

    Wow, sorry for that giant signature image. I forgot to set the max width. (And I didn't even add the link! That's what I get for doing my signature when I'm tired.)

    Should be fixed now.

    Post edited by daeranilen on
  • Kallak
    Kallak
    Posts: 1,090

    Seems similar to some of the things I had to do for my character page overhaul. You can probably find what you need on there. You'll have to tweak for the sidebar, but the basics are more or less the same. 

    All the best,
    - Kallak
  • cgregory
    cgregory
    Posts: 780 edited April 2018

    I don't experience the blurry image when increasing my image size. Did you use 96x96 images originally?

    In order to arrange them two by two you'll want the following

    .large-block-grid-3 > li:nth-of-type(3n+1) {

        clear: none;

    }



    [class*="block-grid-"] > li {

        float: inline-end;

    }

    You can use float: right instead of inline-end.
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • daeranilen
    daeranilen
    Posts: 4

    @Kallak -- Thanks! I'll definitely check that out.

    @cgregory -- Only one of them has a portrait so far, and no, I didn't use 96x96. I've noticed that it's using an auto-generated thumbnail instead (because it's something like "CharacterThumb.png" instead of "Character.png"); that's why I was hoping to change the image source.

    Thank you for the code! I'll try it when I get out of class tonight.

  • Bortas
    Bortas
    Posts: 645

    Dae-

    You might try something like this, but recognize that it is not an automated process, you must specify exactly which character is being changed and to exactly what image.


    .character-container .game-content-image[title="Gustav"] {content:url(https://db4sgowjqfwig.cloudfront.net/images/4639078/298499_avatar_thumb_48);}

    -bort

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