19th: cocoon

[yanyan]

A muselist code based on FFXIII's status screen. UPDATE (10/04): This code doesn't make use of tables anymore.

K Project

Anna Kushina

Username

rosescape

Game

holly heights

K Project

Anna Kushina

Username

rosescape

Game

holly heights

K Project

Anna Kushina

Username

rosescape

Game

holly heights

K Project

Anna Kushina

Username

rosescape

Game

holly heights

K Project

Anna Kushina

Username

rosescape

Game

holly heights

CODE
<raw-code> <!--START CODE--> <div style="display: inline-block; margin-right: 4px; width: 120px; height: 320px; background: url(120px BY 320px IMAGE HERE); border-radius: 10px; box-shadow: 2px 2px 4px #333; overflow: hidden;"> <div align="right" style="position: relative; top: 4px; right: -3px; width: 114px;"><span style="font: 11px 'gill sans mt', calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">Canon Here</span></div> <div align="left" style="position: relative; top: 2px; left: 4px;"><span style="font: bold italic 15px 'gill sans mt', calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">Name here</span></div> <div style="position: relative; bottom: -216px;"> <div align="left" style="position: relative; left: 4px;"><span style="font: bold 11px 'gill sans mt', calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">Username</span></div> <div align="right" style="position: relative; top: -5px; right: -3px; width: 114px;"> <a href="LINK" style="text-decoration: none;"><span style="font: 11px 'gill sans mt', calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">USERNAME HERE</span></a> </div> <div align="left" style="position: relative; top: -10px; left: 4px;"><span style="font: bold 11px 'gill sans mt', calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">Game</span></div> <div align="right" style="position: relative; top: -15px; right: -3px; width: 114px;"> <a href="LINK" style="text-decoration: none;"><span style="font: 11px 'gill sans mt', calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">GAME HERE</span></a> </div> </div> </div> <!--END CODE--> </raw-code> <small>code by <user name=cawaii></small>

NOTES
1. Ideal image size is 120px by 320px.
2. Longer names and canons will knock the username and game portions, so you may have to increase this part of the code: bottom: -216px;
3. The code only comes with one bar. You need to copy and paste the code in between the comment tags (START CODE and END CODE) to make it look like the code above.
4. To get an "inactive" effect, add opacity: x; right after overflow: hidden;, where x is any value between 0 (completely transparent) to 1 (opaque).
5. Use this code however you want. Let me know if something screws up!