Template:SideTOC

How to use SideTOC

SideTOC is just a cute, slightly-customizable, way to produce a Table of Contents that floats in the bottom-right corner of the page it's on. You can set a custom colour for it and customize the title that appears over it. My recommendation is to use it on your Character Pages if you like it. You can see it in-use on this page, down in the bottom right!

Things to note:

• SideTOC won't force a TOC to appear if the page doesn't think one is needed (e.g. few headings)
  • It's recommended you only use this template on pages with at least a few headings, otherwise, why bother?

• SideTOC might not work neatly on all pages, particularly pages with lots of content along the right side of the page
  • If you're finding it's a bit bulky, try paring down the number of headings

• SideTOC might be awkward / non-functional on mobile devices or older browsers. Consider it's use carefully.
  • You may also want to create a secondary "Mobile-Friendly" version of your page by adding "/Mobile" to the page URL. (Up to you!)

A cute, slightly-customizable, Table of Contents that floats in the bottom-right corner of the page.

Template parameters

Parameter		Description	Type	Status
color	color	Set a color for your SideTOC. Suggested values steelblue, firebrick, darkgoldenrod, black, green Default grey	Unknown	optional
title	title	Set a custom title for your Side TOC. Default {{PAGENAME}}	Unknown	optional

Changing the Color

By default, SideTOC will appear in a Grey colour. If you want to set a custom colour, do this:

{{SideTOC|color=YourChoice}}

For Example...

{{SideTOC|color=black}}
{{SideTOC|color=steelblue}}
{{SideTOC|color=#b22222}}

Will generate something like these, respectively:

Black Example

Mock Table of Contents [hide]

1. Example Table of Contents
2. Further examples
3. How many examples?
   1. This many examples

SteelBlue Example

Mock Table of Contents [hide]

1. Example Table of Contents
2. Further examples
3. How many examples?
   1. This many examples

#b22222 Example

Mock Table of Contents [hide]

1. Example Table of Contents
2. Further examples
3. How many examples?
   1. This many examples

Some common colours you might want to consider using, include:

• steelblue (e.g. science, medical)
• goldenrod or darkgoldenrod (e.g. security, tactical, engineering, operations)
• firebrick (e.g. command, intelligence)
• green (e.g. marines)

If you want to use a hex value (e.g. #FFFFFF / #000000) you can also use that instead.

Changing the Title

By default, SideTOC will use the Page Name as its title. If you want to set a custom title (e.g. if the Page Name is long or awkward), do this:

{{SideTOC|title=YourChoice}}

For example...

{{SideTOC|title=Custom Title}}

{{SideTOC|title=Blue Custom Title|color=steelblue}}

Will generate something like these, respectively:

Custom Title

Mock Table of Contents [hide]

1. Example Table of Contents
2. Further examples
3. How many examples?
   1. This many examples

Blue Custom Title

Mock Table of Contents [hide]

1. Example Table of Contents
2. Further examples
3. How many examples?
   1. This many examples

Overlapping Content?

Here's a recommendation on what to do if your SideTOC is overlapping content and you don't like that. Add the following code to the top of your page, right under your SideToc element:

<div style="margin-right: WIDTH;">

Replacing the "WIDTH" parameter with the approximate width of your SideTOC. If you're familiar with browser developer tools, you can likely calculate this exactly, but it'll probably be something around "150px" to "200px" and won't be more than "300px", as that is the maximum width set in the SideTOC template. You can also theoretically use %s here, rather than pixels, but that's not recommended.

What this does is effectively pad the right-side of your page by the WIDTH amount to allow some extra space for the SideTOC not to overlap your page content. If you need some help with this, contact a Wiki Ops member or The creator of this Template.

Note - This code is in-use on this page, as a demonstration, with a value set to "220px".

It's Too Big!

SideTOC works great for pages with few layers of headings. The more headings and, in particular, layers of headings you have, the longer and wider it will be. If you want to use SideTOC, you may want to consider paring down the number of headings on your page.

SideTOC