InsaneJournal

Tweak says, "God's not in this time of year"

Marissa (glamourcharm) wrote in rp_tutorials,
@ 2014-02-03 21:41:00

Entry tags:

coding: cast list

Want a clean character list layout that packs a design punch?

Then have I got a layout for you!

Static Preview

Let's start looking at the component elements...

0. The Groundwork
You need an <lj-raw> tag and a <center> tag around this whole layout. This is a permutation of the old floating cast table (more examples here), so you can add character after character wherever you want and the code automatically wraps. I have it set to loop five characters, but that's easily adjusted. Big ups to

xcelsior who helped me getting the transparency working.

1. The Banners

These are just basic divs that span the page. I'm including the ones I used here for anybody who needs them but I don't really think they're integral to the design. Change 'em out! Use graphics! Have a ball.

2. The Character Squares

JOHN DOE
profile x tags

The image size used here is 150 x 150, but there's code in the design to resize the images themselves and given that it's not much larger than an icon, they can easily be used in a pinch or as a placeholder until you have time to make a graphic. The "profile" and "tags" links are merely a suggestion. The text lives on a semi-transparent div that lays over each image. I have opacity set to 90%, but I feel you can go as low as 70% without losing readability.

You need a container around the character squares for the wrap around functionality that this layout provides. This is the only place where this layout uses tables. Around each cast list you need to use the following: <:table border="0"><tr><td width=" x "> (where "x" = the width you'd like each cast list to be. I use 840px to get five squares across.

3. The Final Product

Here's all that code all together. Enjoy!

<lj-raw>
<center>

<center><div style="width:840px;padding:0px;font-family:impact;letter-spacing:2px;text-transform:uppercase;font-size:45pt;text-align:center;color:#000;text-shadow:-2px 2px 3px #c0c0c0;">character list</div></center>
<BR><BR>

<center><div style="width:840px;padding:0px;font-family:helvetica;letter-spacing:2px;text-transform:uppercase;font-size:24pt;text-align:center;color:#a5a5a5;text-shadow:-2px 2px 3px #c0c0c0;">game name</div></center>

<div style="margin-left:3px;margin-top:-50px;width:142px;color:#000;background-color:#eaeaea;padding:5px;opacity:0.9; filter:alpha(opacity=90);font-size:16px;font-family:helvetica;vertical-align:center;text-align:center;"><strong>CHARACTER</strong><br><span style="font-size:10px"><a href="http://www.insanejournal.com/" style="color:#000;">profile</a> x <a href="http://www.insanejournal.com/" style="color:#000;">tags</a></span></div></div>

</td></tr></table>
</lj-raw>
</center>

You can see it in action here at my CDJ.

(Post a new comment)

	darkhuntress 2014-02-05 01:42 am UTC (link)
	I tweaked this some and am using it here. Thanks for the awesome code! (Reply to this) (Thread)

	glamourcharm 2014-02-05 01:49 am UTC (link)
	The modifications look awesome :D (Reply to this) (Parent)

	parabellummods 2014-02-09 01:12 am UTC (link)
	We're using it here with a couple of tweaks. (Reply to this) (Thread)

	glamourcharm 2014-02-09 04:17 am UTC (link)
	Nice! :D (Reply to this) (Parent)

	b8g8 2014-02-15 08:40 pm UTC (link)
	Thank you! (Reply to this) (Thread)

	glamourcharm 2014-02-16 02:42 pm UTC (link)
	Enjoy! (Reply to this) (Parent)

	bonemeal 2014-02-16 01:31 am UTC (link)
	Good lord, this is amazeballs. Using for my CDJ here, will make some minor similar tweaks (rounded edges, etc). 8D Will credit you in my resources list. (Reply to this) (Thread)

	glamourcharm 2014-02-16 02:44 pm UTC (link)
	Awesomesauce. I hope the setup process is simple for you. If anything gives you a headache, let me know. (Reply to this) (Parent)

	faeriedust 2014-02-17 05:33 pm UTC (link)
	Used here with some (very) minor layout tweaks. (Reply to this) (Thread)

	glamourcharm 2014-02-17 05:34 pm UTC (link)
	Looks awesome with the gifs! (Reply to this) (Parent)

	superstarmod 2014-02-20 07:10 am UTC (link)
	Snagged thanks! (Reply to this)

	bonemeal 2014-04-12 10:30 am UTC (link)
	I haven't finished, but I did something stupid and i don't know how to fix it. Or even know what I did. Right, so; 1. There are raw snippets of 'table border' floating around. What do? 2. I have rounded the icon borders/divs, but how do I round the overlayed character name/journal link section to match? (Reply to this) (Thread)

glamourcharm
2014-04-12 05:07 pm UTC (link)

1. Basically the way this works is there's a whole bunch of sets of bundled div tags that are the character blocks themselves. You want all of those to be nestled within a single cell table because the parameters of that table are what makes the lines of characters wrap around cleanly.

I suspect that when you're adding the character in, you're either adding additional table open/closes or something to that affect, but I'd be happy to take a look at whatever code you have.

2. You can technically do this by altering the second "div" attribute in the "CHARACTER" grouping to include border-radius code. However, since this floats about 3/4 the way down on the image, it may not look ideal doing that.

You can tweak the placement of that overlay by altering the margin-left and margin-top attributes (basically, if you want to move it up make it MORE negative). I made two examples (one with rounded corners where the overlay normally lives and one with it moved up to margin-top:-95px). You can see here

(Reply to this) (Parent) (Thread)

	bonemeal 2014-04-13 12:10 am UTC (link)
	Sorry, IBforgot >to link you: here. Thanks! (Reply to this) (Parent) (Thread)

glamourcharm
2014-04-13 07:08 am UTC (link)

Okay from what firebug is telling me, you have an extra "Table" attribute right under/after the div where it says "Taken" that you don't need. The code appears to go:

<table border="0">

<table border="0">

Get rid of the spare and you'll be fine.

Also! re: item 2 - the overlay div looks like it can be tweaked if you add a border-radius attribute that defines no changes to the top two corners and appropriate adjustments to the bottom. Grabbed your code to show you here

The code variation is as follows:


<div style="width:150px;height:150px;text-align:left;vertical-align:center;margin:2px;float:left;padding:2px;">
<img style="width:150px;border-radius:25%;border: 3px solid #ededed;" src="http://i735.photobucket.com/albums/ww354/wolfat_thedoor/BONEMEAL/CAST%20-%20ACTIVE/JOKHL.jpg">
<div style="margin-left:3px;margin-top:-50px;width:142px;color:#000;background-color:#eaeaea;padding:4px;opacity:0.9; filter:alpha(opacity=90);font-size:15px;font-family:helvetica;vertical-align:center;text-align:center;border-radius: 0px 0px 20px 20px;">
<strong>The Joker</strong>
<br>
<span style="font-size:10px">For Rob & Nikki</span>
</div>
</div>

(Reply to this) (Parent)

glamourcharm
2014-04-13 07:11 am UTC (link)

Let me repost that with the code I added highlighted in red:


<div style="width:150px;height:150px;text-align:left;vertical-align:center;margin:2px;float:left;padding:2px;">
<img style="width:150px;border-radius:25%;border: 3px solid #ededed;" src="http://i735.photobucket.com/albums/ww354/wolfat_thedoor/BONEMEAL/CAST%20-%20ACTIVE/JOKHL.jpg">
<div style="margin-left:3px;margin-top:-50px;width:142px;color:#000;background-color:#eaeaea;padding:4px;opacity:0.9; filter:alpha(opacity=90);font-size:15px;font-family:helvetica;vertical-align:center;text-align:center;border-radius: 0px 0px 20px 20px;">
<strong>The Joker</strong>
<br>
<span style="font-size:10px">For Rob & Nikki</span>
</div>
</div>

(Reply to this) (Parent) (Thread)

	bonemeal 2014-04-13 07:20 am UTC (link)
	Cheers! Off to test it, and I will credit you asap once I get my resources post back up. (Reply to this) (Parent)

	jensuckscdj 2014-08-11 07:28 am UTC (link)
	Stole for my CDJ Here awesome code! (Reply to this) (Thread)

	glamourcharm 2014-08-11 03:38 pm UTC (link)
	Looks great! :D (Reply to this) (Parent)

	theonewhocalled 2016-02-18 06:03 pm UTC (link)
	Totally not sure if you'll see this but snagged your banner from here to use with another cast layout for my journal :) hope you don't mind the mixing! (Reply to this) (Thread)

	glamourcharm 2016-02-18 10:37 pm UTC (link)
	No worries. Code onward :D (Reply to this) (Parent)