Tessisamess

CODE BY

Information

HI GUYS!!! Man, June sure was quiet, huh? I missed you!

We have TONS of info and other surprises coming out this week that it's a little hard to focus on writing a code post when I'm so excited! But let's get to it, huh? Today we've got a character roster that mimics a Twitter feel; you can add as many characters to this as an entry will hold; just repeat sections and add a corresponding icon link in the footer and you'll be all set!

Enjoy, and get ready for a really cool month! ♥

The Coding

<lj-raw><div style="margin:0 auto;width:680px;background:#fff;border:1px solid rgba(0,0,0,0.1);font-family:arial,sans-serif;font-size:16px;color:#222;line-height:1.4;"> <div style="height:350px;overflow:hidden;"> <a name="1"></a><div style="padding:40px;font-size:23px;height:270px;"> <div style="font-size:19px;display:flex;align-items:center;margin-bottom:20px;"> <img src="USERPIC1" style="width:70px;height:70px;border-radius:100%;background:rgba(0,0,0,0.1);margin-right:15px;"> <b style="width:100%;"> Name1<br> <a href="http://JOURNALNAME1.insanejournal.com/" style="color:#838A92;text-decoration:none;">@journalname1</a> </b> <a href="BIOLINK" style="color:#fff;background:#FF93B1;text-decoration:none;padding:12px 20px;border-radius:30px;">Biography</a> </div> BLURB1 </div> <a name="2"></a><div style="padding:40px;font-size:23px;height:270px;"> <div style="font-size:19px;display:flex;align-items:center;margin-bottom:20px;"> <img src="USERPIC2" style="width:70px;height:70px;border-radius:100%;background:rgba(0,0,0,0.1);margin-right:15px;"> <b style="width:100%;"> Name2<br> <a href="http://JOURNALNAME2.insanejournal.com/" style="color:#838A92;text-decoration:none;">@journalname2</a> </b> <a href="BIOLINK" style="color:#fff;background:#FF93B1;text-decoration:none;padding:12px 20px;border-radius:30px;">Biography</a> </div> BLURB2 </div> <a name="3"></a><div style="padding:40px;font-size:23px;height:270px;"> <div style="font-size:19px;display:flex;align-items:center;margin-bottom:20px;"> <img src="USERPIC3" style="width:70px;height:70px;border-radius:100%;background:rgba(0,0,0,0.1);margin-right:15px;"> <b style="width:100%;"> Name3<br> <a href="http://JOURNALNAME3.insanejournal.com/" style="color:#838A92;text-decoration:none;">@journalname3</a> </b> <a href="BIOLINK" style="color:#fff;background:#FF93B1;text-decoration:none;padding:12px 20px;border-radius:30px;">Biography</a> </div> BLURB3 </div> <a name="4"></a><div style="padding:40px;font-size:23px;height:270px;"> <div style="font-size:19px;display:flex;align-items:center;margin-bottom:20px;"> <img src="USERPIC4" style="width:70px;height:70px;border-radius:100%;background:rgba(0,0,0,0.1);margin-right:15px;"> <b style="width:100%;"> Name4<br> <a href="http://JOURNALNAME4.insanejournal.com/" style="color:#838A92;text-decoration:none;">@journalname4</a> </b> <a href="BIOLINK" style="color:#fff;background:#FF93B1;text-decoration:none;padding:12px 20px;border-radius:30px;">Biography</a> </div> BLURB4 </div> <a name="5"></a><div style="padding:40px;font-size:23px;height:270px;"> <div style="font-size:19px;display:flex;align-items:center;margin-bottom:20px;"> <img src="USERPIC5" style="width:70px;height:70px;border-radius:100%;background:rgba(0,0,0,0.1);margin-right:15px;"> <b style="width:100%;"> Name5<br> <a href="http://JOURNALNAME5.insanejournal.com/" style="color:#838A92;text-decoration:none;">@journalname5</a> </b> <a href="BIOLINK" style="color:#fff;background:#FF93B1;text-decoration:none;padding:12px 20px;border-radius:30px;">Biography</a> </div> BLURB5 </div> </div> <div style="border-top:1px solid rgba(0,0,0,0.1);color:#838A92;font-weight:bold;display:flex;align-items:center;padding:10px;"> <div style="padding:10px;border-right:1px solid rgba(0,0,0,0.1);"> Current Count<br> <b style="color:#FF93B1;">5</b> </div> <div style="padding:5px;"> <a href="#1"><img src="USERPIC1" style="width:40px;height:40px;border-radius:100%;margin:4px;background:rgba(0,0,0,0.1);"></a> <a href="#2"><img src="USERPIC2" style="width:40px;height:40px;border-radius:100%;margin:4px;background:rgba(0,0,0,0.1);"></a> <a href="#3"><img src="USERPIC3" style="width:40px;height:40px;border-radius:100%;margin:4px;background:rgba(0,0,0,0.1);"></a> <a href="#4"><img src="USERPIC4" style="width:40px;height:40px;border-radius:100%;margin:4px;background:rgba(0,0,0,0.1);"></a> <a href="#5"><img src="USERPIC5" style="width:40px;height:40px;border-radius:100%;margin:4px;background:rgba(0,0,0,0.1);"></a> </div> </div> </div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:680px;margin:5px auto 0 auto;font-family:arial,sans-serif;font-size:8px;text-decoration:none;color:#bbb;text-align:right;letter-spacing:2px;">CODE BY</a></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

USERPIC1 through USERPIC5 - Each char's userpic; this repeats in the footer nav
NAME1 through NAME5 - Each name title
JOURNALNAME1 through JOURNALNAME5 - Each journal link and link text
BIOLINK (x5) - Each link to full bio
BLURB1 through BLURB5 - Each character blurb; these should not get longer than six lines long.
Current Count - Change the 5 on the next line after this if adding more or removing characters

Editing Guide

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

FONTS

arial - Overall font

COLORS

#fff

Background and bio link text

#bbb

weee

#ff93b1

Bio link background and current count number

#838a92

Journal name link and current count text

#222

Overall text

0,0,0

All borders (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!