Project Mugetsu (![[info]](https://www.insanejournal.com/img/userinfo.gif){kind=small} mugetsu) wrote in ![[info]](https://www.insanejournal.com/img/community.gif){kind=small} rp_tutorials,@ 2010-10-21 15:36:00 |
 |
|||
|
|
|
|
|
|
|
| Current mood: |  nerdy |
| Entry tags: | coding: cast list, layouts: cdj |
Character Directory tables
chaperoned asked me if I could post the code that I wrote for my CDJ's character directory, so here it is =D The rules on how to use the code, including extra code for adding more rows are under the cut!The live preview can be seen here in my CDJ. I'm afraid you can no longer view the live preview because I've changed my directory. This is a snapshot of what it used to look like. Be warned, the picture is over 300kb.
The code for that particular table, under the LJ-Cut, will look like the following initially, before you change the colours, the text, and the fake!broken tiny icons.
Please follow the instructions under the cut using the provided blank codes. If you need any help, leave a comment =)
I'd appreciate it if you'd leave me credit in whatever disclaimer or credits post you have in your journal, so a simple Character Directory code by
bonemeal would be great.Tiny Icons
I've used tiny icons from Pinvoke's collection, but you can use whatever tiny icons you like.
It is important that the tiny icons you're using are consistent in size, otherwise the different sizes will change the size of the padding in all of the rows in the character directory table; therefore making it look uneven.
Introduction to using anchors
A document anchor can be a visible or an invisible link that bookmarks a specified location in your entry, so clicking on a visible anchor link will automatically scroll down the same page to that invisible anchor.
To make an invisible anchor inside the same entry, use the following code:
To link to an invisible anchor inside the same entry, use the following code:
To link to an invisible anchor that is in another entry, use the following code:
Character Directory Table Instructions
Quicklinks Table Instructions
Return to the Top
LEGEND/RULES TABLE
1.]
Copy/paste the following code at the top of your entry:
Replace the sample text (Available text, etc) with whatever you wanted; and replace the http:// sample links with the URLs to your tiny icons.
QUICKLINKS TABLE
1.]
Copy/paste the following code underneath the above legend table code.
2.]
If you needed more than four tables (as the quicklinks table only has four links to four character directory tables, minus the GO BACK... link), please add the following code to add two more columns, for two more quicklinks.
Copy/paste this code in a new paragraph after the last </td></tr> closing tags in a new paragraph.
If you want to add more rows that span one column instead of two, use the following code for one more quicklink.
Copy/paste this code in a new paragraph after the last </td></tr> closing tags in a new paragraph.
CHARACTER DIRECTORY TABLE
1.]
Copy/paste the following code.
2.] CHANGING THE TINY ICONS
Replace http://... tiny icon samples with your own tiny icon URLs.
E.G http://1ACICON is the location of the tiny icon in the first row, first column; before the 1 A sample text.
3.] CHANGING THE TEXT
Replace 1 A, 1 B, 1 C... samples with the appropriate new text.
E.G 1 A is the fandom label in the first column, 1 B is the Character in the second column, 1 C is the taken/reserved/available status in the third column.
4.] ADDING THE TABLE ANCHORS
Add the following document anchor code before each finished table in it's own line before the table's code starts, remembering to change the ANCHORNAME with something that is relevant to that character directory table.
E.G The anchor name for a tv series table should be tvseries. Alternatively, you can label the anchors like so: header1, header2, header3. instead of tvseries, videogames, miscellanous.
Important: Do not add any text between the > and the </a> HTML or the anchor will no longer be invisible!
5.] ADDING ROWS
To add one more row, add this next code once per column, in a new line after the previous cell.
QUICKLINKS TABLE PART II
1.]
In the Quicklinks table you've already copy/pasted at the top of your entry, replace the #TABLE1, #TABLE2, etc anchor samples with the anchor names you had chosen for the character directory tables.
E.G Using tv series as an example again, replace #TABLE1 with #tvseries, and the link name Link 1 with TV Series.
2.]
You'll notice that there is one row at the bottom of the Quicklinks table that has the sample link GO BACK TO ABOUT ME. This is a link to an invisible anchor in another entry; your about me/profile entry.
Edit your about me/profile entry and add this code at the very top:
Now replace the original code in the quicklinks table that is in the last row of that table; which looks like this:
Subsitute that line of code with this next code. You have to add #aboutme to the end of your about me entry's URL.
If your entry's URL looked like http://youraboutmepage.insanejournal.co
2.]
After saving your post, try clicking on the links in your Quicklinks table to see if it works.
Clicking on the TV Series quicklink should, if done right, take you down the page to the TV Series character directory just before the table actually begins.
If the top of the table's Fandom, Character, Status cells are cut off, it's because you've accidently put the anchor before the table code in the same paragraph - to fix this you should press enter after the anchor code to insert a paragraph break.
YES
NO