3rd: kuon

[yanyan]

Based on Final Fantasy Theatrhythm's user interface. (ftr the app has too many overpriced purchases, it's gross.) This can be used for CR charts, muselists, taken pages - whatever!

♦ Canon

Character Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at justo non ante condimentum congue. Fusce ultricies, erat nec sodales rhoncus, risus velit adipiscing erat, et gravida ante tellus at enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Original code: <raw-code> <center> <div style="width: 600px;"> <center> <!--START HEADER--> <div style="width: 100%; background: #2e2e2e; color: #86c43f; text-align: left; border-radius: 10px; -moz-border-radius: 10px; padding-left: 10px;"><span style="font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; text-transform: uppercase;">♦ CANON</span></div> <!--END HEADER, START BODY--> <div style="width: 580px; height: 100px; background: #636363; color: #ffffff; text-align: justify; margin-left: 10px;"> <img src="IMAGE URL HERE" align="left"> <div style="width: 540px; text-align: justify; position: relative; left: 5px;"> <span style="font-family: Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 18px; text-shadow: 2px 2px 2px #111;">CHARACTER NAME</span> <br/> <span style="font-family: Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 11px;">DESCRIPTION GOES HERE</span></div> <div style="width: 16px; position: relative; top: -70px; left: 554px;"> <img src="16px x 16px ICON GOES HERE" title="TEXT"> <img src="16px x 16px ICON GOES HERE" title="TEXT"> <img src="16px x 16px ICON GOES HERE" title="TEXT"></div> </div> <!--END BODY--> </center> </div> <br/> <small>code by <user name=cawaii></small> </center></raw-code>

To add more headers: <div style="width: 100%; background: #2e2e2e; color: #86c43f; text-align: left; border-radius: 10px; -moz-border-radius: 10px; padding-left: 10px;"><span style="font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; text-transform: uppercase;">♦ CANON</span></div>

To add more gray boxes: <div style="width: 580px; height: 100px; background: #636363; color: #ffffff; text-align: justify; margin-left: 10px;"> <img src="IMAGE URL HERE" align="left"> <div style="width: 540px; text-align: justify; position: relative; left: 5px;"> <span style="font-family: Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 18px; text-shadow: 2px 2px 2px #111;">CHARACTER NAME</span> <br/> <span style="font-family: Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 11px;">DESCRIPTION GOES HERE</span></div> <div style="width: 16px; position: relative; top: -70px; left: 554px;"> <img src="16px x 16px ICON GOES HERE" title="TEXT"> <img src="16px x 16px ICON GOES HERE" title="TEXT"> <img src="16px x 16px ICON GOES HERE" title="TEXT"></div> </div>

So you can end up with something like this!

♦ Canon

Character Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Character Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at justo non ante condimentum congue.

Character Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at justo non ante condimentum congue. Fusce ultricies, erat nec sodales rhoncus, risus velit adipiscing erat, et gravida ante tellus at enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

♦ Canon

Character Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at justo non ante condimentum congue. Fusce ultricies, erat nec sodales rhoncus, risus velit adipiscing erat, et gravida ante tellus at enim.

NOTES
1. Text must not go beyond icon's height. If you want it to, change or remove all parts in blue.

<div style="width: 580px; height: 100px; background: #636363; color: #ffffff; text-align: justify; margin-left: 10px;">

2. I uploaded some mini-icons to use for the right portion of the code.
These icons are from here. More colors are available on that website.
3. You may change the colors however you wish!

Comments

[lil_rebbitzen]

Hey, I really like how this looks, but for some reason, I can't figure out where to put the icons? Maybe I'm just having a dumb moment?