Previous | Next

Roster: Lined Up





BARBARA GORDON
BUT FIRST, LET ME TAKE A #SELFIE
PB: HOLLAND RODEN
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME

CODE BY TESSISAMESS



BARBARA GORDON
BUT FIRST, LET ME TAKE A #SELFIE PB: HOLLAND RODEN
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME

CODE BY TESSISAMESS


Information

Hey guys! I'm super sorry the previews aren't chock-full of images! I'm super sick right now, so I'm kind of just DOIN MY BEST LOL.

Today we have two versions of a character roster, which could easily be reused as a CR chart or cast list for GPSLs or other, smaller games. The vertical orientation roster holds as many slides and icons as you can fit into an entry, while the horizontal orientation fits sixteen total, so if you have a large list and prefer Horizontal, my suggestion would be to use multiples and choose a way to section them (gender, fandom, game, etc.)

The striped background is a CSS gradient, which means you can feel free to change it to any color! I also show how to remove it, put in a background image instead, and how to replace it with a new CSS pattern below. Enjoy! ♥

Coding: Vertical



Coding: Horizontal



Installation Guide

Paste into an entry and fill in the following!

NAMEHERE (x4) - Character name
FREETEXT (x4) - Blurb info, can be 1-5 lines of text
PBNAME (x4) - PB name
IMAGE1 through IMAGE4 - Main image of each character; can be any dimension, as this is a background image
ICON1 through ICON4 - Each corresponding icon link; can be any size as long as the dimensions are all the same as each other or the way they line up will get wonky

*You can add/delete characters as needed; just remember to edit the a name and a href of the corresponding icon link when adding extra blocks so that it shows up when clicked.

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS
helvetica,arial,sans-serif - Overall font
arial black,gadget,sans-serif - Headings font

COLORS
255,255,255 - Infobox background color (semi-transparent rgba value)
#E6DFE7 - Background color
#000 - Text color
0,0,0 - Box shadows and gradient stripe color (semi-transparent rgba value)

BACKGROUND
Remove striped gradient -
background:linear-gradient(to bottom,rgba(0,0,0,0.05),rgba(0,0,0,0.05) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1));background-size:100% 5px; (you can also keep the stripes and make them larger by editing 5px to a larger number.)

To keep the stripes but change them to a light overlay change each instance of 0,0,0 to 255,255,255 to invert it! Keep in mind not to do this as a replace all in the overall code or the box shadows in the code will change too.

You can find other CSS gradient designs here! Just keep in mind that since they're not mine, I may not have time to help edit them. Don't be scared though, color changes on these are very easy with replace all! To use these on this code you'll just want to replace the same code as given in remove striped gradient.

Add background image - Change background:#E6DFE7; to background:#E6DFE7 url(BGIMAGE)center; and add background-size:cover; after it if you're using a single large image and not a repeating pattern. This CAN be used behind the gradient stripes. If your background seems odd and it's a single large image add no-repeat after center.

REMOVE/CHANGE ALL INSTANCES OF BORDER-RADIUS
border-radius:10px/20px; This can be changed to a single pixel size for standard border radius, removed completely, or changed in current format. This radius is on the outer containers, each icon, the blurb, and the large background image of each character.

CHANGE BLURB WIDTH
width:270px; Need more space? Need less space? You can change the width of the blurb with this, OR you can change padding:290px to a smaller number of your text is still getting cut off. If you do alter the padding make sure to ADD however many pixels you take off to height:110px;

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Comments

Sep. 28th, 2017 09:05 pm (UTC)
BURNING ELMO GIF DAMN IT
Sep. 28th, 2017 09:08 pm (UTC)
SCREAM LOL the sentiment is still the same
Sep. 28th, 2017 10:21 pm (UTC)
OMG I LOVE THIS AND I LOVE YOU!
Sep. 28th, 2017 10:32 pm (UTC)
AHHH, I'M GLAD ♥ I'M HYPE! I'VE ALREADY USED IT NGL.
Sep. 29th, 2017 12:50 am (UTC)
I just added it to this journal for my current character list.
Sep. 29th, 2017 04:33 pm (UTC)
I JUST REDID MY CHARACTER ROSTER AND NOW THERE IS THIS YOU BEAUTIFUL WITCH
Sep. 29th, 2017 06:50 pm (UTC)
OOPS, MMMMMMMY BAD ♥
Oct. 20th, 2017 12:51 am (UTC)
Oct. 3rd, 2017 10:33 am (UTC)
This is epically awesome. You're a bad ass at all things and I am just head over heels for this code. I am SO using it at my CDJ.
Oct. 19th, 2017 03:24 am (UTC)
Pshhh, tysm boo! ♥
Oct. 22nd, 2017 06:12 pm (UTC)
LOL I lied. I used it here instead!!