vuvuzela | code

Tetsuya Kuroko

Journal

The Sixth Man

When you come to hate something you liked, it is incredibly painful

True Neutral

( Header ) ( 1 ) ( 2 ) ( 3 )

Colors

#444444

white

<raw-code><div style="display:inline-block;width:280px;border-radius:5px;margin:10px;vertical-align:top!important;overflow:hidden;"><div style="width:260px;height:138px;background:url('http://i.imgur.com/AyQOZ5p.png') center top darkgray;background-size: auto;font-size:14px;font-family:Helvetica Neue,Arial,Helvetica,sans-serif;font-weight:bold;margin:0px; padding:10px">
<div style="height:100%;background:url('http://i.imgur.com/gF2lODH.png')  center -10px no-repeat;margin:-10px;padding:10px;"><a href="URLHERE" style="color:white;text-decoration:none;display:inline-block;"><div style="padding:4px 0;">CHARACTER NAME</div></a> <a href="URLHERE" style="color:#444444;display:inline-block;float:right;"><div style="background:white;font-size:13px;border-radius:3px;padding:5px 14px;float:right;">Journal</div></a></div></div><div style="width:260px;background:white;color:#444444;font-family:helvetica;font-size:11px;text-align:center;margin:0;padding:10px;"><div style="margin-top:-61px;"><img src="ICONRUL" style="width:64px;height:64px;border:3px solid white;border-radius:7px;"></div><div style="font-size:16px;font-family:'Gibson',Verdana, sans-serif;font-weight:bold;margin:5px;">HEADER</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id.

Daiki Aomine

Journal

Streetballer

The only one who can beat me is me.

Cold, Bold

( Header ) ( 1 ) ( 2 ) ( 3 )

Colors

#172C3C

#E6B33D

<raw-code><div style="display:inline-block;width:280px;border-radius:5px;margin:10px;vertical-align:top!important;overflow:hidden;">
<div style="width:260px;height:138px;background:url('IMAGEURLHERE') no-repeat center center darkgray;background-size: 100% auto ;font-size:14px;font-family:Helvetica Neue,Arial,Helvetica,sans-serif;font-weight:bold;margin:0px; padding:10px"><div style="height:100%;background:url('http://i.imgur.com/gF2lODH.png')  center -10px no-repeat;margin:-10px;padding:10px;"><a href="URLHERE" style="color:white;text-decoration:none;display:inline-block;"><div style="padding:4px 0;">CHARACTER NAME</div></a> <a href="URLHERE" style="color:#444444;display:inline-block;float:right;"><div style="background:white;font-size:13px;border-radius:3px;padding:5px 14px;float:right;">Journal</div></a></div></div><div style="width:260px;background:#172C3C;color:#E6B33D;font-family:helvetica;font-size:11px;text-align:center;margin:0;padding:10px;"><div style="margin-top:-61px;"><img src="ICONURL" style="width:64px;height:64px;border:3px solid #172C3C;border-radius:7px;"></div>
<div style="font-size:16px;font-family:'Gibson',Verdana, sans-serif;font-weight:bold;margin:5px;">HEADER</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id.

Notes:

- Styled after Tumblr's journal preview box.
- The title section is written in "Gibson" on Tumblr, but I don't have that font downloaded so it's not visible on the preview. However, it is there in the code for those that do have it.
- If your "Lorem ipsum" text has only one line and you want it to match the preview height, add <div style="min-height:15px;"> before it, and </div> after it
- I suggest ColourLovers for fun patterns like the one shown if you'd rather go the neutral route. Otherwise, http://i.imgur.com/AyQOZ5p.png is still within the code
- While it is BEST that you resize the images yourself, the code does make an attempt to resize the images manually (since i know gifs can be hard to resize if you don't have the right program.) If you find that your image is cropped too narrow, look for background-size: near the image URL and switch auto and 100% around.

code

no subject

no subject

no subject

no subject