InsaneJournal

Tweak says, "RAW"

fuck 'em in the heart {kait} (wearestardust) wrote in supersuits,
@ 2015-09-15 01:52:00

Entry tags:

!!!templates, !!bios/profiles, #wearestardust

Biosheet: Anchor

INQUISITOR LAVELLAN

NAME.	Character Name
CODENAME.	Codename
NICKNAMES.	Nicknames
OCCUPATION.	Occupation
AGE.	00
DATE OF BIRTH.	Month 00, 0000
ORIENTATION.	Sexual/Romantic Orientation
DATING STATUS.	Dating/Marital Status
DATING HISTORY.	Past Romantic Partner Past Romantic Partner
FAMILY.	Mother Father Siblings, etc, etc
HEIGHT.	0'0"
BUILD.	Physical Build
HAIR.	Hair Color
EYES.	Eye Color

attributes abilities+skills history companions notes

playername
email@email.com • aimname • cdjname (cdj)
time zone • pbname (pb)

ATTRIBUTES

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus tortor ut accumsan cursus. Maecenas faucibus enim eget neque consectetur sagittis. Morbi ut tincidunt erat. Integer tristique erat in mi luctus laoreet quis vitae orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus molestie vulputate enim, in convallis tortor. Morbi placerat eu sapien ac porttitor. Fusce aliquam a libero in aliquet. Nullam sed risus nec dolor volutpat cursus. Sed suscipit lobortis malesuada. In egestas felis mauris, scelerisque faucibus augue ullamcorper et.

Praesent convallis dui eget dignissim tincidunt. Vivamus vel dui sit amet sem mollis luctus. Proin aliquet tincidunt bibendum. Nullam in aliquam urna, vel consectetur purus. Quisque vel eros at velit tincidunt facilisis. Pellentesque at scelerisque erat. Donec libero lectus, suscipit quis tristique ut, pretium eget lectus. Nunc rhoncus vitae dolor interdum porta. In sed massa justo.

Sed lobortis dui eu felis dapibus volutpat. Proin placerat malesuada risus. Donec vitae luctus ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim nisi, blandit ac arcu vel, eleifend condimentum velit. Nunc ac diam nec nisl laoreet rutrum ut non risus. Maecenas vitae turpis ac est blandit bibendum. Etiam lobortis mauris vitae erat faucibus, vel lacinia magna vestibulum. Sed ac justo sed nisl condimentum pellentesque et a arcu. Aliquam in justo nec risus commodo molestie. Integer tincidunt viverra faucibus. In non sodales nibh, luctus hendrerit nisl. Nullam sit amet mauris tempus urna hendrerit blandit.

Etiam volutpat eros lorem. Vestibulum et libero tempor, rhoncus sem nec, tincidunt ante. Vestibulum commodo diam vel efficitur tempus. Quisque ultrices ipsum eget dignissim pellentesque. Vestibulum odio leo, consectetur ac augue eu, rutrum molestie lacus. Sed nec risus at eros aliquet ultricies et accumsan nibh. Etiam vitae posuere libero. Morbi quis aliquet mi, non mattis ante. Donec non urna nibh. Quisque sed ligula interdum, tincidunt diam sit amet, luctus eros. Aenean sodales lobortis justo, ac tempor arcu facilisis imperdiet. Aenean volutpat dignissim sodales.

Aenean sed venenatis ante. Ut vel eros faucibus tellus tempor vulputate quis sit amet libero. Ut vel magna id elit vestibulum posuere consequat at augue. Vivamus vestibulum laoreet orci eget sodales. Duis consequat at nunc eu mollis. Mauris eleifend iaculis dui feugiat rhoncus. Etiam sed maximus orci. Vestibulum ultricies odio in lorem eleifend pulvinar. Donec sit amet efficitur sem, ac suscipit lorem. Nunc in ante porttitor, tristique dolor id, interdum velit.

ABILITIES+SKILLS

◈

MARK OF THE RIFT
In consectetur vestibulum lectus non sollicitudin. Nulla finibus mollis imperdiet. Integer vel elit commodo, accumsan sem et, posuere quam. Aliquam erat volutpat. Duis tempor sapien ut libero viverra, in ultricies justo sollicitudin. Proin consequat sem sit amet tincidunt euismod. Vestibulum malesuada ultrices eros et dapibus. Vivamus cursus et est sed sodales. Vestibulum fringilla, sapien in vehicula ultrices, dui magna vulputate turpis, id pulvinar metus elit vel sem. Nam semper pharetra orci sed feugiat. Vivamus non fringilla lorem. Sed tincidunt eros quis euismod hendrerit. Morbi sit amet commodo felis, dapibus aliquam elit. Nunc vel sem in dolor aliquet sodales vitae eu enim. Curabitur eget interdum mauris, ac efficitur quam.

◈

PULL OF THE ABYSS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras et quam vel libero interdum varius a id augue. Maecenas eget maximus nunc, a posuere ligula. Donec luctus erat massa, vel cursus eros cursus ac. Suspendisse rhoncus est libero, non pulvinar justo suscipit et. Aliquam vel lacinia lorem. Donec consectetur interdum convallis. Quisque maximus nunc sit amet ultrices sagittis. Proin vehicula velit leo, ac accumsan ligula porttitor eu. Donec ut lectus rutrum, sagittis ex quis, porttitor erat. Mauris hendrerit sit amet enim ac viverra.

◈

CHAIN LIGHTNING
Nam consectetur faucibus erat vitae ultrices. Sed neque erat, fermentum vitae ante vitae, cursus semper odio. Maecenas egestas sagittis molestie. Suspendisse posuere enim nec tortor aliquet, quis eleifend felis posuere. Nulla et dolor vel ante feugiat aliquet. Suspendisse nec posuere ipsum, sed elementum ante. Etiam purus eros, viverra sed nisi egestas, gravida malesuada urna. Mauris ex ex, sollicitudin eu dictum a, posuere id eros. Sed dui augue, viverra elementum enim vehicula, vehicula vestibulum nunc. Donec lacinia cursus nibh ac mattis. Mauris at massa quam. Maecenas dapibus at ligula ac dignissim.

HISTORY

Vivamus sed mattis libero. Praesent mauris nisl, aliquam a convallis efficitur, egestas vel nisl. Phasellus tincidunt tortor sed lectus cursus, non molestie lorem pharetra. Morbi volutpat sollicitudin risus at sollicitudin. Mauris semper metus lorem, a euismod ligula bibendum vel. Quisque ac venenatis ipsum. Aenean id lacus ante. Integer ac blandit velit. Aliquam dictum lectus eget pharetra dapibus. Vivamus accumsan molestie rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ac nisi in velit accumsan malesuada in non lacus. Vestibulum et accumsan nisl, et pretium mi.

Morbi at augue bibendum, ultricies erat eu, posuere tortor. Mauris varius vitae turpis sit amet sagittis. Nulla facilisi. Donec velit urna, elementum vel ipsum non, sodales cursus diam. Cras vulputate mi ac tellus luctus, ac tristique purus semper. Nullam euismod eleifend sem, nec sagittis lacus efficitur et. In vulputate a erat eu tempor. Phasellus pulvinar sem id metus mattis, vitae auctor nunc malesuada. Ut imperdiet aliquet viverra. Vivamus at lectus nec risus viverra auctor non sed nibh.

Morbi lacus odio, ullamcorper non augue eget, pretium blandit urna. Curabitur elit eros, pretium nec fringilla eu, malesuada sit amet sem. Vivamus ligula justo, facilisis at ante et, accumsan eleifend massa. Vestibulum vel elit iaculis, blandit nunc ut, egestas neque. Mauris blandit auctor aliquam. In sit amet magna velit. Sed finibus, nunc quis molestie tincidunt, magna magna efficitur nisl, nec cursus velit arcu eget risus. Pellentesque consequat nisl in eros pharetra finibus quis nec lectus. Aenean in diam dui. Quisque eu nisi ipsum. Phasellus quis volutpat dui, porta molestie nibh. Fusce luctus nunc at dui auctor dictum.

In sed fermentum justo. Ut ut egestas nunc. Morbi pellentesque convallis dolor a maximus. Praesent convallis interdum lacus ac efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor venenatis erat, eu tempus ex efficitur nec. Nunc scelerisque eros vel felis sagittis rutrum. Donec id ullamcorper urna. Fusce ultrices eu libero ut venenatis. Aenean dapibus eu tellus non vulputate.

COMPANIONS

DORIAN

CULLEN

ALISTAIR

HAWKE

ADAAR

SERA

IRON BULL

FENRIS

NOTES

Etiam condimentum eros est, vel bibendum purus sodales ornare. Phasellus viverra ligula tincidunt neque vulputate accumsan. Nunc sodales turpis lacus, at volutpat nisl facilisis et. Nam ullamcorper id ligula non dapibus. Maecenas id arcu erat. In hac habitasse platea dictumst. Pellentesque vitae ante elit. Suspendisse metus ante, porttitor vel tortor eget, tempus maximus felis. Nunc volutpat sem id lacus mollis, vel dignissim magna iaculis. Morbi tincidunt auctor mollis. Proin ultrices dictum varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam fermentum ipsum ut nisi blandit mattis.

Aenean gravida ac massa non maximus. Proin ac tortor auctor, porta sem ut, fermentum libero. Vestibulum ut pretium augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus non consectetur turpis, vitae semper nibh. Nullam varius, mauris eget varius iaculis, mi nibh tincidunt enim, nec dapibus dui ipsum ac odio. Phasellus non pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non neque sed lorem bibendum sagittis eget at erat. Duis congue rhoncus interdum. Phasellus congue a arcu vitae porttitor. Praesent eu purus eget tellus mollis ultricies. Sed pulvinar lobortis augue eu ultrices. Morbi lacinia augue nulla, vel laoreet lacus sodales et.

Mauris hendrerit suscipit massa sit amet ultricies. Morbi sit amet molestie lectus, quis dignissim sapien. Phasellus sit amet augue at risus rutrum lacinia. Integer posuere tincidunt pellentesque. Fusce ut quam risus. Nunc maximus dolor nec mi consequat pretium. Nam at tellus sed arcu rutrum mollis. Proin elementum odio facilisis molestie aliquam. Ut luctus lacus et nisi aliquet lacinia.

"ANCHOR" CODE BY WEARESTARDUST AT SUPERSUITS

bio sheet → anchor

I love Dragon Age: Inquisition. I love Dragon Age: Inquisition so much that my wife and I refer to the PlayStation4 exclusively as the "Dragon Age machine" because 95% of our gaming time since buying it as been devoted to Inquisition.

So I've been working on a DA:I layout for a long time, trying to directly copy the menu screens like I did for my Dragon Age II layout, but that wasn't working, so I had to go for some different aesthetics. I'm really pleased with how this came out!

This layout includes a "Companions" section, where you can add userpics/links to important friendships, along with a hover tag for a short description. (I first saw

morethancostume do this, and I love it.)

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

#000 #FFF #182107 #456901 #789048 #EDE355 #FABA25

TEMPLATE →

<lj-raw><lj-cut text="BIO"><center><table width="900" style="color: #FFF; font-family:arial; font-size: 11px; border: 1px solid #789048;"><tr><td>
<div style="background:url(BACKGROUNDIMG); background-position:center; background-size: 900px; height:300px"><div style="height:300px; background:-webkit-linear-gradient(top, transparent 15%, #000); background:-moz-linear-gradient(top, transparent 15%, #000);">
<div style="height: 90px"></div>
<center><img src="SQUAREIMG" style="margin-bottom: -10px; background-color: #000; height: 100px; width: 100px; border-radius: 100%; padding: 5px; border: 1px solid #789048">
<div style="height: 50px; width: 700px; background:-webkit-linear-gradient(left, transparent 10%, #182107, transparent 90%); background:-moz-linear-gradient(left, transparent 10%, #182107, transparent 90%)">
<span style="font-family:palatino linotype, georgia; font-size: 30px; line-height: 50px; letter-spacing: 6px; word-spacing: 10px; font-weight:bold; text-shadow: 1px 1px 1px #000">CHARACTER NAME</span>
</div></center>
</div></div>

<div style="float:left; background-color: #000; background:-webkit-linear-gradient(top, #000 50%, #182107); background:-moz-linear-gradient(top, #000 50%, #182107);height: 450px; width:350px">

<div style="height: 200px; border: 1px solid #789048; margin-left: 10px;margin-bottom: 10px; overflow:auto;">
<table align="center" style="width:100%; font-size: 11px; color: #FFF; padding: 5px;">
<tr><td valign="top" style="width: 120px; opacity: .5">NAME.</td><td>Character Name</td></tr>
<tr><td valign="top" style="opacity: .5">CODENAME.</td><td>Codename</td></tr>
<tr><td valign="top" style="opacity: .5">NICKNAMES.</td><td>Nicknames</td></tr>
<tr><td valign="top" style="opacity: .5">OCCUPATION.</td><td>Occupation</td></tr>
<tr><td valign="top" style="opacity: .5">AGE.</td><td>00</td></tr>
<tr><td valign="top" style="opacity: .5">DATE OF BIRTH.</td><td>Month 00, 0000<br><br></td></tr>
<tr><td valign="top" style="opacity: .5">ORIENTATION.</td><td>Sexual/Romantic Orientation</td></tr>
<tr><td valign="top" style="opacity: .5">DATING STATUS.</td><td>Dating/Marital Status</td></tr>
<tr><td valign="top" style="opacity: .5">DATING HISTORY.</td><td>Past Romantic Partner<br>
Past Romantic Partner<br><br></td></tr>
<tr><td valign="top" style="opacity: .5">FAMILY.</td><td>Mother<br>
Father<br>
Siblings, etc, etc<br><br></td></tr>
<tr><td valign="top" style="opacity: .5">HEIGHT.</td><td>0'0"</td></tr>
<tr><td valign="top" style="opacity: .5">BUILD.</td><td>Physical Build</td></tr>
<tr><td valign="top" style="opacity: .5">HAIR.</td><td>Hair Color</td></tr>
<tr><td valign="top" style="opacity: .5">EYES.</td><td>Eye Color<br><br></td></tr>
</table>

</div>

<a href="#1" style="text-decoration:none; color: #FFF; display:block; padding: 5px; margin-bottom: 5px; background:-webkit-linear-gradient(left, #456901, transparent 90%); background:-moz-linear-gradient(left, #456901, transparent 90%); font-family:palatino linotype, georgia; font-size:30px; font-style:italic; letter-spacing:-1px; line-height: 20px; text-align:center; margin-right: 0px; ">attributes</a>
<a href="#2" style="text-decoration:none; color: #FFF; display:block; padding: 5px; margin-bottom: 5px; background:-webkit-linear-gradient(left, #456901, transparent 90%); background:-moz-linear-gradient(left, #456901, transparent 90%); font-family:palatino linotype, georgia; font-size:30px; font-style:italic; letter-spacing:-1px; line-height: 20px; text-align:center; margin-right: 0px; ">abilities+skills</a>
<a href="#3" style="text-decoration:none; color: #FFF; display:block; padding: 5px; margin-bottom: 5px; background:-webkit-linear-gradient(left, #456901, transparent 90%); background:-moz-linear-gradient(left, #456901, transparent 90%); font-family:palatino linotype, georgia; font-size:30px; font-style:italic; letter-spacing:-1px; line-height: 20px; text-align:center; margin-right: 0px; ">history</a>
<a href="#4" style="text-decoration:none; color: #FFF; display:block; padding: 5px; margin-bottom: 5px; background:-webkit-linear-gradient(left, #456901, transparent 90%); background:-moz-linear-gradient(left, #456901, transparent 90%); font-family:palatino linotype, georgia; font-size:30px; font-style:italic; letter-spacing:-1px; line-height: 20px; text-align:center; margin-right: 0px; ">companions</a>
<a href="#5" style="text-decoration:none; color: #FFF; display:block; padding: 5px; margin-bottom: 10px; background:-webkit-linear-gradient(left, #456901, transparent 90%); background:-moz-linear-gradient(left, #456901, transparent 90%); font-family:palatino linotype, georgia; font-size:30px; font-style:italic; letter-spacing:-1px; line-height: 20px; text-align:center; margin-right: 0px; ">notes</a>

<div style="display:inline-block; width:305px; background-color:#000; height: 30px; padding: 10px; font-family:arial; font-size:11px; line-height: 11px; text-align:center;">playername<br>
email@email.com • aimname • cdjname (cdj)<br>
time zone • pbname (pb)</div>
<div style="float:right;display:inline-block; height:0px; border-left:15px solid #000; border-top: 25px solid #000; border-bottom: 25px solid #000; border-right:10px solid transparent"></div>

</div>

<div style="overflow: hidden; float:right; background-color: #000; background:-webkit-linear-gradient(top, #000 50%, #182107); background:-moz-linear-gradient(top, #000 50%, #182107); height: 450px;width: 542px">

<div style="font-family:palatino linotype, georgia; font-size: 30px; border-bottom: 2px solid #789048; text-shadow: 0px 0px 20px #FABA25; text-align:right; padding-right: 20px; margin-right: 10px; margin-left: 10px;">ATTRIBUTES</div>

PERSONALITY GOES HERE.

</div>

<div style="float:left; font-size: 60px; color: #EDE355; text-shadow: 0px 0px 20px #FABA25; ">◈</div>
<div style="margin-left: 60px; margin-bottom: 40px;"><span style="font-family:palatino linotype, georgia; font-size: 20px; text-shadow: 0px 0px 20px #FABA25;">ABILITY NAME</span><br>
Detailed description of ability and how it works.</div>

</div>
</div>

HISTORY GOES HERE.

</div>
</div>

<center>
 

<div style="display:inline-block; margin-bottom: 10px; font-family: palatino linotype, georgia; font-size: 8px; text-transform:uppercase">
<a href="http://USERNAME.insanejournal.com"><img src="USERPIC" title="DESCRIPTION" style="height: 80px; width: 80px;  padding: 4px; border: 1px solid #789048; margin: 2px; margin-bottom:0px"></a><br>
COMPANION</div>

</center>

</div>
</div>

MISCELLANEOUS NOTES, LINKS, AND OTHER THINGS GO HERE.

</div>
</div>

</div>

</td></tr></table>
<div style="text-align:center; margin-top: 5px; font-size: 8px; letter-spacing: 2px">"ANCHOR" CODE BY WEARESTARDUST AT <a href="http://supersuits.insanejournal.com" style="text-decoration:none; color:#789048">SUPERSUITS</a></div>
</center></lj-cut></lj-raw>

instructions→

Copy/paste the code into your entry.
Replace "BACKGROUNDIMG" with a large image of your choosing. The best ones for this are at least 900px wide.
Replace "SQUAREIMG" with a square image, like a userpic or a gif, of your choosing, at least 100x100.
Download this background image and host it on your own image server, then copy/paste the address where it says "TRANSPARENTBG".
Change the colors if you like!
Fill it in! This is in lj-raw format, so you need to BR your line breaks.
The sections in the Abilities window and the Companions window that you need to copy and paste for formatting are marked within the code.
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)

	hardglossyarmor 2015-09-15 11:49 pm UTC (link)
	My god, that is GORGEOUS. I'm glad to see you doing codes again. I love your bio codes! (Reply to this)

	asphyxiated 2015-09-17 12:22 am UTC (link)
	(Reply to this)

	kameko 2015-09-19 08:25 am UTC (link)
	I absolutely adore this layout (yes Dragon Age!!), but I can't for the life of me get the links to work. I copy/pasted with no edits, and none of the links pop up in the box. Any suggestions? Using Firefox, also tried it in Microsoft Edge and no dice. (Reply to this) (Thread)

	wearestardust 2015-09-23 12:56 am UTC (link)
	None of the links pop up as in the links don't seem to work, or they're invisible? (Reply to this) (Parent) (Thread)

	theoddfanaticat 2015-11-22 05:47 pm UTC (link)
	I've been having the same problem. D: They were working just fine at first, and then they just stopped. You click the items in the nav list and the page doesn't change. Gorgeous layout though. <333 (Reply to this) (Parent)

	shadowpiranha 2015-09-20 09:11 pm UTC (link)
	Oh my GODDD what a beauty. Also, much love for Inquisitor Lavellan. points to own userinfo (Reply to this)

	morethancostume 2015-09-23 12:51 am UTC (link)
	yay i got a credit! :D (Reply to this) (Thread)

	morethancostume 2015-09-23 12:51 am UTC (link)
	and also i guess your thing is pretty cool too XD (Reply to this) (Parent)

	consciencieuse 2015-12-09 09:25 am UTC (link)
	Planning to use this over here in this journal with some tweaks to it! Thank you for making it. It's so gorgeous. <3 (Reply to this)

	briarthroned 2016-01-04 01:18 pm UTC (link)
	Hi! It's the same person who made the comment above and I'm 100% sure I'm going to look silly in a bit but could I get help in terms of locating this green gradient found in the code seen here? I've tried to comb through the coding carefully to find it myself but can't. Sorry if this is a silly question. It's just been bugging me for the last few days. (Reply to this) (Thread)

wearestardust
2016-01-04 04:28 pm UTC (link)

Hey there! Not a silly question, coding is a pain to comb through. :) The green gradient is located in in a few places because the panels aren't transparent (oops, that's not the most efficient way to code this baby): right below !--LEFT SIDE--, right below !--RIGHT SIDE--, and then after every "a name" section. If you do a search for #182107, it'll highlight these places - the code looks like this:

All you need to do is change #182107 to any color you want - and you can do it in one fell swoop by using a Find/Replace option in something like Notepad. :D

Hope this helps!

(Reply to this) (Parent) (Thread)

	briarthroned 2016-01-05 04:14 pm UTC (link)
	Oh my gosh thank you so much for the help! This was so useful and I'm definitely bookmarking this thread for future reference in case I get stuck again in the future. Thank you again. <3 (Reply to this) (Parent)

	nugqueen.dreamwidth.org 2016-05-31 05:05 am UTC (link)
	Hi! I am trying to use the code here (http://nugqueen.dreamwidth.org/795.html) and for some reason the top of my image gets way cut off and I am using this (http://i.imgur.com/OGknnXd.jpg?1) for reference. I tried fiddling with the positioning but not getting any positive results. Is there a way to move the image down so that I can see the top half of the image? (Reply to this) (Thread)

	wearestardust 2016-05-31 05:29 am UTC (link)
	Look for background-position:center; and try changing it to background-position:0 -160;, then fiddle with the second number until it's positioned where you want it. See if that helps! (Reply to this) (Parent)

	thedragonborn_ 2016-10-24 07:30 pm UTC (link)
	http://users.insanejournal.com/thedragonborn_/3466.html#cutid1 I changed up the colors a little bit and this is the result >:D Hope you like it! (Reply to this)