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
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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.
Changing the character portraits to circular
The positioning of the small PC images
The small PC pictures adding a border and making them circular
The rotate on the hover
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.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Thanks CGregory. As always, awesome job.
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:
Oops, I forgot to paste.
I'll add it to the original postThey are among us!
XCom: Defiance - Campaign of the Month November 2016
Well that worked but something else is messed up and I can;t figure what
Look HERE
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.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
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.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Ugggh. The player thing fixed but, leas tin my browser, the character image vanishes halfway through
What browser are you using?
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Tested it in both Firefox AND IE
See that's strange because with my firefox I see this
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Well, thanks to you pointing that out, I found the issue. Updated Firefox :)
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
Campaign of the Year - 2018