Template:Community Tabs
Page Organization[]
We already know how to use headers, but what about more advanced page organization? Picks and Bans pages have tables placed side-by-side next to each other. Some pages have a set number of things side-by-side next to each other that collectively span the page. What about a table of contents on the right? This section will go over several organizational things and contain some wiki code that you may want to save so you can copy-paste in the future.
BlockBox[]
This is how Picks and Bans pages work. Items will autofill into a grid left to right and then top down depending on the dimensions of the viewer's browser. You can also control how much space there is in between elements in the grid. Here's how to use a box:
{{BlockBox|start|padding=??em}} Whatever you want in the first "cell" {{BlockBox|break|padding=??em}} Whatever you want in the second "cell" {{BlockBox|break|padding=??em}} etc {{BlockBox|end}}
The ?? is the amount of space you want in between elements. This can scale from 1 upwards, and you will probably never want a number bigger than 10.
|
Here's the code used to generate the above:
{{BlockBox|start|padding=1em}} {|class="wikitable" !There is 1em of padding to the right |} {{BlockBox|break|padding=5em}} {|class="wikitable" !There is 5em of padding to the right |} {{BlockBox|break|padding=2em}} {|class="wikitable" !This is the end (and there is 2em of forced padding between<br>here and the end of the page; this can force the line to wrap). |} {{BlockBox|end}}
You can read the documentation about Boxes here.
Table of Contents[]
If you have at least 4 headings on a page of any level, a table of contents will be created automatically. By default, it's placed right above the first heading and aligned left. But what if you don't want a table of contents? Or what if you want it aligned right?
To hide a table of contents, put the following code anywhere in the page (recommended at the very top):
__NOTOC__
(That's two underscores, then "NOTOC," then two more underscores.)
To show the table of contents elswhere, put the following code exactly where you want the table of contents:
__TOC__
If you want to align the table of contents to the right side of the page, there are two templates you may want to use:
{{TOCRight}}
, which inserts the TOC code on the right side of the page inside a div{{TOCRightWInfobox}}
(or{{TOCRWI}}
for convenience), which inserts the TOC code on the right side of the page inside a div, ofsetting an appropriate amount in order to align it with an infobox.
Expandable Section[]
We use these expandable sections for several purposes, whenever we want to include information that might take up a lot of unnecessary vertical space otherwise.
Here's the base code for an empty box:
<div class="NavFrame collapsed"> <div class="NavHead">[Title]</div> <div class="NavContent"> Content </div></div>
Here's the code for an empty box with our standard formatting:
<div class="NavFrame collapsed" style="width:900px;max-width:100%"> <div class="NavHead" style="background-color:#EEE; border:1px solid #AAA">Click [show] on the right to view</div> <div class="NavContent" style="text-align:left"> </div></div>
There's a lot of parameters you can change though. Let's go through:
Line | Parameter | What values it can take | What it does |
---|---|---|---|
1 | class="NavFrame collapsed" | class="NavFrame" or class="NavFrame collapsed" | Toggles between collapsed and uncollapsed |
1 | width:900px | Any number of pixels | Controls the absolute width of the box |
1 | max-width:100% | Any percentage < 100% | Controls the maximum width of the box as a percentage of your browser's width |
2 | style="background-color:#EEE; | Anything supported by CSS backgrounds (except background images) | Controls the header background style |
2 | border:1px solid #AAA | Anything supported by CSS borders | Controls the border style |
3 | Click [show] on the right to view | Any text | Shows at the top of the expandable element |
4 | style="text-align:left" | Anything supported by CSS backgrounds (except background images) | Controls the style of the background once it's expanded |
Miscellaneous[]
This section includes a list of things that are important for you to know how to use and interact with that don't fit well into another section. Topics vary from basic to advanced.
The Team Template[]
In section 2, we went over how to link a team. However, there are several modifiers you can use, and we will go over them here. You may also find full documentation on the team template and how to use it here.
Pulling Rosters from One Place to Another[]
When you read about Templates in the next part, you'll learn why this works, but for now just recognize that it does. We'll use Team Fusion's initial roster as an example:
Code | Result | ||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{|class="sortable wikitable" ! !ID !Name !Role <onlyinclude>{{listplayer|MakNooN|kr|Yoon Ha-woon (윤하운)|Top|{{{1}}} }} {{listplayer|NintendudeX|us|Joshua Atkins|Jungle|{{{1}}} }} {{listplayer|Huhi|kr|Choi Jae-Hyun (최재현)|Mid|{{{1}}} }} {{listplayer|Nientonsoh|us|Zachary Malhas|AD|{{{1}}} }} {{listplayer|Gleeb|us|Nicolas Haddad|Support|{{{1}}} }} {{listplayer|Bee Sin|us|Keaton Cryer|Sub|{{{1}}} }} {{listplayer|Chunkyfresh|us|Josh Kesrawani|Sub|{{{1}}} }}</onlyinclude> |} |
|
The important thing to notice here is <onlyinclude> and </onlyinclude>. What these tags do is allow you to type
{|class="sortable wikitable" ! !ID !Name !Role {{:Team Fusion}} |}
on another page and generate the same table. Just be aware of those tags and this capability, and when you read about templates you'll understand why it works - and be able to apply it in other situations, too.
Template:CommunityNavbox