3,308
edits
Template:SideTOC: Difference between revisions
m
no edit summary
mNo edit summary |
mNo edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div class="Side-TOC" style="padding: 5px; border: 5px solid white; border-radius: 10px; background-color: {{#if: {{{color|}}} | {{{color}}}; | grey; }}; | <includeonly>{{#css: | ||
.Side-TOC { display:block; } | |||
@media only screen and (max-width: 768px) { | |||
.Side-TOC { display:none; } | |||
} | |||
}} | |||
<div class="Side-TOC" style="padding: 5px; border: 5px solid white; border-radius: 10px; background-color: {{#if: {{{color|}}} | {{{color}}}; | grey; }}; width: max-content; position: sticky; top: 0;"> | |||
<center style="color: white; padding: 5px 0; font-weight: bold;">{{#if: {{{title|}}} | {{{title}}} | {{PAGENAME}} }}</center>__TOC__ | <center style="color: white; padding: 5px 0; font-weight: bold;">{{#if: {{{title|}}} | {{{title}}} | {{PAGENAME}} }}</center>__TOC__ | ||
</div></includeonly><noinclude> | </div></div></includeonly><noinclude><div style="background-color: #f0f0f0;> | ||
== How to use 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!''''' | '''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!''''' | ||
| Line 125: | Line 132: | ||
'''Note''' - This code is in-use on this page, as a demonstration, with a value set to "220px". | '''Note''' - This code is in-use on this page, as a demonstration, with a value set to "220px". | ||
=== It's Too Big! === | === 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.</noinclude> | 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}}</noinclude> | |||