Character Roster: Annual

[tesscodes]

Character Roster 2018

Character One
Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis. Read More →

Character Two
Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis. Read More →

Character Three
Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis. Read More →

Character Four
Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis. Read More →

Character Five
Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis. Read More →

Character Six
Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis. Read More →

Information

OOF, hey guys! Posting is going to be less spread out this month too (obviously haha!) because the move just really took a lot out of me, but I have a ton of fun codes lined up for this month—yay!

Today's code is a character roster gallery with image links, large character images, and room for blurbs! Adding more is easy as long as you follow the standard hidden click numbering format, and you can add as many characters as the character limit allows! Just remember if you're using more than one copy of the code on the same entry to rename the number scheme so that the two versions don't get confused with each other. I'd suggest adding letters to each code version, so the first one would be #1a-#6a and the second version would be #1b-#6b, etc. Enjoy! ♥

The Coding

<lj-raw><div style="margin:0 auto;width:550px;background:#000;padding:20px 20px 15px 20px;font-size:12px;font-family:ms gothic;color:#ddd;line-height:1.2;"> <!---HEADER---> <div style="margin-bottom:15px;text-transform:uppercase;letter-spacing:2px;font-size:13px;"> Character Roster <span style="float:right;">2018</span> </div> <!---OVERFLOW CONTAINER---> <div style="height:300px;overflow:hidden;background:#333;"> <!---CHARACTER---> <a name="1"></a><div style="height:300px;background:url(CHARIMG)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-end;"> <div style="padding:15px;margin-bottom:15px;background:rgba(0,0,0,0.7);width:40%;"> <div style="color:#fff;font-size:15px;">CHARNAME</div> CHARINFO <a href="BIOURL" style="text-decoration:none;color:#fff;">Read More →</a> </div> </div> <!---CHARACTER---> <a name="2"></a><div style="height:300px;background:url(CHARIMG)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-end;"> <div style="padding:15px;margin-bottom:15px;background:rgba(0,0,0,0.7);width:40%;"> <div style="color:#fff;font-size:15px;">CHARNAME</div> CHARINFO <a href="BIOURL" style="text-decoration:none;color:#fff;">Read More →</a> </div> </div> <!---CHARACTER---> <a name="3"></a><div style="height:300px;background:url(CHARIMG)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-end;"> <div style="padding:15px;margin-bottom:15px;background:rgba(0,0,0,0.7);width:40%;"> <div style="color:#fff;font-size:15px;">CHARNAME</div> CHARINFO <a href="BIOURL" style="text-decoration:none;color:#fff;">Read More →</a> </div> </div> <!---CHARACTER---> <a name="4"></a><div style="height:300px;background:url(CHARIMG)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-end;"> <div style="padding:15px;margin-bottom:15px;background:rgba(0,0,0,0.7);width:40%;"> <div style="color:#fff;font-size:15px;">CHARNAME</div> CHARINFO <a href="BIOURL" style="text-decoration:none;color:#fff;">Read More →</a> </div> </div> <!---CHARACTER---> <a name="5"></a><div style="height:300px;background:url(CHARIMG)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-end;"> <div style="padding:15px;margin-bottom:15px;background:rgba(0,0,0,0.7);width:40%;"> <div style="color:#fff;font-size:15px;">CHARNAME</div> CHARINFO <a href="BIOURL" style="text-decoration:none;color:#fff;">Read More →</a> </div> </div> <!---CHARACTER---> <a name="6"></a><div style="height:300px;background:url(CHARIMG)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-end;"> <div style="padding:15px;margin-bottom:15px;background:rgba(0,0,0,0.7);width:40%;"> <div style="color:#fff;font-size:15px;">CHARNAME</div> CHARINFO <a href="BIOURL" style="text-decoration:none;color:#fff;">Read More →</a> </div> </div> </div> <!---FOOTER NAV---> <div style="margin:15px -1px 0 -1px;"> <a href="#1"><img src="ICON" style="width:85px;margin:5px 1px;"></a> <a href="#2"><img src="ICON" style="width:85px;margin:5px 1px;"></a> <a href="#3"><img src="ICON" style="width:85px;margin:5px 1px;"></a> <a href="#4"><img src="ICON" style="width:85px;margin:5px 1px;"></a> <a href="#5"><img src="ICON" style="width:85px;margin:5px 1px;"></a> <a href="#6"><img src="ICON" style="width:85px;margin:5px 1px;"></a> </div> </div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:600px;margin:5px auto 0 auto;font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:7px;text-align:right;">&copy; TESSISAMESS</a></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

Character Roster and 2018 - To rename the header titles
CHARIMG, CHARNAME, and CHARINFO - Each character's page
BIOURL - Each character's Read More link
ICON - Each character's footer icon link

Editing Guide

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

FONTS

ms gothic - Overall font

COLORS

#fff

Titles & "read more" links

#ddd

Overall font (blurbs)

#333

Background of characters container (isn't visible when images are in place)

#000

Container background

0,0,0

Blurb background (semi-transparent rgba value)

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!