InsaneJournal

Tweak says, "Sink the Pink"

jadis is the embodiment of all evil (embodimentof) wrote in rp_tutorials,
@ 2012-06-08 20:29:00

Entry tags:

coding: cast list, layouts: cdj

This is a character table that can be modified for CDJs, directories, cast lists, whatever have you and is designed to work with icons.

<center>
<table cellspacing="30px"><tr valign="top"><td style="margin:5px 15px 0px 15px; width:300px; -moz-border-radius: 15px; -webkit-border-radius: 15px; float:left; box-shadow:0px 0px 5px #cccccc;"><div><a href="http://JOURNALNAME.insanejournal.com/"><img width="100px" style="margin:-20px 0px 0px -20px;float:left;width:100px;height:100px; -moz-border-radius: 50px; -webkit-border-radius: 50px;" src="http://i55.tinypic.com/1zxnk47.png"></div></a><div style="text-align:center; width:205px; margin-top:25px; margin-bottom:25px;float:left;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div></td><td style="width:300px; margin:5px 15px 0px 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; float:left; box-shadow:0px 0px 5px  #bbb;"><div><a href="http://JOURNALNAME.insanejournal.com/"><img width="100px" style="margin:-20px 0px 0px -20px;float:left;width:100px;height:100px; -moz-border-radius: 50px; -webkit-border-radius: 50px;" src="http://i55.tinypic.com/1zxnk47.png"></div></a><div style="text-align:center; width:205px; margin-top:25px; margin-bottom:25px;float:left;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div></td>
</tr>
<tr valign="top"><td style="margin:5px 15px 0px 15px; width:300px; -moz-border-radius: 15px; -webkit-border-radius: 15px; float:left; box-shadow:0px 0px 5px #bbb;"><div><a href="http://JOURNALNAME.insanejournal.com/"><img width="100px" style="margin:-20px 0px 0px -20px;float:left;width:100px;height:100px; -moz-border-radius: 50px; -webkit-border-radius: 50px;" src="http://i55.tinypic.com/1zxnk47.png"></div></a><div style="text-align:center; width:205px; margin-top:25px; margin-bottom:25px;float:left;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div></td><td style="width:300px; margin:5px 15px 0px 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; float:left; box-shadow:0px 0px 5px  #bbb;"><div><a href="http://JOURNALNAME.insanejournal.com/"><img width="100px" style="margin:-20px 0px 0px -20px;float:left;width:100px;height:100px; -moz-border-radius: 50px; -webkit-border-radius: 50px;" src="http://i55.tinypic.com/1zxnk47.png"></div></a><div style="text-align:center; width:205px; margin-top:25px; margin-bottom:25px;float:left;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div></td>
</tr></table>

<center>
<table cellspacing="4px"><tr valign="top"><td style="margin:0px 0px 0px 10px;width:340px; float:left;"><div style="text-align:center; width:240px;padding-left:15px;padding-top:20px;height:70px;margin-top:15px;margin-bottom:25px;margin-left:40px;float:left;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow:0px 0px 5px #cccccc;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div><a href="http://JOURNALNAME.insanejournal.com/"><img src="http://i55.tinypic.com/1zxnk47.png" width="130px" style="margin-left:-330px;float:left;width:120px;height:120px;-moz-border-radius:60px;-webkit-border-radius:60px;"></a></td><td style="margin:0px 0px 0px 10px;width:340px; float:left;"><div style="text-align:center; width:240px;padding-left:15px;padding-top:20px;height:70px;margin-top:15px;margin-bottom:25px;margin-left:40px;float:left;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow:0px 0px 5px #cccccc;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div><a href="http://JOURNALNAME.insanejournal.com/"><img src="http://i55.tinypic.com/1zxnk47.png" width="130px" style="margin-left:-330px;float:left;width:120px;height:120px;-moz-border-radius:60px;-webkit-border-radius:60px;"></a></td>
</tr>
<tr valign="top"><td style="margin:0px 0px 0px 10px;width:340px; float:left;"><div style="text-align:center; width:240px;padding-left:15px;padding-top:20px;height:70px;margin-top:15px;margin-bottom:25px;margin-left:40px;float:left;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow:0px 0px 5px #cccccc;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div><a href="http://JOURNALNAME.insanejournal.com/"><img src="http://i55.tinypic.com/1zxnk47.png" width="130px" style="margin-left:-330px;float:left;width:120px;height:120px;-moz-border-radius:60px;-webkit-border-radius:60px;"></a></td><td style="margin:0px 0px 0px 10px;width:340px; float:left;"><div style="text-align:center; width:240px;padding-left:15px;padding-top:20px;height:70px;margin-top:15px;margin-bottom:25px;margin-left:40px;float:left;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow:0px 0px 5px #cccccc;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div><a href="http://JOURNALNAME.insanejournal.com/"><img src="http://i55.tinypic.com/1zxnk47.png" width="130px" style="margin-left:-330px;float:left;width:120px;height:120px;-moz-border-radius:60px;-webkit-border-radius:60px;"></a></td>
</tr></table>

CHARACTER NAME Alignment. Former House. PB Name	CHARACTER NAME Alignment. Former House. PB Name
CHARACTER NAME Alignment. Former House. PB Name	CHARACTER NAME Alignment. Former House. PB Name

CHARACTER NAME Alignment. Former House. PB Name	CHARACTER NAME Alignment. Former House. PB Name
CHARACTER NAME Alignment. Former House. PB Name	CHARACTER NAME Alignment. Former House. PB Name

(Read comments) - (Post a new comment)

souffle
2012-07-28 02:33 pm UTC (link)

:O bad IJ! And it's totally okay, figured you must've been busy or something.

and ohmigosh ♥♥♥♥ thank you. works beautifully.

<td style="margin:0px 0px 0px 10px;width:340px; float:left;"><div style="text-align:center; width:240px;padding-left:15px;padding-top:20px;height:70px;margin-top:15px;margin-bottom:25px;margin-left:40px;float:left;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow:0px 0px 5px #cccccc;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CASSIUS WARRINGTON</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Neutral. Slytherin.
Penn Badgely</div></div><a href="http://JOURNALNAME.insanejournal.com/"><img src="http://i48.tinypic.com/2cy2stk.gif" width="130px" style="margin-left:-330px;float:left;width:120px;height:120px;-moz-border-radius:60px;-webkit-border-radius:60px;"></a></td>
</tr>

<tr valign="top"><td style="margin:0px 0px 0px 10px;width:340px; float:left;"><div style="text-align:center; width:240px;padding-left:15px;padding-top:20px;height:70px;margin-top:15px;margin-bottom:25px;margin-left:40px;float:left;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow:0px 0px 5px #cccccc;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div><a href="http://JOURNALNAME.insanejournal.com/"><img src="http://i55.tinypic.com/1zxnk47.png" width="130px" style="margin-left:-330px;float:left;width:120px;height:120px;-moz-border-radius:60px;-webkit-border-radius:60px;"></a></td>

<td style="margin:0px 0px 0px 10px;width:340px; float:left;"><div style="text-align:center; width:240px;padding-left:15px;padding-top:20px;height:70px;margin-top:15px;margin-bottom:25px;margin-left:40px;float:left;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow:0px 0px 5px #cccccc;"><div style="font-size:14px;letter-spacing:2px;font-family:georgia;text-transform:uppercase;">CHARACTER NAME</div><div style="font-size:10px;letter-spacing:1px;font-family:arial; color:#555">Alignment. Former House.
PB Name</div></div><a href="http://JOURNALNAME.insanejournal.com/"><img src="http://i55.tinypic.com/1zxnk47.png" width="130px" style="margin-left:-330px;float:left;width:120px;height:120px;-moz-border-radius:60px;-webkit-border-radius:60px;"></a></td>
</tr></table>

some of my characters have long names (and that's just first and last), i like the text centered but how do i change the padding so the text stays closer to the right side of the boxes?

(Reply to this) (Parent) (Thread)

embodimentof
2012-07-28 03:05 pm UTC (link)

Find the padding-left:15px values in the code and increase 15 to how far to the right you want it. You'll also have to increase the width:340px and the margin-left:-330px values by the same amount.

For example if you increase it by 10px and change the padding-left from 15px to 25px you have to change the width:340px to 350px and the margin-left:-330px to -340px.

(Reply to this) (Parent) (Thread)

	souffle 2012-07-29 03:57 am UTC (link)
	Thanks! I would've tried doig it myself thru trial and error, but didn't want to stuff up the coding. Really is a great layout! (Reply to this) (Parent)

(Read comments) -