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

From:
(will be screened)
(will be screened)
Identity URL: 
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.