14th: following

[yanyan]

A code based on Twitter profiles!

Dunya Musta'sim
Magi: The Labyrinth of Magic
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

usernamehere
username

dyspros
game

yanyan
player

♥

Following

Character Name @username
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.

Character Name @username
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.

Character Name @username
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.

♥

TOP <raw-code> <div style="background: url(BACKGROUND URL HERE, IDEALLY 320PX BY 520PX); height: 320px; width: 520px; border-radius: 10px; box-shadow: 0px 1px 3px #333;"> <!--ICON PORTION START--> <div style="height: 270px; width: 100%; background: linear-gradient(transparent 36%, rgba(0,0,0,0.40)); text-align: center;"> <div style="padding-top: 30px;"><img src="IMAGE URL HERE" style="height: 73px; width: 73px; border: 4px solid #fff; border-radius: 10px; box-shadow: 0px 1px 2px #000;"> <br/> <span style="font-family: helvetica, arial, sans-serif; color: #fff; text-shadow: 0px 1px 2px #000;"> <span style="font-size: 24px; font-weight: bold;">Character</span> <br/><span style="font-size: 18px;">Canon</span> <br/><span style="font-size: 14px;">Description text here.</span> </span> </div> </div> <!--ICON PORTION END--> <!--LINKS PORTION START--> <div style="background: #fff; height: 50px; width: 520px; text-align: left; border-radius: 0px 0px 10px 10px;"> <div style="float: left; height: 42px; padding: 8px 10px 0px 10px; border-right: 1px solid #e5e5e5;"> <a href="LINK HERE" style="text-decoration: none;"><span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c; font-weight: bold;">USERNAME HERE</span></a> <br/> <span style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #aeaeae; text-transform: uppercase;">USERNAME</span> </div> <div style="float: left; height: 42px; padding: 8px 10px 0px 10px; border-right: 1px solid #e5e5e5;"> <a href="LINK HERE" style="text-decoration: none;"><span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c; font-weight: bold;">USERNAME HERE</span></a> <br/> <span style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #aeaeae; text-transform: uppercase;">GAME</span> </div> <div style="float: left; height: 42px; padding: 8px 10px 0px 10px;"> <a href="LINK HERE" style="text-decoration: none;"><span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c; font-weight: bold;">USERNAME HERE</span></a> <br/> <span style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #aeaeae; text-transform: uppercase;">PLAYER</span> </div> <div style="float: right; height: 42px; padding: 0px 10px 0px 10px;"> <span style="font-family: helvetica, arial, sans-serif; font-size: 34px; color: #3c3c3c; font-weight: bold;">♥</span> </div> </div> <!--LOWER PORTION END--> </div> </raw-code>

BOTTOM <raw-code> <div style="background: #fff; width: 520px; border-radius: 10px; box-shadow: 0px 1px 3px #333; text-align: left;"> <div style="height: 40px; width: 510px; padding: 10px 0px 0px 10px; border-bottom: 1px solid #e5e5e5;"> <span style="font-family: helvetica, arial, sans-serif; font-size: 20px; color: #3c3c3c; font-weight: bold;">Following</span> </div> <!--START ITEM--> <div style="height: 64px; width: 510px; padding: 10px 0px 0px 10px; border-bottom: 1px solid #e5e5e5;"> <div style="float: left;"><img src="IMAGE URL HERE" style="height: 48px; width: 48px; border-radius: 10px;"></div> <div style="float: left; width: 450px; margin-left: 10px;"> <span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c;"><b style="font-size: 14px;">Character Name</b> <span style="font-size: 11px; color: #aeaeae;">@username</span> <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.</span> </div> </div> <!--END ITEM--> <!--START ITEM--> <div style="height: 64px; width: 510px; padding: 10px 0px 0px 10px; border-bottom: 1px solid #e5e5e5;"> <div style="float: left;"><img src="IMAGE URL HERE" style="height: 48px; width: 48px; border-radius: 10px;"></div> <div style="float: left; width: 450px; margin-left: 10px;"> <span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c;"><b style="font-size: 14px;">Character Name</b> <span style="font-size: 11px; color: #aeaeae;">@username</span> <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.</span> </div> </div> <!--END ITEM--> <!--START ITEM--> <div style="height: 64px; width: 510px; padding: 10px 0px 0px 10px; border-bottom: 1px solid #e5e5e5;"> <div style="float: left;"><img src="IMAGE URL HERE" style="height: 48px; width: 48px; border-radius: 10px;"></div> <div style="float: left; width: 450px; margin-left: 10px;"> <span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c;"><b style="font-size: 14px;">Character Name</b> <span style="font-size: 11px; color: #aeaeae;">@username</span> <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.</span> </div> </div> <!--END ITEM--> <div style="height: 80px; width: 510px; text-align: center; padding-top: 20px;"> <span style="font-size: 36px; color: #e5e5e5;">♥</span> </div> </div> </raw-code> <small>code by <user name="cawaii"></small>

ADDITIONAL "FOLLOWERS" <!--START ITEM--> <div style="height: 64px; width: 510px; padding: 10px 0px 0px 10px; border-bottom: 1px solid #e5e5e5;"> <div style="float: left;"><img src="IMAGE URL HERE" style="height: 48px; width: 48px; border-radius: 10px;"></div> <div style="float: left; width: 450px; margin-left: 10px;"> <span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c;"><b style="font-size: 14px;">Character Name</b> <span style="font-size: 11px; color: #aeaeae;">@username</span> <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio, porta cursus ipsum.</span> </div> </div> <!--END ITEM-->

1. Ideal background size is 320px by 520px. To make an image repeat, add the part in blue to the code:

background: url(IMAGE URL HERE) repeat;

There is no need to add a gradient to the image; the code does that for you.
2. For the Following portion of the code, keep the text at two lines or less.
3. You may change the ♥ (♥ in the code) to whatever symbol or image you want!
4. Use this code however you want. Let me know if something screws up!

Comments

[mythicgeek]

This is really cute! Nicely done!

[yanyan]

Thank you very much!

[darjeeling]

Holy crap that's gorgeous. @_@

[yanyan]

Thank you!

[ruriair]

Adding to memories because this is just bangin'.

[chimp]

This is gorgeous! It must have taken you a lot of work, great job ;D

[sephiroth]

I'd like to use the 'additional followers' with a secondary set on the right, like tables. i TRIED to do it...

http://sephiroth.dreamwidth.org/3847.html#cutid1

:( i messed it up, but this is what i want...is this possible without totally screwing the actual dw layout?

[yanyan]

Oh man, this is a really old code I need to fix, lmao

I'm not sure what happened in your post above, but that often happens to me because of the float property. I correct this by removing it and/or adding the display property instead. I made a fixed version for you here, but the width of the boxes are smaller. You'll have to adjust the height of each individual "tweet" if you want more space and still keep it looking good! Just remember to remove border-bottom: 1px solid #e5e5e5; from the last "tweet" do you don't get a weird grey border at the bottom.

[sephiroth]

HOLY SHIT, LOL.

im so sorry i come and tag your old stuff, but it's so good. lol

[yanyan]

haha, it's no problem! thank you!