Styling from April's COTM

Keryth987

OK, so, the Campaign of the Month for April is quite impressive. And I was wondering if any of the CSS Gurus here knew how the GM did his styling for the characters and GM listing on the right side of his page? I figure I'd try here first, before bugging the GM, as there is a language difference with the GM being French. Thanks all

cgregory

Yeah, the css is generally straight forward. Basically border-radius 50%, rotation transformations, image positioning and sepia filters. The end result is gorgeous.

What really helped bring it all together is I'm guessing that one of the players is a graphic design artist (or at least works at omidesign). You can figure that out by looking at the urls of the rotating rings around the characters.

The main parts of the css are seen below

The rotating rings around the characters.

.sidebar-party-members .character-container a::before {

    background-image: url(http://www.omidesign.net/jdr/arabel/shield.png);

    background-size: 100% 100%;

    background-repeat: no-repeat;

    content: "";

    width: 100%;

    height: 100%;

    display: block;

    z-index: 2;

    position: absolute;

    transition: all .5s ease-in-out;

Changing the character portraits to circular

.sidebar-party-members .player img, .sidebar-party-members .player-character img {

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

}

The positioning of the small PC images

.sidebar-party-members .user-container {

    text-align: right;

    background: 0 0;

    position: absolute;

    bottom: 17px;

    left: 7px;

    z-index: 3;

}

The small PC pictures adding a border and making them circular

.sidebar-party-members li.player-character .user-container img {

    border: 3px solid #8d5c35;

}

.sidebar-party-members .player img, .sidebar-party-members .player-character img {

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

}

The rotate on the hover

.sidebar-party-members li.player-character:hover > .character-container a::before, .sidebar-party-members li.player:hover > .character-container a::before {

    -ms-transform: rotate(46deg);

    -webkit-transform: rotate(46deg);

    transform: rotate(46deg);

}

If there is an additional part that you are wondering about let me know.

 

edit
I forgot to paste in the following to adjust the ring size.

.sidebar-party-members .character-container a {
position: relative;
display: inline-block;
}

Keryth987

Thanks CGregory. As always, awesome job.

Keryth987

Actually, there's an issue. Dont know if I'm doing something wrong, or if some of my CSS is interfering, but I copied what CGregory gave and the ring is nowhere near the character portrait and is HUGE

See HERE

Code:

.sidebar-party-members .character-container a::before {background-image: url(http://www.omidesign.net/jdr/arabel/shield.png);background-size: 100% 100%;background-repeat: no-repeat;content: "";width: 10%;height: 10%;display: block;z-index: 2;position: absolute;transition: all .5s ease-in-out;}
.sidebar-party-members .player img, .sidebar-party-members .player-character img {-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.sidebar-party-members .user-container {text-align: right;background: 0 0;position: absolute;bottom: 17px;left: 7px;z-index: 3;}
.sidebar-party-members li.player-character .user-container img {border: 3px solid #8d5c35;}
.sidebar-party-members .player img, .sidebar-party-members .player-character img {-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.sidebar-party-members li.player-character:hover > .character-container a::before, .sidebar-party-members li.player:hover > .character-container a::before {-ms-transform: rotate(46deg);-webkit-transform: rotate(46deg);transform: rotate(46deg);}

 

cgregory

Oops, I forgot to paste.

.sidebar-party-members .character-container a {

    position: relative;

    display: inline-block;

}

I'll add it to the original post

Keryth987

Well that worked but something else is messed up and I can;t figure what

Look HERE

cgregory

You should be able to get yours to work by changing the position of .sidebar-party-members .user-container to relative instead of absolute and the player icon should move back up. 

.sidebar-party-members .user-container {

    text-align: right;

    background: 0 0;

    position: relative;

cgregory

I added a little CSS to the hovering of my character containers. I didn't want a border all the time just when in the crosshairs of the mouse.

Keryth987

Ugggh. The player thing fixed but, leas tin my browser, the character image vanishes halfway through

cgregory

What browser are you using?

Keryth987

Tested it in both Firefox AND IE

cgregory

See that's strange because with my firefox I see this

Keryth987

Well, thanks to you pointing that out, I found the issue. Updated Firefox :)

Bortas

https://morwindl-2.obsidianportal.com/characters

I'm working on my own version, but I don't have the overlay tied to the player image, like I want it to, so I can't make my transforms work correctly. Either way, though, I dig the effect, I just want to get it correctly linked, so that I can have the transform-origin: right; so I don't overlay the character title and what not. If you have an idea, HMU! ;-)

-bort