tesscodes | Roster: Urban Decay

Character Name

Fandom or Whatever

@journalname

Firstly Lastname

Character Name

Fandom or Whatever

@journalname

Firstly Lastname

Character Name

Fandom or Whatever

@journalname

Firstly Lastname

Character Name

Fandom or Whatever

@journalname

Firstly Lastname

Character Name

Fandom or Whatever

@journalname

Firstly Lastname

CODING

Information

Hey guys! We really liked one of the January layouts over on Patreon this month and thought, since the code rewards were for the other layout this month, it would be fun if I made some matching ones for Urban Decay to post up for free!

This roster can easily be used for a cast list instead, and comes with two options for the journal link styling. Enjoy! 💖

The Coding

<lj-raw><article style="width:calc((200px + (6px * 2)) * 5);margin:0 auto;font-family:calibri,arial,sans-serif;font-size:10px;line-height:1;color:#fff;display:flex;flex-wrap:wrap;text-align:center;text-transform:uppercase;">

<section style="width:200px;background:#131313;box-shadow:2px 2px 4px 0 rgba(0,0,0,0.3);padding:0 0 19px 0;margin:6px;">

<div style="background:#222 url(CHAR_IMG)center;background-size:cover;mask:url(https://i.imgur.com/noVhrnA.png)center bottom no-repeat;mask-size:auto 100%;height:250px;margin:0 0 -8% 0;"></div>

<div style="font-family:impact,arial black;font-size:20px;color:#FFD76A;">Name</div>

<div style="font-weight:bold;letter-spacing:2px;">extra_info</div>

<a href="" style="color:#000;text-decoration:none;font-weight:bold;letter-spacing:2px;padding:5px;display:inline-block;border-radius:2px;margin:5px 0 0 0;background:#FFD76A;">@journalname</a>

<a href="" style="color:#000;text-decoration:none;font-weight:bold;letter-spacing:2px;padding:8px 0;display:block;margin:5px 7% 0 7%;background:#FFD76A;mask:url(https://i.imgur.com/wJV0Uzh.png)center;mask-size:100% 100%;">@journalname</a>

<div style="font-size:9px;letter-spacing:1px;font-style:italic;opacity:0.5;margin:5px 0 0 0;">
			PB_Name
		</div>

</section>

<div style="text-align:right;width:100%;font-size:8px;letter-spacing:2px;padding:0 10px;"><a href="https://tessisamess.insanejournal.com/161917.html" style="color:#aaa;text-decoration:none;">CODING</a></div></article></lj-raw>

Editing Guide

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

PLACEHOLDERS

CHAR_IMG - Header icon

DIMENSIONS

* 5 - Characters per row
200px - Character width
250px - Character image height
90px - Footer height

-8% - Text content top positioning (you'll probably need to edit if resizing the header height)
19px - Character bottom padding

FONTS

calibri,arial,sans-serif - Body font; subtitle font
impact,arial black - Title and section headers font

font-size:10px; - Body text size
font-size:19px; - Title size
font-size:9px; - PB Name

COLORS

#fff Subtitle line; PB name

#FFD76A Accent color

#131313 Character container background

rgba(0,0,0,0.3) Box shadow

#000 Journal name

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!