Sep. 28th, 2017
Roster: Lined Up
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)(you can also keep the stripes and make them larger by editing50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1));background-size:100% 5px; 5pxto a larger number.)
To keep the stripes but change them to a light overlay change each instance of0,0,0to255,255,255to 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 - Changebackground:#E6DFE7;tobackground:#E6DFE7 url(BGIMAGE)center;and addbackground-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 addno-repeataftercenter.
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 changepadding:290pxto 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 toheight: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