Difference between revisions of "Template:PC Panels"
From From The Ashes Wiki
| Line 41: | Line 41: | ||
} | } | ||
} | } | ||
| + | #wrapper { | ||
| + | border: 3px solid {{{border|{{{page_text|black}}}}}}; | ||
| + | border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}}; | ||
| + | margin: 0 auto 1em; | ||
| + | max-width: 1000px; | ||
| + | overflow: hidden; | ||
| + | } | ||
#banner { | #banner { | ||
background-color: {{{banner_background|{{{border|}}}}}}; | background-color: {{{banner_background|{{{border|}}}}}}; | ||
| − | |||
| − | |||
| − | |||
color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}}; | color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}}; | ||
font-size: 2.5em; | font-size: 2.5em; | ||
font-weight: bold; | font-weight: bold; | ||
| − | |||
| − | |||
| − | |||
text-align: center; | text-align: center; | ||
width: 100%; | width: 100%; | ||
| Line 60: | Line 61: | ||
} | } | ||
#panels { | #panels { | ||
| − | |||
display: flex; | display: flex; | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
align-content: flex-start; | align-content: flex-start; | ||
| − | |||
border-top-width: {{#ifeq:{{{banner|}}}|off|3px|2px}}; | border-top-width: {{#ifeq:{{{banner|}}}|off|3px|2px}}; | ||
| − | |||
height: {{{height|500px}}}; | height: {{{height|500px}}}; | ||
background-color: {{{box_background|}}}; | background-color: {{{box_background|}}}; | ||
color: {{{box_text|}}}; | color: {{{box_text|}}}; | ||
| − | + | width: 100%; | |
} | } | ||
#panels.side { | #panels.side { | ||
| Line 132: | Line 130: | ||
} | } | ||
}} | }} | ||
| + | <div id="wrapper"> | ||
{{#ifeq:{{{banner}}}|off||<div id="banner">{{{banner|{{PAGENAME}}}}}</div>}} | {{#ifeq:{{{banner}}}|off||<div id="banner">{{{banner|{{PAGENAME}}}}}</div>}} | ||
<div id="panels" class={{{menu|top}}}> | <div id="panels" class={{{menu|top}}}> | ||
| Line 147: | Line 146: | ||
| <div id="tab_{{#var: key}}-panel" class="panel">{{{content_{{#var: key}}}}}</div> | | <div id="tab_{{#var: key}}-panel" class="panel">{{{content_{{#var: key}}}}}</div> | ||
}} | }} | ||
| − | </div></includeonly><noinclude> | + | </div></div></includeonly><noinclude> |
===Usage=== | ===Usage=== | ||
<pre>{{PC Panels | <pre>{{PC Panels | ||
| Line 159: | Line 158: | ||
| box_links = links within the panels box | | box_links = links within the panels box | ||
| border = border colour | | border = border colour | ||
| + | | border_width = how thick the outer border is | ||
| + | | border_style = solid, dotted, dashed, double, groove, ridge, inset, outset, or none | ||
| + | | corners = hard (90 degree) or soft (rounded) | ||
| + | | inner_border = style for the inner lines — see border_style | ||
| banner = image link, text, or off | | banner = image link, text, or off | ||
| banner_background = colour of the banner's background | | banner_background = colour of the banner's background | ||
| Line 176: | Line 179: | ||
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. | 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 | + | The appearance can be adjusted further by writing custom css. |
[[Category: Template]] | [[Category: Template]] | ||
</noinclude> | </noinclude> | ||
Revision as of 03:57, 18 March 2018
Usage
{{PC Panels
| --- Appearance ---
| menu = top or side
| page_background = full page colour (#ff0000, red, etc.)
| page_text = text colour for full page
| page_links = link colour
| box_background = colour of the panels box
| box_text = colour of text in the panels box
| box_links = links within the panels box
| border = border colour
| border_width = how thick the outer border is
| border_style = solid, dotted, dashed, double, groove, ridge, inset, outset, or none
| corners = hard (90 degree) or soft (rounded)
| inner_border = style for the inner lines — see border_style
| banner = image link, text, or off
| banner_background = colour of the banner's background
| banner_text = colour of the banner's text
| 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 further by writing custom css.
