It breaks up the black of the normal profile, adds a stats/info box and makes the preference sliders a tad more modern and curvy.
Step 1: Tick "Use HTML For Profile Body"
Step 2: Put this in the profile body box. Fill with your own image, info and profile text. The notes indicate what goes where.
- Code: Select all
<div id="imgholder"><img src="http://i.imgur.com/7PlvylM.png" style="height:400px; padding:10px; border:1px solid #000000;"/><br> <!--replace image url with your own-->
</div><br>
<br>
<div id="stats"><b>Name...</b> John Smith<br> <!--character name here-->
<b>Age...</b> 0<br> <!--character age here-->
<b>Height...</b> 0'0"<br> <!--character height here-->
<b>Eye colour...</b> Blue<br>
<b>Hair colour...</b> Black<br>
<b>Occupation...</b> Student<br>
<b>Orientation...</b> Pansexual<br>
<b>Role...</b> Pred/prey (switch)<br>
</div><br>
<br>
<div id="content"> <!--character description here. Add <p></p> around each new paragraph if you want a break-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis elementum dolor id vehicula. Fusce vestibulum fringilla sem at blandit. Nam malesuada magna sed sollicitudin aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquet volutpat elit vel mollis. Donec non bibendum enim. Suspendisse rutrum tincidunt nibh ut auctor. Nunc vehicula enim ut metus consectetur auctor. In pretium dolor nunc, nec luctus tortor lobortis quis. Suspendisse facilisis massa mauris, nec facilisis nibh pulvinar vel.
</p>
<p>Proin pulvinar mollis eros at scelerisque. Praesent bibendum lacus in imperdiet tempus. In fringilla, dui nec pulvinar sollicitudin, libero tortor elementum ante, finibus ullamcorper erat orci eu purus. Sed sit amet dignissim tellus, ut gravida lacus. Praesent volutpat elit id odio finibus rhoncus vel at nisi. Sed fringilla quam vel nisl pellentesque volutpat. Ut quis orci et mauris ornare facilisis. Donec bibendum, urna vel laoreet cursus, lacus dolor fermentum diam, vel elementum eros magna vel nisi. Fusce sem mauris, molestie vel mattis eu, varius nec risus. Aenean ultrices, nisi in pretium malesuada, quam mauris porta risus, sit amet porta sem sapien sed nulla. Nam auctor aliquet urna, ac cursus erat mattis quis. Quisque pharetra dui ut efficitur iaculis. Mauris ultrices mi velit, in placerat sem sodales in. Sed ut odio nec tellus blandit scelerisque. Nam at venenatis ligula, quis pretium urna.
</p>
</div><br>
<div id="credit"><!--you may remove this is you insist but it helps me-->
<a href="https://aryion.com/forum/viewtopic.php?f=21&t=46956">Theme by LucifersChef</a>
</div>
Step 3: Put this code in the Stylesheet box. You can leave it how it is if you like the colours. Otherwise, notes show which parts change the colours. All colours are hex codes. Use http://www.color-hex.com/ to find hex codes.
- Code: Select all
body {
background-color:#ffb791; /*foreground color in hex code. #ffffff is white. #000000 is black*/
font-family:'Georgia', Times; /*leave be unless experienced*/
}
#imgholder {
float:left;
padding:10px;
}
#content { /*main text box*/
width:50%;
background-color:#ffffff; /*background color in hex code. #ffffff is white. #000000 is black*/
padding:30px;
color:#000000; /*text color in hex code. #ffffff is white, #000000 is black*/
font-size:20px; /*bigger the number, bigger the text*/
border:10px solid #ff8266; /*colour of border in hex code. #ffffff is white, #000000 is black*/
}
#stats { /*box on right of screen with character details*/
float:right;
width:25%;
border:10px solid #ff8266; /*colour of border in hex code. #ffffff is white, #000000 is black*/
background-color:#ffffff; /*background color in hex code. #ffffff is white. #000000 is black*/
padding:30px;
color:#000000; /*text color in hex code. #ffffff is white, #000000 is black*/
font-size:18px; /*bigger the number, bigger the text*/
margin-right:10%;
line-height:30px;
}
#charname {
font-size:0;
}
.prefbox, .preflabel, .preftag, .preftitle, .prefboth, .prefdetail, .pref, #pref-slider-table {
background-color:#fff;
color:#000;
margin:0;
border-radius:10px;
}
.colorbar {
border-radius:3px;
}
#credit {
color:#000;
font-size:10px;
text-align:center;
}
