progressmods | character info codes

character info codes

Since every character in Progress City is required to have a information page of sorts, your local #aesthetic mod has whipped up three codes you can use to make your info page. You don't have to use these, to be clear. We're just providing them so you know what kind of information we'd like on whatever info page you create.

Basically, your information page should, at bare minimum, contain your character's name, where they currently live, where they currently work, your preferred mode of contact (timezone is optional), and a list of the cards your character currently owns.

option #1

<div style="float: right; width: 390px; text-align: left;"><div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">[CHARACTER NAME]</div>
<ul><li>Lives in [CURRENT HOUSING]</li>
<li>Works as [CURRENT JOB]</li></ul>
<div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">ooc info</div>
<ul><li>contact: <a style="color: #cf1f5c;" href="http://plurk.com/[USERNAME]">[USERNAME]</a> on plurk</li>
<li>timezone: [TIMEZONE] (<a style="color: #cf1f5c;" href="[LINK TO TIMEZONE OR CLOCK]">check</a>)</li></ul></div>

<div style="clear: both; text-align: left;"><div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">cards</div>
<ul><li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</li></ul></div></div></center></raw-code></cut>

This one is designed to be used with a 200px by ~300px image of your character for general appearance purposes. The exact height doesn't really matter, just know that the ic info and ooc info will always appear to the right of the image and the cards will always appear under it. Just replace everything in [BRACKETS] and you should be ready to go!

option #2

<div style="text-align: left;"><div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">[CHARACTER NAME]</div>
<ul><li>Lives in [CURRENT HOUSING]</li>
<li>Works as [CURRENT JOB]</li></ul>

<div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">cards</div>
<ul><li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</li></ul>

<div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">ooc info</div>
<ul><li>contact: <a style="color: #cf1f5c;" href="http://plurk.com/[USERNAME]">[USERNAME]</a> on plurk</li>
<li>timezone: [TIMEZONE] (<a style="color: #cf1f5c;" href="[LINK TO TIMEZONE OR CLOCK]">check</a>)</li></ul></div></div></center></raw-code></cut>

The image in this one is 500px wide and the height doesn't matter, but the intent is to use it with gifs from tumblr. Most fandoms have gifs of the correct size, so this option is great for those! Replace everything in [BRACKETS] and you're all set.

option #3

<cut text="[PUT SOME WITTY TEXT OR SOMETHING HERE]"><raw-code><center><div style="font-family: 'Century Gothic', 'Noto Sans', Arial, sans-serif; color: #296ca1; background-color: #a6d3f4; width: 500px; border-radius: 25px; padding: 10px;">

<div style="text-align: left;"><div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">[CHARACTER NAME]</div>
<ul><li>Lives in [CURRENT HOUSING]</li>
<li>Works as [CURRENT JOB]</li></ul>

<div style="color: #574b9e; font-size: 3em; border-bottom: 5px #296ca1 solid;">cards</div>
<ul><li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</li></ul>

For those of you who don't want a lot of fuss, but still want something slightly polished, the final option is a super minimal and barebones version of the other two. Even if you're not great at html, just replace everything in [BRACKETS] and it should be fine. :)