Difference between revisions of "Template:PC Panels"
From From The Ashes Wiki
| Line 6: | Line 6: | ||
body > *, | body > *, | ||
#mw-navigation > * { | #mw-navigation > * { | ||
| − | background-color: {{{ | + | background-color: {{{page_background|inherit}}}; |
| − | color: {{{ | + | color: {{{page_text|inherit}}}; |
} | } | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
| − | color: {{{ | + | color: {{{page_text|inherit}}}; |
} | } | ||
div.vectorTabs, | div.vectorTabs, | ||
| Line 34: | Line 34: | ||
} | } | ||
} | } | ||
| + | #banner { | ||
| + | text-align: center; | ||
| + | width: 100%; | ||
| + | } | ||
#panels { | #panels { | ||
display: flex; | display: flex; | ||
| Line 39: | Line 43: | ||
justify-content: center; | justify-content: center; | ||
align-content: flex-start; | align-content: flex-start; | ||
| − | border: 3px solid {{{border|{{{ | + | border: 3px solid {{{border|{{{page_text|black}}}}}}; |
height: {{{height|500px}}}; | height: {{{height|500px}}}; | ||
| − | } | + | background-color: {{{box_background|inherit}}} |
| − | + | color: {{{box_text|inherit}}} | |
| − | |||
} | } | ||
#panels.side { | #panels.side { | ||
| Line 58: | Line 61: | ||
#panels.side .panel { | #panels.side .panel { | ||
min-height: 100%; | min-height: 100%; | ||
| − | border-left: 3px solid {{{border|{{{ | + | border-left: 3px solid {{{border|{{{page_text|black}}}}}}; |
padding: 1em 1.5em; | padding: 1em 1.5em; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
#panels.top .panel { | #panels.top .panel { | ||
| − | border-top: 3px solid {{{border|{{{ | + | border-top: 3px solid {{{border|{{{page_text|black}}}}}}; |
padding: 1em; | padding: 1em; | ||
} | } | ||
| Line 105: | Line 108: | ||
} | } | ||
}} | }} | ||
| − | <div id="panels" class={{{menu|top}}}>{{#forargs: tab_ | + | <div id="panels" class={{{menu|top}}}> |
| + | {{#ifeq:{{{banner}}}|off||<div id="banner">{{{banner|PAGENAME}}}</div>}}} | ||
| + | {{#forargs: tab_ | ||
| key | | key | ||
| value | | value | ||
| Line 122: | Line 127: | ||
<pre>{{PC Panels | <pre>{{PC Panels | ||
| --- Appearance --- | | --- Appearance --- | ||
| − | | menu | + | | menu = top or side |
| − | | | + | | page_background = full page colour (#ff0000, red, etc.) |
| − | | text = text colour | + | | box_background = colour of the panels box |
| − | | links | + | | box_text = colour of text in the panels box |
| − | | border | + | | page_text = text colour for full page |
| − | | height | + | | links = link colour |
| − | + | | border = border colour | |
| + | | banner = image link, text, or off | ||
| + | | height = how tall you want your box to be (default 500px). | ||
| + | If using 'side' menu, must be tall enough to hold all tab names! | ||
| --- Content --- | | --- Content --- | ||
| − | | tab_1 | + | | tab_1 = name of tab (i.e., Something) |
| − | | content_1 | + | | content_1 = contents of panel (i.e., Here's some content about something.) |
| − | | tab_2 | + | | tab_2 = name of tab (i.e., Another Thing) |
| − | | content_2 | + | | content_2 = contents of panel (i.e., Content about this other thing.) |
[...] | [...] | ||
| − | | tab_N | + | | tab_N = name of tab (i.e., Something Else) |
| − | | content_N | + | | content_N = contents of panel (i.e., Some information for this last thing too.) |
}}</pre> | }}</pre> | ||
Revision as of 02:13, 18 March 2018
Usage
{{PC Panels
| --- Appearance ---
| menu = top or side
| page_background = full page colour (#ff0000, red, etc.)
| box_background = colour of the panels box
| box_text = colour of text in the panels box
| page_text = text colour for full page
| links = link colour
| border = border colour
| banner = image link, text, or off
| height = how tall you want your box to be (default 500px).
If using 'side' menu, must be tall enough to hold all tab names!
| --- Content ---
| tab_1 = name of tab (i.e., Something)
| content_1 = contents of panel (i.e., Here's some content about something.)
| tab_2 = name of tab (i.e., Another Thing)
| content_2 = contents of panel (i.e., Content about this other thing.)
[...]
| tab_N = name of tab (i.e., Something Else)
| content_N = contents of panel (i.e., Some information for this last thing too.)
}}
You can have as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste. contents_# can be as complicated as you like, as long as nothing is left open.
The appearance can be adjusted more by writing custom css.
