Page 1 of 1

Table of Contents (HTML)

PostPosted: Tue Nov 08, 2011 2:14 am
by Baarb
Hi, I was wondering if anyone had made a custom 'Table of Contents' for one of their pages, i.e. selected 'no' when giving the option in the Editor, and then just put in a lot of HTML to create something more customisable, different colours, box dimensions, place on the page etc.? I reckon I could probably work it out but it would be nice to know if there were some existing examples out there. Cheers.

Re: Table of Contents (HTML)

PostPosted: Thu Nov 10, 2011 12:49 am
by Baarb
Well it's not great but it gives you a horizontal TOC instead of a vertical one. Essentially some of the source code for the default TOC placed inside some code for a box from rgg's test page.
Code: Select all
<div align="center"><div style="border-style: solid; border-width: 1px; width: 500px; text-align: center; background-color: LightGrey;"><div><p><strong>Table of Contents: </strong><a href="#chapter_1">Intro</a>, <a href="#chapter_2">Video</a>, <a href="#chapter_3">Sliding</a>, <a href="#chapter_4">Tables</a>, <a href="#chapter_5">HTML</a>, <a href="#chapter_6">Experiments</a>, <a href="#chapter_7">Images</a></div></p></div></div> 

Re: Table of Contents (HTML)

PostPosted: Thu Nov 10, 2011 1:07 am
by mrchad9
Several people change colors, I am not sure how. You could PM and ask. If you find out anything, maybe post it here.

rebelgrizz is one who does this...

http://www.summitpost.org/krinklehorn-peak/758606

Only other option I know of is to 'view source' on the page and try to lift some code.

Re: Table of Contents (HTML)

PostPosted: Fri Nov 11, 2011 6:35 am
by Baarb
Interesting, this'll give you a 4 line TOC, with the second item in purple, and the third item indented, say as a subheading. Would just have to place the code in and align it on the right-hand side to make it look like the default one.

Code: Select all
<div class="toc"><p><strong>Table of Contents</strong></p><div class="toc_list1"><a href="#chapter_1">Intro</a></div><div class="toc_list1"><a href="#chapter_2"><font color="8A2BE2">Video</font></a></div><div style="text-indent: 2em;"><a href="#chapter_3">Images</a></div><div class="toc_list1"><a href="#chapter_4">Tables</a></div></div>