Marissa (![[info]](https://www.insanejournal.com/img/userinfo.gif){kind=small} glamourcharm) wrote in ![[info]](https://www.insanejournal.com/img/community.gif){kind=small} 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
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!