InsaneJournal

Tweak says, "It's a fair cop."

fuck 'em in the heart {kait} (wearestardust) wrote in supersuits,
@ 2015-09-21 20:42:00

Entry tags:

!!!templates, !!character rosters, #wearestardust

Character Roster: Envelope

character roster

NAME • EMAIL@EMAIL.COM • AIM NAME

LUPIN

more info

back

CHARACTER NAME
CODENAME/SUBTITLE • MORE SUBTITLE

JOURNAL.	username
PB.	PB Name
BIRTHDATE.	Month 00, 0000
OCCUPATION.	Occupation
LOCATION.	Address
DATING STATUS.	Marital Status

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum purus a risus pharetra rutrum. Nunc blandit lacinia dui nec porta. Donec eget pharetra leo, luctus accumsan nisi. Duis mi mauris, tincidunt quis orci ac, iaculis iaculis nisl. Quisque eu dui et erat pulvinar pulvinar sed eget nisi. Donec placerat lacus id sem fringilla pulvinar. Nam erat magna, mattis eget libero in, porttitor accumsan nunc. Pellentesque bibendum, turpis vel commodo consectetur, sem turpis semper magna, at tincidunt velit massa in leo. Nulla blandit quam vitae quam euismod dictum. Donec venenatis dolor neque, vel accumsan purus pulvinar vitae. Sed eros nunc, congue in nisi non, mollis pellentesque dolor. Proin leo mauris, condimentum vitae tortor nec, varius varius purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum purus a risus pharetra rutrum. Nunc blandit lacinia dui nec porta. Donec eget pharetra leo, luctus accumsan nisi. Duis mi mauris, tincidunt quis orci ac, iaculis iaculis nisl. Quisque eu dui et erat pulvinar pulvinar sed eget nisi. Donec placerat lacus id sem fringilla pulvinar. Nam erat magna, mattis eget libero in, porttitor accumsan nunc. Pellentesque bibendum, turpis vel commodo consectetur, sem turpis semper magna, at tincidunt velit massa in leo. Nulla blandit quam vitae quam euismod dictum. Donec venenatis dolor neque, vel accumsan purus pulvinar vitae. Sed eros nunc, congue in nisi non, mollis pellentesque dolor. Proin leo mauris, condimentum vitae tortor nec, varius varius purus.

ALISON

more info

back

CHARACTER NAME
CODENAME/SUBTITLE • MORE SUBTITLE

JOURNAL.	username
PB.	PB Name
BIRTHDATE.	Month 00, 0000
OCCUPATION.	Occupation
LOCATION.	Address
DATING STATUS.	Marital Status

CASTIEL

more info

back

CHARACTER NAME
CODENAME/SUBTITLE • MORE SUBTITLE

JOURNAL.	username
PB.	PB Name
BIRTHDATE.	Month 00, 0000
OCCUPATION.	Occupation
LOCATION.	Address
DATING STATUS.	Marital Status

DONNA

more info

back

CHARACTER NAME
CODENAME/SUBTITLE • MORE SUBTITLE

JOURNAL.	username
PB.	PB Name
BIRTHDATE.	Month 00, 0000
OCCUPATION.	Occupation
LOCATION.	Address
DATING STATUS.	Marital Status

NED

more info

back

CHARACTER NAME
CODENAME/SUBTITLE • MORE SUBTITLE

JOURNAL.	username
PB.	PB Name
BIRTHDATE.	Month 00, 0000
OCCUPATION.	Occupation
LOCATION.	Address
DATING STATUS.	Marital Status

GINNY

more info

back

CHARACTER NAME
CODENAME/SUBTITLE • MORE SUBTITLE

JOURNAL.	username
PB.	PB Name
BIRTHDATE.	Month 00, 0000
OCCUPATION.	Occupation
LOCATION.	Address
DATING STATUS.	Marital Status

"ENVELOPE" CODE BY WEARESTARDUST AT SUPERSUITS

character roster → envelope

Here's a new character roster! I designed it because I wanted a layout that made use of big pretty images, but also had a lot of information at the same time. So, you can click on the "more info" button and open up for detailed information about the character.

It also has minor use of RGBA color codes rather than hex codes, in order to get a cool transparency effect.

If you'd like to change the colors, find/replace the following:

#000 #FFF #0C262E #D9DEDE rgba(13,47,59,.8)

TEMPLATE →

<lj-raw><center><lj-cut text="">

<div style="font-family: palatino linotype, georgia; font-style:italic; font-weight:bold; font-size: 70px; letter-spacing: -5px; margin-top: -10px; line-height: 70px;  border-bottom: 2px solid #AAA; color: #0C262E; text-shadow: 1px 1px 1px #FFF">character roster</div>
<div style="font-family:arial; font-size: 9px; letter-spacing: 2px; margin-bottom: 10px; margin-top: 2px; color: #0C262E">NAME • EMAIL@EMAIL.COM • AIM NAME</div>

<div style="display:inline-block; width: 300px; height: 500px; background:url(BACKGROUNDIMG); margin: 2px; overflow:hidden;">

</div>

<div style="height: 310px; margin-top: 10px; margin-left: -10px; margin-right:-10px; overflow:auto; font-family:arial; font-size: 11px; color: #FFF; text-align:justify; padding: 10px;">
<div style="float:right; margin-top: 5px;  text-align:right;"><span style="font-size: 20px; line-height: 10px; font-family:palatino linotype, palatino, georgia; text-transform:uppercase; letter-spacing: -1px;">CHARACTER NAME</span><br>
<span style="font-size: 9px">CODENAME/SUBTITLE • MORE SUBTITLE</span></div>

<table align="center" style="width: 100%; font-size: 11px; color: #FFF; padding: 5px;">
<tr><td valign="top" style="width: 100px; opacity: .5">JOURNAL.</td><td><a href="http://USERNAME.insanejournal.com" style="color: #AAA; text-decoration:none">username</a></td></tr>

<tr><td valign="top" style="opacity: .5">PB.</td><td>PB Name</td></tr>
<tr><td valign="top" style="opacity: .5">BIRTHDATE.</td><td>Month 00, 0000</td></tr>
<tr><td valign="top" style="opacity: .5">OCCUPATION.</td><td>Occupation</td></tr>
<tr><td valign="top" style="opacity: .5">LOCATION.</td><td>Address</td></tr>
<tr><td valign="top" style="opacity: .5">DATING STATUS.</td><td>Marital Status</td></tr>

</table>

<i>Blurb, description, and other notes go here.</i>
</div>

</div>

</div>

<div style="font-family:arial; font-size: 9px; letter-spacing: 1px; text-align:center; border-top: 2px solid #AAA; margin-top:5px; padding-top: 5px;">"ENVELOPE" CODE BY WEARESTARDUST AT <a href="http://supersuits.insanejournal.com" style="text-decoration:none; color: #0C262E">SUPERSUITS</a></div>
</div>

</lj-cut></center></lj-raw>

instructions→

Copy/paste the code into your entry.
Replace "TOPSQAUREIMG" with an image of your choosing. I used a userpic, but a .GIF also works!
The template has the coding for one character. For each new character, copy/paste what's marked in the code (it's clearly labeled! :) ), and change all anchor links to match, such as castiela and castielb for the two different panels.
Replace "BACKGROUNDIMG" with a large image of your choosing. The best ones for this are at least 500px tall. You may need to add/fiddle with background-position and background-size to make the image sit where you want it to. Here's a tutorial!.
Replace "SQUAREIMG1" and "SQUAREIMG2" with square images, like userpics or a .GIFs, of your choosing (at least 100x100).
Change the colors if you like!
Fill it in! This is in lj-raw format, so you need to BR your line breaks. Each box has an auto-scroll, so you don't need to worry about keeping everything uniform and can write blurbs or make info tables to your heart's content.
Enjoy :)

You're free to edit the colors and alter things as you please, so don't feel like you need to ask! All I ask is that you keep credit at the bottom of the template so that people can find their way back to

supersuits if they want to use it. Thank you!

♥ kait

(Post a new comment)

	guidethesouls 2015-09-22 12:48 am UTC (link)
	Whoa! :O (Reply to this)

	spoilsofwar 2015-09-22 12:53 am UTC (link)
	Aaaaaaaaaaand you've knocked it out of the park again, gurrrrrrrrl. (Reply to this)

	librarianed 2015-09-22 04:34 am UTC (link)
	_ (Reply to this) (Thread)

	librarianed 2015-10-29 03:10 am UTC (link)
	I love this!! I'm not brave enough to play with the colors, but I really like the way this looks, and how easy it is to add new characters. (Reply to this) (Parent) (Thread)

	wearestardust 2015-10-29 03:12 am UTC (link)
	I love it! Thank you for linking me! :) (Reply to this) (Parent)

	hardglossyarmor 2015-09-22 01:54 pm UTC (link)
	This is so pretty. (Reply to this)

	morethancostume 2015-09-23 12:48 am UTC (link)
	\o/ i teach you about rgba codes and you go and my use of them completely out of the water XD i really like these, especially the clickable feature! (Reply to this) (Thread)

	wearestardust 2015-09-23 12:49 am UTC (link)
	i was like HOW DO I OH YEAH BEAR SAID DO THE THING (Reply to this) (Parent) (Thread)

	morethancostume 2015-09-23 12:50 am UTC (link)
	i like the fact that i left out like half the words i meant to type (or, like, one) and you still got it XD bootiful (Reply to this) (Parent) (Thread)

	wearestardust 2015-09-23 12:51 am UTC (link)
	bro, i just ~feel~ you. (Reply to this) (Parent)

	c_sands 2015-09-26 03:23 pm UTC (link)
	Ho fuck. The clickable envelope action there is fascinating. I have nowhere to use this but I wish I did. (Also waves Hi Kait! Sands with a not-really-cdj journal) (Reply to this) (Thread)

	wearestardust 2015-09-26 03:28 pm UTC (link)
	OMG SANDS!!!! HI I LOVE YOU!!!!! (Reply to this) (Parent) (Thread)

	c_sands 2015-09-26 03:31 pm UTC (link)
	GLOMPS WITHOUT WARNING <3 <3 <3 <3 (fyi I never comment with this journal so feel special! <3 Look at all these hearts) (Reply to this) (Parent) (Thread)

	wearestardust 2015-09-26 03:32 pm UTC (link)
	SQUEALS I FEEL LIKE THE SPECIALEST :D :D (Reply to this) (Parent) (Thread)

	c_sands 2015-09-26 03:35 pm UTC (link)
	YOU SHOULD DAMNIT! (Because I miss you lovelies and playing with you) (Reply to this) (Parent)

	hangthestars 2015-09-26 03:33 pm UTC (link)
	HI SANDS I MISS YOU (Reply to this) (Parent) (Thread)

	c_sands 2015-09-26 03:35 pm UTC (link)
	JO! MORE UNWARNED GLOMPING HAPPENING <3 <3 <3 <3 <3 (have excessive hearts because I MISS YOU TOO) (Reply to this) (Parent) (Thread)

	morethancostume 2015-10-01 05:54 pm UTC (link)
	NEW AVALON REUNION PARTY (Reply to this) (Parent) (Thread)

	c_sands 2015-10-01 05:58 pm UTC (link)
	YUS I AM BLOWN AWAY (obviously by feels, all of them!) (Reply to this) (Parent)

	paperclipmuses 2015-09-28 02:54 am UTC (link)
	This is gorgeous. I have never worked with rgba color codes, if i wanted to change this to a more purple like color scheme how would I do that? (Reply to this) (Thread)

wearestardust
2015-09-28 02:59 am UTC (link)

Thank you! :) If you go to a site like colorpicker.com, you can type in the hex code you want to use (or use the palette that's right there to find the code) -- off to the right you'll see three boxes for R, G, and B.

In the coding, you'll see color:rgba(xx,xx,xx,xx) with the xx's being the R value, then the G, then the B -- just input those values in place of the ones that are already there. The last value, A, is an opacity value. If you like it how it is, you can leave it alone, but if you want to change it, it's on a scale from 0 (transparent) to 1 (opaque) -- so 0.5 is half transparent, 0.8 is a little less transparent, etc.

(Reply to this) (Parent) (Thread)

	morethancostume 2015-10-01 05:55 pm UTC (link)
	rgba is one of the best things to happen to colors since green (Reply to this) (Parent)

	jenbug 2015-10-23 06:00 pm UTC (link)
	Can this be adjusted to work with 4 characters instead of six? (Reply to this) (Thread)

	wearestardust 2015-10-23 06:03 pm UTC (link)
	It can! You just have to take off two of the boxes (which should be marked in the code as to where they begin/end and where to copy/paste). It's going to read as three across and one below, but if you fiddle with the overall width ~or~ add a between the second and third boxes, you can end up with two above and two below. (Reply to this) (Parent) (Thread)

	jenbug 2015-10-24 03:09 pm UTC (link)
	thanks :) (Reply to this) (Parent)

	jenbug 2015-10-28 07:06 pm UTC (link)
	Or I could just add two more characters so I can use it as is >.> here :) (Reply to this) (Parent)

	petrichor 2015-10-27 07:37 pm UTC (link)
	Obsessed with this. OBSESSED. It's amazing. (Reply to this)

	kuduk 2015-11-28 11:34 pm UTC (link)
	HOLY CRAP THIS IS BEAUTIFUL!! (Reply to this) (Thread)

	wearestardust 2015-11-28 11:42 pm UTC (link)
	thank you! it's code-heavy, I can't use it for jaha unless I cut three characters XD oops. (Reply to this) (Parent) (Thread)

	kuduk 2015-11-28 11:45 pm UTC (link)
	xD Don't do that! I love all of your characters! I might play around with it but I have so many characters in different games but it's too good to pass up! (Reply to this) (Parent)

	souffle 2016-02-23 11:29 am UTC (link)
	late to the party but holy cow this is amazing. and just the thing i need for my current game roster. \o/ (Reply to this)