Tweak

InsaneJournal

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

Username: 
Password:    
Remember Me
  • Create Account
  • IJ Login
  • OpenID Login
Search by : 
  • View
    • Create Account
    • IJ Login
    • OpenID Login
  • Journal
    • Post
    • Edit Entries
    • Customize Journal
    • Comment Settings
    • Recent Comments
    • Manage Tags
  • Account
    • Manage Account
    • Viewing Options
    • Manage Profile
    • Manage Notifications
    • Manage Pictures
    • Manage Schools
    • Account Status
  • Friends
    • Edit Friends
    • Edit Custom Groups
    • Friends Filter
    • Nudge Friends
    • Invite
    • Create RSS Feed
  • Asylums
    • Post
    • Asylum Invitations
    • Manage Asylums
    • Create Asylum
  • Site
    • Support
    • Upgrade Account
    • FAQs
    • Search By Location
    • Search By Interest
    • Search Randomly

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

Previous Entry  Add to memories!  Tell a Friend!  Next Entry
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 [info]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!



You can see it in action here at my CDJ.


(Post a new comment)


[info]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)


[info]glamourcharm
2014-02-05 01:49 am UTC (link)
The modifications look awesome :D

(Reply to this) (Parent)


[info]parabellummods
2014-02-09 01:12 am UTC (link)
We're using it here with a couple of tweaks.

(Reply to this) (Thread)


[info]glamourcharm
2014-02-09 04:17 am UTC (link)
Nice! :D

(Reply to this) (Parent)


[info]b8g8
2014-02-15 08:40 pm UTC (link)
Thank you!

(Reply to this) (Thread)


[info]glamourcharm
2014-02-16 02:42 pm UTC (link)
Enjoy!

(Reply to this) (Parent)


[info]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)


[info]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)


[info]faeriedust
2014-02-17 05:33 pm UTC (link)
Used here with some (very) minor layout tweaks.

(Reply to this) (Thread)


[info]glamourcharm
2014-02-17 05:34 pm UTC (link)
Looks awesome with the gifs!

(Reply to this) (Parent)


[info]superstarmod
2014-02-20 07:10 am UTC (link)
Snagged thanks!

(Reply to this)


[info]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)


[info]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)


[info]bonemeal
2014-04-13 12:10 am UTC (link)
Sorry, IBforgot >to link you: here.

Thanks!

(Reply to this) (Parent) (Thread)


[info]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:

<!--CHARACTER-->
<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)


[info]glamourcharm
2014-04-13 07:11 am UTC (link)
Let me repost that with the code I added highlighted in red:

<!--CHARACTER-->
<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)


[info]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)


[info]jensuckscdj
2014-08-11 07:28 am UTC (link)
Stole for my CDJ Here awesome code!

(Reply to this) (Thread)


[info]glamourcharm
2014-08-11 03:38 pm UTC (link)
Looks great! :D

(Reply to this) (Parent)


[info]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)


[info]glamourcharm
2016-02-18 10:37 pm UTC (link)
No worries. Code onward :D

(Reply to this) (Parent)



Home | Site Map | Manage Account | TOS | Privacy | Support | FAQs