InsaneJournal

Tweak says, "Mother called me crazy... Once"

mary_greenman (mary_greenman) wrote in rp_tutorials,
@ 2013-05-24 04:46:00

Entry tags:

html

Scrolled Wings: Character Profile

Dark Version Available

Scrolled Wings

Name: Scrolled Wings

Type: Character profile layout.

Credit:

scatterbrained or

mary_greenman.

Features
Designed around the use of a scrollbar, this character profile features easily-editable images and content with a 3 column table at the top, a single rounded image for a tiny icon and an area for lyrics. There's a basics section and the meat of the content - "Personality" and "History" with an OOC section attached at the side. I really like how this little fella came out and I may come back and provide some other versions for it. This is a bit of a 9pm - 4 am project so uh, if there are mistakes - feel free to let me know. I will do my best to fix them. :)

Dark version has been added. Not quite maleish but at least there is some verity.

LIGHT PREVIEW HERE.

Light Code

<lj-raw>
<div style="background-image: url('http://i1351.photobucket.com/albums/p789/scatterbraineddesigns/Scrollbar/gradiant_zps12998245.png'); margin-left: auto; margin-right: auto; border-radius: 80px; -moz-border-radius:80px; -webkit-border-radius:80px; width:350px; height: 780px; padding:8px;">

<div id="CHARACTERNAME" style="margin-left: auto; margin-right: auto; margin-top: 5px; text-shadow: 1px 1.5px #eee; line-height: auto; letter-spacing: 1px;"><div style="margin-top: -39px;"><center><font color="#3f3e3b" style="font-size: 20px;">Character Name Here</font></center></div>

</div>
<br><br>
<div style="height: 640px; width: 350px; margin-top: -15px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden; padding: 5px; line-height: 1em; letter-spacing:1px; font-family:georgia; color:#000; text-align:justify;"> <font color="#000" style="font-size: 10px;">

<div style="width: 350px; margin: auto;">
<div style="text-shadow: 1px 1.5px #a8a29d; font-size: 15px;"><center>Basics</center></div>
<table width="350px" border="0">
<tr>

<td valign="middle" width="40%">
<div style="margin: auto;"><font color="#000" style="font-size: 9px;"><br><center>"This is a set of lyrics." "This is a set of lyrics." "This is a set of lyrics."</center><br>
<i>Song Title</i> by <i>artist</i></div>
</font>
</td>

<td width="30%">
<font color="#000" style="font-size: 10px;">
<b>gender:</b> M/F <br>
<b>age:</b> __ <br>
<b>dob:</b> _/_/__ <br>
<b>Pref:</b> LGBP? <br>
<b>pob:</b> pob <br>
</font>
</td>
</tr>
</table>
</div>
<br><br>
<p style="text-shadow: 1px 1.5px #a8a29d;"><b>PERSONALITY</b></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum purus quis ante lacinia auctor. Ut lorem felis, elementum a ultricies sit amet, sagittis sed quam. Fusce malesuada nisl et velit molestie auctor. Nunc tincidunt, risus vel elementum rhoncus, dui est pulvinar risus, ut dignissim tortor velit et orci. Fusce lacinia vulputate odio, et pulvinar neque pretium vitae. Vestibulum congue arcu ut metus venenatis pulvinar. Suspendisse ut nunc non nulla eleifend ultricies. Donec condimentum euismod porttitor. Sed venenatis gravida enim, ut feugiat est laoreet aliquam. Nunc non nisi nunc, quis lacinia sapien. Proin facilisis lacus nec odio porta euismod. Sed convallis tellus non tellus interdum pharetra. In sit amet lacus tortor, ac rhoncus enim. Morbi mollis ante bibendum mauris tincidunt in placerat felis hendrerit. Quisque et mauris nec lacus laoreet accumsan sit amet vel dui.
<br><br>
Sed posuere dui sed enim facilisis non egestas dolor dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec commodo leo vestibulum neque semper ac condimentum ipsum mollis. Suspendisse vitae nisl sagittis nunc consequat blandit. Vivamus venenatis mollis risus, sit amet tempus quam egestas quis. Suspendisse ullamcorper massa sed eros sodales vel convallis est porta. Etiam ultricies ultricies odio eleifend dictum. Pellentesque nisi tortor, viverra rutrum pretium at, rutrum vitae tellus.
<br><br>
Aenean nulla dolor, pretium ac rutrum id, consequat ac ipsum. Duis nec tortor at massa pretium feugiat. Ut blandit est eu nisi malesuada non tempus massa vehicula. Pellentesque risus turpis, tincidunt et tristique eget, vehicula condimentum tortor. Nunc interdum pretium erat, at feugiat est ullamcorper eget. Nulla facilisi. Etiam vitae justo augue, et fermentum quam.
<br><br>
Donec leo elit, luctus eu ullamcorper eu, ultricies in diam. Etiam porttitor laoreet iaculis. Vivamus viverra auctor est, nec dignissim mauris consequat quis. Nunc hendrerit, nulla at eleifend porta, urna enim luctus quam, eu venenatis felis odio et massa. Donec vel arcu nibh, in consequat nibh. Nulla sagittis facilisis pulvinar. Suspendisse potenti. Nunc semper risus eu mauris rutrum tempus. Aenean vestibulum venenatis dui ac volutpat. Ut eleifend porta tellus eu vestibulum.
<br><br>
Pellentesque vitae leo id libero sodales tincidunt. Nunc urna felis, eleifend quis commodo vel, mattis id augue. Fusce et dui odio, eu viverra nibh. In hac habitasse platea dictumst. Vestibulum sit amet tellus eros. Integer interdum dui ac enim vestibulum id convallis neque tempus. Integer in diam sed enim luctus fringilla. Phasellus porttitor enim ac purus convallis lobortis.
<br><br>
<br><br>
<br><br>
<p style="text-shadow: 1px 1.5px #a8a29d;"><b>History</b></p>
Vivamus convallis turpis eget neque pellentesque at semper lectus ultricies. Mauris non dui urna. Nulla molestie justo sed ante luctus lobortis. Nulla quis est id felis egestas tincidunt. Sed venenatis interdum condimentum. Nam faucibus condimentum odio, et ultrices nulla tempus non. Nulla justo lorem, convallis ut ultricies in, congue eu nisi. Pellentesque tortor turpis, mollis in pharetra ac, dapibus eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer molestie, mauris ut bibendum varius, lorem dolor congue magna, in hendrerit lectus ante ut sapien. Sed scelerisque facilisis augue, at rhoncus mi hendrerit non. Maecenas sed turpis sit amet est lobortis aliquam.
<br><br>
Cras eget elit vel ante vestibulum fringilla. Donec aliquam, magna vitae bibendum consequat, nisl libero iaculis enim, vitae cursus nibh libero nec lacus. Donec ligula enim, congue et faucibus ut, iaculis et purus. Morbi pellentesque neque non mauris pellentesque auctor. Pellentesque ultrices sapien quis erat fringilla sagittis scelerisque mauris blandit. Donec eros nulla, porta vel ultricies nec, blandit aliquam quam. In at nisl lectus. Duis lacus felis, tempor et pulvinar eu, pharetra quis lorem. Nam odio urna, eleifend vel accumsan non, molestie vel urna. Maecenas vitae mi mauris, vitae ultricies metus. Suspendisse potenti. Vivamus venenatis, massa non ultrices fringilla, metus ante egestas lectus, id sollicitudin lacus lectus eu nisl. Integer leo arcu, congue vitae mattis sit amet, tristique et erat.
<br><br>
Vivamus accumsan aliquam nunc non gravida. Pellentesque massa justo, feugiat nec sodales nec, mattis id nisi. Nunc id dui non odio cursus blandit vitae sed diam. Nullam et augue eu felis iaculis ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras commodo malesuada augue a semper. Nullam non nisi eget urna commodo egestas. Aliquam cursus velit in erat dictum at eleifend ipsum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus enim augue, cursus vitae venenatis vulputate, congue id lacus. Praesent pretium massa vel risus interdum semper. Aenean adipiscing augue nec odio elementum faucibus. Aenean ultricies velit eget elit blandit blandit.
<br><br>
Cras sed orci urna, id pretium libero. Integer eget nunc at diam ornare ornare. Pellentesque id pellentesque quam. Nullam mattis urna eget diam elementum consequat. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo, purus sed placerat facilisis, mauris dolor convallis lectus, vitae sollicitudin sapien diam at quam. Pellentesque pretium pellentesque laoreet. Etiam vehicula, diam sed luctus laoreet, nulla dolor scelerisque est, posuere tristique sem lectus eu turpis.
<br><br>
Etiam tempus velit tellus, ultrices mattis felis. Integer quis est ante. Aenean elementum facilisis ante in hendrerit. Aliquam dapibus, mauris at aliquet tincidunt, sapien nulla vehicula nibh, sed condimentum magna felis vestibulum quam. Aenean euismod, nisi at auctor luctus, lorem diam ullamcorper erat, sit amet tempus felis massa molestie mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci quam, luctus at vulputate vitae, porta blandit lacus. Vivamus aliquet quam nec quam pharetra venenatis. Fusce viverra cursus consequat.
<br><br>
Fusce commodo nulla quis turpis feugiat vel porta augue ultrices. Nullam faucibus purus ac magna ornare feugiat. Aenean sagittis auctor sodales. Pellentesque risus nisi, cursus in euismod accumsan, sollicitudin a odio. Maecenas pulvinar sem quis turpis rhoncus blandit. Cras nec est a ante tristique pulvinar nec eget mi. Aenean sed magna massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida lacus eu sem pharetra ultrices.
<br><br>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque dignissim, augue eu imperdiet laoreet, risus sapien pharetra turpis, id tempor magna lorem vehicula dolor. Nullam imperdiet ornare orci, ut rhoncus sem ullamcorper eu. Maecenas vitae orci tellus, ac tempus est. Phasellus cursus dapibus odio. Fusce ut leo at leo tincidunt suscipit ac id quam. Pellentesque venenatis sollicitudin ligula id pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sagittis sollicitudin purus, ac dignissim mauris consequat ultricies. Cras nisi massa, ultricies vitae convallis non, suscipit sed ante. Suspendisse consequat, quam eget sodales tincidunt, sapien lorem dictum eros, et sagittis urna mi bibendum lectus. In ac velit id velit viverra ullamcorper a id purus. Phasellus et felis sapien. Nulla feugiat malesuada aliquam. Phasellus porttitor justo vitae nulla ullamcorper porta iaculis nec nunc.
<br><br>
Fusce eu est non orci facilisis pretium. Proin nisl arcu, imperdiet vitae dapibus sit amet, euismod ut elit. Quisque ornare suscipit nulla a bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis iaculis urna in enim luctus quis ornare metus cursus. Donec congue dui tortor, in ultrices ipsum. Duis quis augue tellus, et lacinia massa. Morbi ut odio libero. Donec laoreet tellus nec urna sollicitudin vel sagittis diam pellentesque.
</font></div>

<br>
<div id="CREDIT" style="margin-left: auto; margin-right: auto; margin-top: 5px; text-shadow: 1px 1.5px #eee; line-height: auto; letter-spacing: 1px;">
<center><font color="#3f3e3b" style="font-size: 10px;"><a href="#1">link 1</a> | <a href="http://scatterbrained.insanejournal.com/">scatterbrained</a> <a href="http://scatterbraineddesigns.tumblr.com/">designs</a> | <a href="#2">link 2</a></font></center></div>

<div id="SIDECONTENT/BASICS" style="width:350px; height: 200px; width: 150px; padding:8px; margin-left: -180px; margin-top: -670px; text-align:justify; word-spacing: -2px; letter-spacing:1px; font-family:georgia; color:#000; text-align:justify; text-shadow: 1px 1.5px #eee;">
<font style="font-size: 7pt;">
<b>OOC</b><br><br>
+ Mun's Name: What do you like to be called?
<br><br>
+ Preferred MOC: What is your perferred Method of Contact?
<br><br>
+ Messenger: AIM? GTALK? TRILLION? 
<br><br>
+ Schedule: What time of the day are you on? What time zone are you in? What days of the week?
<br><br>
+ CDJ @: <a href="exampleusername">CDJ Here</a><br>
</font></div>
</lj-raw>

Dark Code

<lj-raw>
<div style="background-image: url('http://i1351.photobucket.com/albums/p789/scatterbraineddesigns/Scrollbar/darkgradiant_zps6447396a.png'); margin-left: auto; margin-right: auto; border-radius: 80px; -moz-border-radius:80px; -webkit-border-radius:80px; width:350px; height: 780px; padding:8px;">

<div id="CHARACTERNAME" style="margin-left: auto; margin-right: auto; margin-top: 5px; text-shadow: 1px 1.5px #000; line-height: auto; letter-spacing: 1px;"><div style="margin-top: -39px;"><center><font color="#e1dfc4" style="font-size: 20px;">Character Name Here</font></center></div>

</div>
<br><br>
<div style="height: 640px; width: 350px; margin-top: -15px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden; padding: 5px; line-height: 1em; letter-spacing:1px; font-family:georgia; color:#e1dfc4; text-align:justify;"> <font color="#e1dfc4" style="font-size: 10px;">

<div style="width: 350px; margin: auto;">
<div style="text-shadow: 1px 1.5px #000; font-size: 15px;"><center>Basics</center></div>
<table width="350px" border="0">
<tr>

<td valign="middle" width="40%">
<div style="margin: auto;"><font color="#e1dfc4" style="font-size: 9px;"><br><center>"This is a set of lyrics." "This is a set of lyrics." "This is a set of lyrics."</center><br>
<i>Song Title</i> by <i>artist</i></div>
</font>
</td>

<td width="30%">
<font color="#e1dfc4" style="font-size: 10px;">
<b>gender:</b> M/F <br>
<b>age:</b> __ <br>
<b>dob:</b> _/_/__ <br>
<b>Pref:</b> LGBP? <br>
<b>pob:</b> pob <br>
</font>
</td>
</tr>
</table>
</div>
<br><br>
<p style="text-shadow: 1px 1.5px #000;"><b>PERSONALITY</b></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum purus quis ante lacinia auctor. Ut lorem felis, elementum a ultricies sit amet, sagittis sed quam. Fusce malesuada nisl et velit molestie auctor. Nunc tincidunt, risus vel elementum rhoncus, dui est pulvinar risus, ut dignissim tortor velit et orci. Fusce lacinia vulputate odio, et pulvinar neque pretium vitae. Vestibulum congue arcu ut metus venenatis pulvinar. Suspendisse ut nunc non nulla eleifend ultricies. Donec condimentum euismod porttitor. Sed venenatis gravida enim, ut feugiat est laoreet aliquam. Nunc non nisi nunc, quis lacinia sapien. Proin facilisis lacus nec odio porta euismod. Sed convallis tellus non tellus interdum pharetra. In sit amet lacus tortor, ac rhoncus enim. Morbi mollis ante bibendum mauris tincidunt in placerat felis hendrerit. Quisque et mauris nec lacus laoreet accumsan sit amet vel dui.
<br><br>
Sed posuere dui sed enim facilisis non egestas dolor dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec commodo leo vestibulum neque semper ac condimentum ipsum mollis. Suspendisse vitae nisl sagittis nunc consequat blandit. Vivamus venenatis mollis risus, sit amet tempus quam egestas quis. Suspendisse ullamcorper massa sed eros sodales vel convallis est porta. Etiam ultricies ultricies odio eleifend dictum. Pellentesque nisi tortor, viverra rutrum pretium at, rutrum vitae tellus.
<br><br>
Aenean nulla dolor, pretium ac rutrum id, consequat ac ipsum. Duis nec tortor at massa pretium feugiat. Ut blandit est eu nisi malesuada non tempus massa vehicula. Pellentesque risus turpis, tincidunt et tristique eget, vehicula condimentum tortor. Nunc interdum pretium erat, at feugiat est ullamcorper eget. Nulla facilisi. Etiam vitae justo augue, et fermentum quam.
<br><br>
Donec leo elit, luctus eu ullamcorper eu, ultricies in diam. Etiam porttitor laoreet iaculis. Vivamus viverra auctor est, nec dignissim mauris consequat quis. Nunc hendrerit, nulla at eleifend porta, urna enim luctus quam, eu venenatis felis odio et massa. Donec vel arcu nibh, in consequat nibh. Nulla sagittis facilisis pulvinar. Suspendisse potenti. Nunc semper risus eu mauris rutrum tempus. Aenean vestibulum venenatis dui ac volutpat. Ut eleifend porta tellus eu vestibulum.
<br><br>
Pellentesque vitae leo id libero sodales tincidunt. Nunc urna felis, eleifend quis commodo vel, mattis id augue. Fusce et dui odio, eu viverra nibh. In hac habitasse platea dictumst. Vestibulum sit amet tellus eros. Integer interdum dui ac enim vestibulum id convallis neque tempus. Integer in diam sed enim luctus fringilla. Phasellus porttitor enim ac purus convallis lobortis.
<br><br>
<br><br>
<br><br>
<p style="text-shadow: 1px 1.5px #000;"><b>History</b></p>
Vivamus convallis turpis eget neque pellentesque at semper lectus ultricies. Mauris non dui urna. Nulla molestie justo sed ante luctus lobortis. Nulla quis est id felis egestas tincidunt. Sed venenatis interdum condimentum. Nam faucibus condimentum odio, et ultrices nulla tempus non. Nulla justo lorem, convallis ut ultricies in, congue eu nisi. Pellentesque tortor turpis, mollis in pharetra ac, dapibus eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer molestie, mauris ut bibendum varius, lorem dolor congue magna, in hendrerit lectus ante ut sapien. Sed scelerisque facilisis augue, at rhoncus mi hendrerit non. Maecenas sed turpis sit amet est lobortis aliquam.
<br><br>
Cras eget elit vel ante vestibulum fringilla. Donec aliquam, magna vitae bibendum consequat, nisl libero iaculis enim, vitae cursus nibh libero nec lacus. Donec ligula enim, congue et faucibus ut, iaculis et purus. Morbi pellentesque neque non mauris pellentesque auctor. Pellentesque ultrices sapien quis erat fringilla sagittis scelerisque mauris blandit. Donec eros nulla, porta vel ultricies nec, blandit aliquam quam. In at nisl lectus. Duis lacus felis, tempor et pulvinar eu, pharetra quis lorem. Nam odio urna, eleifend vel accumsan non, molestie vel urna. Maecenas vitae mi mauris, vitae ultricies metus. Suspendisse potenti. Vivamus venenatis, massa non ultrices fringilla, metus ante egestas lectus, id sollicitudin lacus lectus eu nisl. Integer leo arcu, congue vitae mattis sit amet, tristique et erat.
<br><br>
Vivamus accumsan aliquam nunc non gravida. Pellentesque massa justo, feugiat nec sodales nec, mattis id nisi. Nunc id dui non odio cursus blandit vitae sed diam. Nullam et augue eu felis iaculis ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras commodo malesuada augue a semper. Nullam non nisi eget urna commodo egestas. Aliquam cursus velit in erat dictum at eleifend ipsum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus enim augue, cursus vitae venenatis vulputate, congue id lacus. Praesent pretium massa vel risus interdum semper. Aenean adipiscing augue nec odio elementum faucibus. Aenean ultricies velit eget elit blandit blandit.
<br><br>
Cras sed orci urna, id pretium libero. Integer eget nunc at diam ornare ornare. Pellentesque id pellentesque quam. Nullam mattis urna eget diam elementum consequat. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo, purus sed placerat facilisis, mauris dolor convallis lectus, vitae sollicitudin sapien diam at quam. Pellentesque pretium pellentesque laoreet. Etiam vehicula, diam sed luctus laoreet, nulla dolor scelerisque est, posuere tristique sem lectus eu turpis.
<br><br>
Etiam tempus velit tellus, ultrices mattis felis. Integer quis est ante. Aenean elementum facilisis ante in hendrerit. Aliquam dapibus, mauris at aliquet tincidunt, sapien nulla vehicula nibh, sed condimentum magna felis vestibulum quam. Aenean euismod, nisi at auctor luctus, lorem diam ullamcorper erat, sit amet tempus felis massa molestie mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci quam, luctus at vulputate vitae, porta blandit lacus. Vivamus aliquet quam nec quam pharetra venenatis. Fusce viverra cursus consequat.
<br><br>
Fusce commodo nulla quis turpis feugiat vel porta augue ultrices. Nullam faucibus purus ac magna ornare feugiat. Aenean sagittis auctor sodales. Pellentesque risus nisi, cursus in euismod accumsan, sollicitudin a odio. Maecenas pulvinar sem quis turpis rhoncus blandit. Cras nec est a ante tristique pulvinar nec eget mi. Aenean sed magna massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida lacus eu sem pharetra ultrices.
<br><br>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque dignissim, augue eu imperdiet laoreet, risus sapien pharetra turpis, id tempor magna lorem vehicula dolor. Nullam imperdiet ornare orci, ut rhoncus sem ullamcorper eu. Maecenas vitae orci tellus, ac tempus est. Phasellus cursus dapibus odio. Fusce ut leo at leo tincidunt suscipit ac id quam. Pellentesque venenatis sollicitudin ligula id pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sagittis sollicitudin purus, ac dignissim mauris consequat ultricies. Cras nisi massa, ultricies vitae convallis non, suscipit sed ante. Suspendisse consequat, quam eget sodales tincidunt, sapien lorem dictum eros, et sagittis urna mi bibendum lectus. In ac velit id velit viverra ullamcorper a id purus. Phasellus et felis sapien. Nulla feugiat malesuada aliquam. Phasellus porttitor justo vitae nulla ullamcorper porta iaculis nec nunc.
<br><br>
Fusce eu est non orci facilisis pretium. Proin nisl arcu, imperdiet vitae dapibus sit amet, euismod ut elit. Quisque ornare suscipit nulla a bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis iaculis urna in enim luctus quis ornare metus cursus. Donec congue dui tortor, in ultrices ipsum. Duis quis augue tellus, et lacinia massa. Morbi ut odio libero. Donec laoreet tellus nec urna sollicitudin vel sagittis diam pellentesque.
</font></div>

	ibra_abe 2013-06-06 05:45 am UTC (link)
	Using it here! I really like it, though I did some editing to make it fit my character a little bit more. Thanks for the great code! (Reply to this)