Guide for Contents Template

Discussion in 'Game Programming & Design' started by Velma, Oct 11, 2010.

  1. Velma

    Velma Inactive

    For those of you who are wondering what this is, it's just a guide showing how to edit the contents template I made for Phsycical. Whether or not it will work with vBulletin is currently unknown, but it will work on the site itself.

    I recommend making a page with the style sheet and not showing it, since right now it's on a separate forum.

    Code:
    <html> 
    <head> 
    <script language="javascript"> 
    function toggle() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = "show";
          }
        else {
            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    } 
    </script>
    <link rel="stylesheet" href="toc.css" type="text/css" media="screen" />
    </head>
    <table id="toc" class="toc">
    <tr>
    <td>
    <div id="toctitle">
    <h2>Contents</h2>
    <div class="pro">
    <span class="pork">[</span><a class="pork" id="displayText" href="javascript:toggle();">hide</a><span class="pork">]</span><span> </span>
    </div>
    </div>
    <div id="toggleText" style="display: block">
    None of this should ever be modified unless you know what you're doing.

    Code:
    <ul> 
    <li><a href="#test1"><span class="color">1</span> <span class="color">Katrina</span></a></li> 
    <ul>
    <li><a href="#test2"><span class="color">1.1</span> <span class="color">Aftermath</span></a></li> 
    
    </ul>
    <li><a href="#test3"><span class="color">2</span> <span class="color">Joe Cocker</span></a></li> 
    <ul>
    <li><a href="#test4"><span class="color">2.1</span> <span class="color">Life and death and cawk</span></a></li> 
    </ul>
    <li><a href="#test5"><span class="color">4</span> <span class="color">test5</span></a></li> 
    <li><a href="#test6"><span class="color">5</span> <span class="color">test6</span></a></li>
    <li><a href="#test7"><span class="color">6</span> <span class="color">test7</span></a></li>
    <li><a href="#test8"><span class="color">7</span> <span class="color">test8</span></a></li>
    <li><a href="#test9"><span class="color">8</span> <span class="color">test9</span></a></li> 
    <li><a href="#test10"><span class="color">9</span> <span class="color">test10</span></a></li>
    </ul> 
    </div>
    </td> 
    </tr> 
    </table> 
    Don't touch li or span elements. "#test1-10" are ID's. In the text below the Table of Contents, you will need to have the same ID as that which is specified in the a element.

    For example, if you have:

    Code:
    <li><a href="[B]#joecocker[/B]"><span class="color">9</span> <span class="color">test10</span></a></li>
    You would need:

    Code:
    <h2><span id="[B]joecocker[/B]">Joe Cocker is a modern day priest.</span></h2>
    Note: The "#" is not included in the "id" only in the "href"

    You can make it scroll down to anything. p, span, h2, div, etc You just need to specify the class in that element.

    Code:
    <span class="color">9</span> <span class="color">test10</span>
    The "9" is the number that appears in front. The space between "/span" and "span" is needed.

    After "span class="color" test10 can be replaced by anything you want to appear on the table. It will appear after 9 in this case. If you want to make a sub section, you meed to type the number and then edit the table. In this case, I'll be using a sub section for 9 called "9.1".

    Code:
    <ul> 
    <li><a href="#test1"><span class="color">9</span> <span class="color">Katrina</span></a></li> 
    <ul>
    <li><a href="#test2"><span class="color">9.1</span> <span class="color">Aftermath</span></a></li> 
    </ul>
    </ul> 
    To make a sub section use a "ul" inside the other "ul" without closing it. The first "ul" you see isn't close until the very end of the code. To make a sub section put a second "ul" in the table. If you wanted two sub sections, you'd just put the "/ul" after the second one. If you want to make a sub section for that sub section, like 9.1.1, you just put another "ul" and then close it after that section. Example:

    Code:
    <ul>
    <li><a href="#test1"><span class="color">9</span> <span class="color">Katrina</span></a></li> 
    <ul>
    <li><a href="#test2"><span class="color">9.1</span> <span class="color">Aftermath</span></a></li> 
    <ul>
    <li><a href="#test2"><span class="color">9.1.1</span> <span class="color">Restoration</span></a></li> 
    </ul>
    </ul>
    IF YOU PUT ANOTHER THING HERE IT WILL SHOW UP LIKE THE FIRST, 9.1, RATHER THAN BEING INDENTED
    </ul>
    It will look like this:

    9 Katrina
    ..........9.1 Aftermath
    ........................9.1.1 Restoration

    If you ever want to change colors or anything just ask me on Xat.
     
    Last edited: Oct 11, 2010

Share This Page