InsaneJournal

Tweak says, "Dr. Jekyll and Mr. Bio-Viper"

welcome to the jungle. (

assailant) wrote in

rp_tutorials,
@ 2009-06-27 14:45:00

omg! a cast directory!
Hello!

I am here to present for you, a cast directory page that is not only incredibly useful, but informative as well. The code was originally made by my really good friend,

define who gave it to me, which I have edited appropriately. I'll be sharing the HTML with you today, as well as explaining what you could do, and what should be done.

SCREENSHOTS, FTW.

!SAMPLE! cast list

(juniors)

(warren worthington III)

journal (seraphs)
age 22. place of birth centerport, long island, new york.
sexual orientation homosexual.
major business administration. minor political science.
clubs student congress, economics club, gay/straight alliance. sports none.
abilities accelerating healing, avian evolved bone structure, flight.
back to yearbook?

(alison blaire)

journal (fluorescence)
age 21. place of birth gardendale, new york.
sexual orientation heterosexual.
major music. minor theater.
clubs cheerleading, concert band. sports volleyball.
abilities converts sound into various forms of light.
back to yearbook?

(wade wilson)

journal (cancery)
age 22. place of birth ?????, connecticut.
sexual orientation unsure.
major business administration. minor international studies.
clubs cheerleading, urban action. sports track & field, cross country, gymnastics.
abilities enhanced metabolic and healing factors.
back to yearbook?

(alexander "alex" summers)

journal (no_tomatoes)
age 21. place of birth honolulu, hawaii.
sexual orientation heterosexual.
major earth science. minor environmental science.
clubs none. sports swimming (cap'n), cross country, lacrosse.
abilities ambient energy emission via hands.
back to yearbook?

(meggan hannah)

journal (emotastic)
age 21. place of birth monterey, california.
sexual orientation bisexual.
major psychology. minor art (photography).
clubs art club. sports gymnastics.
abilities empathic bond with the natural world, empathic manipulation.
back to yearbook?

(lorna dane)

journal (lalorna)
age 21. place of birth adopted out of san francisco, california.
sexual orientation heterosexual.
major earth science. minor gender & women's studies.
clubs outdoor adventure club. sports soccer, track and field, baseball (Cap'n).
abilities manipulates electro-magnetic field; magnekinetic.
back to yearbook?

(morgan vigneaux)

journal (contemptible)
age 20. place of birth not applicable.
sexual orientation heterosexual.
major art. minor writing.
clubs orchestra. sports none.
abilities control over spirit entities.
back to yearbook?

Awesome information on your character here! :D Lots TBA. Why don't you join via scandalousmods?
back to yearbook?

(seniors)

(piotr rasputin)

journal (bigmanoncampus)
age 21. place of birth novosibirsk, siberia
sexual orientation heterosexual.
major international studies. minor anthropology.
clubs art club, debate team, outdoor adventure club, philosophy club & urban action sports none.
abilities generation of organic steel, super strength, durability.
back to yearbook?

(victor creed)

journal (wild_side)
age 22. place of birth frank, alberta province, canada.
sexual orientation heterosexual.
major criminal justice. minor international studies.
clubs outdoor adventure club. sports wrestling.
abilities accelerated healing factor, enhanced senses, incredibly durable nails & teeth.
back to yearbook?

(jean grey)

journal (simply_jean)
age 22. place of birth annandale-on-hudson, new york.
sexual orientation heterosexual.
major psychology. minor environmental science.
clubs debate team, student congress. sports soccer (cap'n).
abilities telekinesis, telepathy, capable of harnessing the phoenix force.
back to yearbook?

(james howlett)

journal (bone_claws)
age 25. place of birth ???????, alberta province, canada.
sexual orientation pansexual.
major criminal justice. minor international studies.
clubs none. sports wrestling.
abilities accelerated healing factor, enhanced senses, bone claws.
back to yearbook?

(vance astrovik)

journal (vance_astrovik)
age 24. place of birth new york city, new york.
sexual orientation heterosexual.
major social science. minor spanish.
clubs college democrats, urban action. sports track & field.
abilities flight, levitation/telekinesis, generation of forcefields.
back to yearbook?

Awesome information on your character here! :D Lots TBA. Why don't you join via scandalousmods?
back to yearbook?

!SAMPLE! cast list
<div style="height: 300px; overflow: hidden;"><div align="center"> <a name="juniors"></a><a href="#polaris"> <img src="http://www.insanejournal.com/userpic/8428618/204479" alt="lorna dane"></a> <a href="#deadpool"><img src="http://www.insanejournal.com/userpic/8403457/411576" alt="wade wilson"></a> <a href="#meggan"><img src="http://www.insanejournal.com/userpic/4179212/254342" alt="meggan hannah"></a> <a href="#archangel"><img src="http://www.insanejournal.com/userpic/8374486/410545" alt="warren worthington III"></a> <a href="#wicked"><img src="http://www.insanejournal.com/userpic/3885665/87297" alt="morgan vigneaux"></a> <a href="#dazzler"><img src="http://www.insanejournal.com/userpic/6824236/358367" alt="alison blaire"></a> <a href="#havok"><img src="http://www.insanejournal.com/userpic/7260187/372658" alt="alex summers"></a>
<a href="#clickhere2"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#clickhere2"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#clickhere2"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#clickhere2"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#clickhere2"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#clickhere2"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#clickhere2"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> 
<big>(</big>juniors<big>)</big>

<a name="archangel"><center><img src="http://www.insanejournal.com/userpic/8388614/410545"> <img src="http://www.insanejournal.com/userpic/8374496/410545"> <img src="http://www.insanejournal.com/userpic/8374493/410545">
<big>(</big>warren worthington III<big>)</big></center>journal (<lj user="seraphs">) 
age 22. place of birth centerport, long island, new york.
sexual orientation homosexual.
major business administration. minor political science.
clubs student congress, economics club, gay/straight alliance. sports none.
abilities accelerating healing, avian evolved bone structure, flight.
<a href="#juniors">back to yearbook</a>?

<a name="dazzler"><center><img src="http://www.insanejournal.com/userpic/6824266/358367"> <img src="http://www.insanejournal.com/userpic/6824282/358367"> <img src="http://www.insanejournal.com/userpic/6824231/358367">
<big>(</big>alison blaire<big>)</big></center>journal (<lj user="fluorescence">) 
age 21. place of birth gardendale, new york.
sexual orientation heterosexual.
major music. minor theater.
clubs cheerleading, concert band. sports volleyball.
abilities converts sound into various forms of light.
<a href="#juniors">back to yearbook</a>?

<a name="deadpool"><center><img src="http://www.insanejournal.com/userpic/8403518/411576"> <img src="http://www.insanejournal.com/userpic/8403559/411576">
<big>(</big>wade wilson<big>)</big></center>journal (<lj user="cancery">) 
age 22. place of birth ?????, connecticut.
sexual orientation unsure.
major business administration. minor international studies.
clubs cheerleading, urban action. sports track & field, cross country, gymnastics.
abilities enhanced metabolic and healing factors.
<a href="#juniors">back to yearbook</a>?

<a name="havok"><center><img src="http://www.insanejournal.com/userpic/7260195/372658"> <img src="http://www.insanejournal.com/userpic/7329173/372658"> <img src="http://www.insanejournal.com/userpic/7329451/372658">
<big>(</big>alexander "alex" summers<big>)</big></center>journal (<lj user="no_tomatoes">) 
age 21. place of birth honolulu, hawaii.
sexual orientation heterosexual.
major earth science. minor environmental science.
clubs none. sports swimming (cap'n), cross country, lacrosse.
abilities ambient energy emission via hands.
<a href="#juniors">back to yearbook</a>?

<a name="meggan"><center><img src="http://www.insanejournal.com/userpic/4179194/254342"> <img src="http://www.insanejournal.com/userpic/4179186/254342"> <img src="http://www.insanejournal.com/userpic/4222281/254342">
<big>(</big>meggan hannah<big>)</big></center>journal (<lj user="emotastic">) 
age 21. place of birth monterey, california.
sexual orientation bisexual.
major psychology. minor art (photography).
clubs art club. sports gymnastics.
abilities empathic bond with the natural world, empathic manipulation.
<a href="#juniors">back to yearbook</a>?

<a name="polaris"><center><img src="http://www.insanejournal.com/userpic/8367404/204479"> <img src="http://www.insanejournal.com/userpic/7306744/204479"> <img src="http://www.insanejournal.com/userpic/8367372/204479">
<big>(</big>lorna dane<big>)</big></center>journal (<lj user="lalorna">) 
age 21. place of birth adopted out of san francisco, california.
sexual orientation heterosexual.
major earth science. minor gender & women's studies.
clubs outdoor adventure club. sports soccer, track and field, baseball (Cap'n).
abilities manipulates electro-magnetic field; magnekinetic.
<a href="#juniors">back to yearbook</a>?

<a name="wicked"><center><img src="http://www.insanejournal.com/userpic/3885782/87297"> <img src="http://www.insanejournal.com/userpic/3885889/87297"> <img src="http://www.insanejournal.com/userpic/3885894/87297">
<big>(</big>morgan vigneaux<big>)</big></center>journal (<lj user="contemptible">) 
age 20. place of birth not applicable.
sexual orientation heterosexual.
major art. minor writing.
clubs orchestra. sports none.
abilities control over spirit entities.
<a href="#juniors">back to yearbook</a>?

<a name="clickhere2"> Awesome information on your character here! :D Lots TBA. Why don't you join via <lj user="scandalousmods">?
<a href="#juniors">back to yearbook</a>?
</div></div><div align="justify">

<div style="height: 300px; overflow: hidden;"><div align="center"> <a name="seniors"></a><a href="#sabretooth"> <img src="http://www.insanejournal.com/userpic/8342439/413040" alt="victor creed"></a> <a href="#phoenix"><img src="http://www.insanejournal.com/userpic/8367118/411587" alt="jean grey"></a> <a href="#wolverine"><img src="http://www.insanejournal.com/userpic/8453039/413595" alt="james howlett"></a> <a href="#clickhere3"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#colossus"><img src="http://www.insanejournal.com/userpic/8438389/416508" alt="piotr rasputin"></a> <a href="#clickhere3"><img src="http://www.insanejournal.com/userpic/8233058/406948" alt="pick me!"></a> <a href="#justice"><img src="http://www.insanejournal.com/userpic/8462866/417253" alt="vance astrovik"></a> 
<big>(</big>seniors<big>)</big>

<a name="colossus"><center><img src="http://www.insanejournal.com/userpic/8438345/416508"> <img src="http://www.insanejournal.com/userpic/8438398/416508"> <img src="http://www.insanejournal.com/userpic/8438374/416508">
<big>(</big>piotr rasputin<big>)</big></center>journal (<lj user="bigmanoncampus">) 
age 21. place of birth novosibirsk, siberia
sexual orientation heterosexual.
major international studies. minor anthropology.
clubs art club, debate team, outdoor adventure club, philosophy club & urban action sports none.
abilities generation of organic steel, super strength, durability.
<a href="#seniors">back to yearbook</a>?

<a name="sabretooth"><center><img src="http://www.insanejournal.com/userpic/8342421/413040"> <img src="http://www.insanejournal.com/userpic/8342432/413040"> <img src="http://www.insanejournal.com/userpic/8342426/413040">
<big>(</big>victor creed<big>)</big></center>journal (<lj user="wild_side">) 
age 22. place of birth frank, alberta province, canada.
sexual orientation heterosexual.
major criminal justice. minor international studies.
clubs outdoor adventure club. sports wrestling.
abilities accelerated healing factor, enhanced senses, incredibly durable nails & teeth.
<a href="#seniors">back to yearbook</a>?

<a name="phoenix"><center><img src="http://www.insanejournal.com/userpic/8367121/411587"> <img src="http://www.insanejournal.com/userpic/8367049/411587"> <img src="http://www.insanejournal.com/userpic/8367038/411587">
<big>(</big>jean grey<big>)</big></center>journal (<lj user="simply_jean">) 
age 22. place of birth annandale-on-hudson, new york.
sexual orientation heterosexual.
major psychology. minor environmental science.
clubs debate team, student congress. sports soccer (cap'n).
abilities telekinesis, telepathy, capable of harnessing the phoenix force.
<a href="#seniors">back to yearbook</a>?

<a name="wolverine"><center><img src="http://www.insanejournal.com/userpic/8453065/413595"> <img src="http://www.insanejournal.com/userpic/8369735/413595"> <img src="http://www.insanejournal.com/userpic/8453058/413595">
<big>(</big>james howlett<big>)</big></center>journal (<lj user="bone_claws">) 
age 25. place of birth ???????, alberta province, canada.
sexual orientation pansexual.
major criminal justice. minor international studies.
clubs none. sports wrestling.
abilities accelerated healing factor, enhanced senses, bone claws.
<a href="#seniors">back to yearbook</a>?

<a name="justice"><center><img src="http://www.insanejournal.com/userpic/8501876/417253"> <img src="http://www.insanejournal.com/userpic/8501852/417253"> <img src="http://www.insanejournal.com/userpic/8501825/417253">
<big>(</big>vance astrovik<big>)</big></center>journal (<lj user="vance_astrovik">) 
age 24. place of birth new york city, new york.
sexual orientation heterosexual.
major social science. minor spanish.
clubs college democrats, urban action. sports track & field.
abilities flight, levitation/telekinesis, generation of forcefields.
<a href="#seniors">back to yearbook</a>?

<a name="clickhere3"> Awesome information on your character here! :D Lots TBA. Why don't you join via <lj user="scandalousmods">?
<a href="#seniors">back to yearbook</a>?

</div></div><div align="justify">

explanation
The HTML may seem complex, but it really isn't. You're using div layers, as well as page anchors, which gives the illusion of a smaller cast page, with twice the information you can provide. I'll explain what I did here, and if you'd like to switch it up, and brave your own, that's fine too.

Placed for this example are the college juniors and seniors, as you can see by the a name="#_____". This is important. You should rename that with whatever faction you'd like. This is what people will initially see, and what will inevitably be linked back to, once they're done reading about a particular character. In ever page provided, they will link back to this initial name tag.

You should adjust the dive style height accordingly. For the much larger junior section, there is obviously more space provided. Otherwise, it would appear cut off, it they were the same. The rule of thumb is 100px per icon row. The juniors has two icon rows, and thus it is over 250px. It's hard to say what the ideal addative amount is either, because you DO want some extra space.

There is a seven BR break between each one, to prevent people seeing another name tag after the current one they're looking at. They will appear as many possible within the div size you have made, through the div style="height: code, so you should provide more breaks when needed, or keep the data provided on many lines, allowing the flow of the cast page to remain as above.

While there are #junors #seniors anchors, there are smaller tags as well. This is where individual characters come into play. All must be linked through the original #Juniors at the top, and each SHOULD contain a different tag name. be it first and last, alias, whatever.

As I said above, feel free to play around with the coding where you see fit. You could make the height longer, and after the faction title, could write a little blurb about said faction, you could also but the titles and blurbs at the top, rather than the bottom which is a simple adjustment. You could probably put them in front of a table, or you don't even have to use icons if you choose not to.

credits
Original code was created and give to me by

define (Mise).
Original code has been edited by

assailant (Me), to what it is now.
Code will be posted only here at

rp_tutorials. So, credit should be due! This type of cast page is completely exotic, and easy to spot. A simple credit to this place is all I require.

All icons featured on this tutorial were uploaded by a 3rd party, and thus I contain no control or declare them as my own. Credit should happen via journals, and if they're not, take them up with said 3rd party.

!!!!!THIS IS JUST A SAMPLE!!!!!

You MUST remove information in regards to the previous characters mentioned above, as all content is provided by their player, and thus is not sanctioned for you to redistribute. Please edit these as you find fit, for your use!!!

I think this is all.

examples

augury (characters)

assailant (current characters)
Have one?

(Read comments)

InsaneJournal

Post a comment in response: