yuff | Simple Dragon Age II CR Code!

Hey guys! Today as the first creation of my holiday creation, I have a more-or-less simple Dragon Age II CR code. This one was made for

reikofanel, but anyone is free to grab it as well! I also have a more in-depth code for those of you who like fancy images and text, but that one hit a bit of a...technical roadblock this morning, so that will come up later!

CR prototype

Live Preview:

Marian Hawke

FRIEND

RIVAL

Code by Yuff

Code:

<div style="width: 550px; height: 130px; background: #150002; background: radial-gradient(farthest-side, #280406, #150002); background: -webkit-radial-gradient(farthest-side, #280406, #150002); border: 3px solid #680500; border-radius: 100px; margin: auto; margin-bottom: 15px;">

<div style="width: 130px; display: inline-block; float: left;"><img src="IMAGE-URL" style="margin-left: 15px; margin-top: 10px; border: 3px solid #680500; border-radius: 100px;"></div>

<div style="display: inline-block; height: 100px; width: 400px; float: right; padding-right: 10px; padding-top: 15px;">
<div style="height: 20px; width: 400px; font-family: palatino linotype, book antiqua, georgia; font-size: 20px; font-weight: bold; color: #e9e395; line-height: 20px; text-align: center;">Character Name</div>
  
<div style="display: inline-block; width: 60px;"><img src="http://i.imgur.com/4KXOjfH.png" alt="friendship" style="height: 60px; padding-left: 15px;"></div><div style="height: 75px; width: 250px; display: inline-block; margin-left: 21px;">
    
<div class="CURSOR" style="width: 250px; height: 15px; padding-top: 15px;">

<div class="BAR" style="height: 15px; border: 2px solid #000; background: -webkit-linear-gradient(left, #004646, #000000, #690003); background: -moz-linear-gradient(left, #004646, #000000, #690003); background: -o-linear-gradient(left, #004646, #000000, #690003); background: linear-gradient(left, #004646, #000000, #690003);"></div>
<div class="TITLE" style="height: 25px; width: 250px;"><div style="display: inline; font-family: palatino linotype, book antiqua, georgia; font-size: 12px; color: #bad2de; line-height: 12px; font-weight: bold; padding-top: 3px; float: left;">FRIEND</div><div style="display: inline; font-family: palatino linotype, book antiqua, georgia; font-size: 12px; color: #e4b7b2; line-height: 12px; font-weight: bold; padding-top: 3px; float: right;">RIVAL</div></div></div>
<div style="display: inline-block; width: 60px;"><img src="http://i.imgur.com/nTdGbqT.png" alt="rivalry" style="height: 60px; margin-left: -5px;"></div></div>

</div>

</div>
<div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>
</raw-code></cut>

NOTES:

As I said before, a more in-depth version is in the works and will hopefully be up within the next week or so once I figure out the technical errors.

When editting the place of the cursor, you want to edit the "margin-left" slot in the cursor area. The range of percentage is -3% (max friendship) to 95% (max rivalry), so -3% to 95%. Neutral is 46%. Going outside this range might cause the cursor to leave the bar. These instructions are hidden in the code as well, for easy reference.

Modifications are totally fine. I'd love to see what you do with it though!

Comments are nice but not necessary. However, please leave the credit line on!

Simple Dragon Age II CR Code!

no subject