mistojen: (Default)
mistojen ([personal profile] mistojen) wrote2016-07-28 07:28 pm

roster: honeycomb


I feel like I only ever seem to do these when I see Plurk coding stuff... In any case, I was inspired by a fellow code geek who thought that this would look cool as a character roster. ...so I made it happen?

ETA: This css is not supported on Firefox, sorry for any inconvenience this might cause; I know that the clip property is supported, so I assumed this would be, as well. My fault! :( I don't have Opera or Safari or any of those to cross check, but it appears to work on mobile (for Android). Please let me know if there are any other browsers this does not work with. Thank you!

ETA2: Evidently Firefox does, now, support clipping paths, so this code should work on newer versions of Firefox!

character roster
NAME • EMAIL@EMAIL.COM • [plurk.com profile] userOOC
'honeycomb' design by mistojen


instructions!
  1. Copy codes from the text boxes below.
  2. Edit the following
    • IMGURL (square image necessary; must be 250x250; image will NOT resize itself. I suggest Pixlr or EZGif for editing the sizes and then Imgur for uploading if you have to edit your image.)
    • CHARACTER NAME
    • CANON & CANON POINT SUBTITLES
    • JOURNALNAME
    • AGE/BDAY
    • SEXUALITY
    • PB NAME
    • PLAYER NAME
    • EMAIL
    • AIM NAME
    • CDJ
  3. Paste into journal entry and add lj-cut if desired.
  4. Profit.
  5. Ask any questions in the comments; I'm better at coding than at explaining how to implement it, sorry! :(


MAIN DIV



FIRST ROW
(you'll want to wrap this code around the new characters in that particular row)


ADD A CHARACTER
(each row maxes out at 3 characters; when you add a new character you'll want to change char1a and char1b to char2a and char2b, etc.)


ADD ADDITONAL ROWS
(you'll want to wrap this code around the new characters in that particular row, and as a note, the spacing is weird when you add new rows; you'll have to tweak the pixels {usually only by a couple of pixels up or down} until it looks right)


CHANGING COLORS
Find and replace:
#f7f7f7
#000
#F4FF8C
rgba(231,255,13,.4)