36th

[yanyan]

A code for muselists, character rosters, whatever. Shamelessly based on this... Icons by reloading.

Wu
everyone dies

Wei
cao cao no

Shu
won't shut up about benevolence

Guan Suo
username

Bao Sanniang
username

Jin
mwahahahahaha

Sima Zhao
layabouts

Wang Yuanji
wenming

CODE
<raw-code><center> <div style="width: 452px; text-align: justify;"> <!--FIRST BOX START--> <div style="background: #fcfcfc; padding: 30px 30px 100px 30px; border: 1px solid #ccc; border-radius: 30px; box-shadow: #ddd 0px -1px 2px; position: relative; z-index: 0;"> <!--HEADER--> <div style="margin-bottom: 10px;"> <span style="font: 30px helvetica, arial, sans-serif; color: #HEXCODE; text-shadow: #e6e6e6 1px 1px 0px;">TEXT HERE</span> <br/><span style="font: 14px helvetica, arial, sans-serif; color: #HEXCODE; text-shadow: #e6e6e6 1px 1px 0px;">TEXT HERE</span> </div> <!--ITEM START--> <div style="height: 60px; width: inherit; display: inline-block;"> <img src="ICON URL HERE" style="width: 56px; border: 2px solid #ddd; border-radius: 50%; margin-right: 10px; float: left;"> <div style="height: 40px; width: 320px; padding: 10px 0px; border-bottom: 1px solid #ddd; float: left;"> <span style="font: 20px helvetica, arial, sans-serif; color: #555;">CHARACTER</span> <br/><a href="LINK" style="text-decoration: none;"><span style="font: 11px helvetica, arial, sans-serif; color: #555;">USERNAME</span></a> </div> </div> <!--ITEM END--> </div> <!--FIRST BOX END--> <!--NTH BOX START--> <div style="background: #fcfcfc; padding: 30px 30px 100px 30px; border: 1px solid #ccc; border-radius: 30px; box-shadow: #ddd 0px -1px 2px; margin-top: -88px; position: relative; z-index: ORDERNUMBER;"> <!--HEADER--> <div style="margin-bottom: 10px;"> <span style="font: 30px helvetica, arial, sans-serif; color: #HEXCODE; text-shadow: #e6e6e6 1px 1px 0px;">TEXT HERE</span> <br/><span style="font: 14px helvetica, arial, sans-serif; color: #HEXCODE; text-shadow: #e6e6e6 1px 1px 0px;">TEXT HERE</span> </div> <!--ITEM START--> <div style="height: 60px; width: inherit; display: inline-block;"> <img src="ICON URL HERE" style="width: 56px; border: 2px solid #ddd; border-radius: 50%; margin-right: 10px; float: left;"> <div style="height: 40px; width: 320px; padding: 10px 0px; border-bottom: 1px solid #ddd; float: left;"> <span style="font: 20px helvetica, arial, sans-serif; color: #555;">CHARACTER</span> <br/><a href="LINK" style="text-decoration: none;"><span style="font: 11px helvetica, arial, sans-serif; color: #555;">USERNAME</span></a> </div> </div> <!--ITEM END--> </div> <!--NTH BOX END--> <!--LAST BOX START--> <div style="background: #fcfcfc; padding: 30px; border: 1px solid #ccc; border-radius: 30px; box-shadow: #ddd 0px -1px 2px; margin-top: -88px; position: relative; z-index: 100;"> <!--HEADER--> <div style="margin-bottom: 10px;"> <span style="font: 30px helvetica, arial, sans-serif; color: #HEXCODE; text-shadow: #e6e6e6 1px 1px 0px;">TEXT HERE</span> <br/><span style="font: 14px helvetica, arial, sans-serif; color: #HEXCODE; text-shadow: #e6e6e6 1px 1px 0px;">TEXT HERE</span> </div> <!--ITEM START--> <div style="height: 60px; width: inherit; display: inline-block;"> <img src="ICON URL HERE" style="width: 56px; border: 2px solid #ddd; border-radius: 50%; margin-right: 10px; float: left;"> <div style="height: 40px; width: 320px; padding: 10px 0px; border-bottom: 1px solid #ddd; float: left;"> <span style="font: 20px helvetica, arial, sans-serif; color: #555;">CHARACTER</span> <br/><a href="LINK" style="text-decoration: none;"><span style="font: 11px helvetica, arial, sans-serif; color: #555;">USERNAME</span></a> </div> </div> <!--ITEM END--> </div> <!--LAST BOX END--> </div> <br/> <small>code by <user name=cawaii></small> </center></raw-code>

A little explanation! The code looks layered because of the z-index property. The first box has a z-index of 0, which puts it at the very bottom, so the box after it should have a z-index of 1 so that it can be on top. The box that comes after that should then have a z-index of 2, and so on. Replace ORDERNUMBER in the code with the order you want to place your boxes in. The last box in the code has a z-index of 100, but you're free to change this.

The code comes with 3 boxes, with 1 character in each.

To remove the part with the icons, remove the code from ITEM START to ITEM END.

To change the colors, replace HEXCODE with the color of your choice.

Comments

[ex_then575]

I just want you to know I've been tinkering around with it...

BUT I HAVE A QUESTION: is it possible to put a row of icons in the boxes?

[yanyan]

Yes! Change the text alignment at the very top of the text to "center", then change the text alignment of every header to "left". After that, replace the code between ITEM START and ITEM END with this:

<!--ITEM START--> <div style="height: 82px; width: 82px; margin: 5px; text-align: center; display: inline-block;"> <img src="http://www.dreamwidth.org/userpic/4977003/1135964" style="width: 56px; border: 2px solid #ddd; border-radius: 50%;"> <br/><span style="font: 11px helvetica, arial, sans-serif; color: #555;">CHARACTER</span> <br/><a href="LINK" style="text-decoration: none;"><span style="font: 9px helvetica, arial, sans-serif; color: #555;">USERNAME</span></a> </div> <!--ITEM END-->

It will look like this! Modify it as you see fit.

[chord]

Excellent! Thank you so much!

[lebensfresser]

Perfect, thank you!