Difference between revisions of "Template:PC Panels"
From From The Ashes Wiki
m |
|||
| (17 intermediate revisions by the same user not shown) | |||
| Line 44: | Line 44: | ||
border: {{{border_width|6px}}} {{{border_style|solid}}} {{{border|{{{page_text|black}}}}}}; | border: {{{border_width|6px}}} {{{border_style|solid}}} {{{border|{{{page_text|black}}}}}}; | ||
border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}}; | border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}}; | ||
| − | background-color: {{{box_background|}}}; | + | background-color: {{{box_background|white}}}; |
color: {{{box_text|}}}; | color: {{{box_text|}}}; | ||
margin: 0 auto 1em; | margin: 0 auto 1em; | ||
| Line 51: | Line 51: | ||
} | } | ||
#banner { | #banner { | ||
| − | background-color: {{{banner_background|{{{border|}}}}}}; | + | background-color: {{{banner_background|{{{border|black}}}}}}; |
color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}}; | color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}}; | ||
font-size: 2.5em; | font-size: 2.5em; | ||
| Line 66: | Line 66: | ||
grid-row: 1/2; | grid-row: 1/2; | ||
grid-column: 1/2; | grid-column: 1/2; | ||
| − | margin: .5em; | + | margin: .5em .5em 0; |
border: 1px solid {{{border|black}}}; | border: 1px solid {{{border|black}}}; | ||
| + | } | ||
| + | #panels.top div#portrait { | ||
| + | display: none; | ||
} | } | ||
#panels { | #panels { | ||
| Line 113: | Line 116: | ||
} | } | ||
#panels.side .tab { | #panels.side .tab { | ||
| − | margin | + | margin: .5em 0; |
padding-top: 0; | padding-top: 0; | ||
} | } | ||
.tab_1 { | .tab_1 { | ||
order: -1; | order: -1; | ||
| + | } | ||
| + | #panels.side .tab_1.tab { | ||
| + | margin-top: 1.5em; | ||
| + | } | ||
| + | {{#vardefine:i|0}} | ||
| + | #panels.side .tab_{{#forargs: tab_ | ||
| + | | key | ||
| + | | value | ||
| + | | {{#vardefine:i|{{#expr:{{#var:i}}+1}}}} | ||
| + | }}{{#var:i}}.tab { | ||
| + | margin-bottom: 1.5em; | ||
} | } | ||
{{#forargs: tab_ | {{#forargs: tab_ | ||
| Line 124: | Line 138: | ||
| .tab_{{#var: key}} { | | .tab_{{#var: key}} { | ||
grid-column: 1/2; | grid-column: 1/2; | ||
| − | grid-row: {{#var: key}}{{#ifeq:{{{portrait|}}}|off||+1}}/{{#expr:{{#var: key}}+{{#ifeq:{{{portrait|}}}|off|1|2}}}}; | + | grid-row: {{#expr:{{#var: key}}{{#ifeq:{{{portrait|}}}|off||+1}}}}/{{#expr:{{#var: key}}+{{#ifeq:{{{portrait|}}}|off|1|2}}}}; |
} | } | ||
}} | }} | ||
| Line 137: | Line 151: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| − | # | + | #content_1 { |
display: block; | display: block; | ||
} | } | ||
| − | :target ~ # | + | :target ~ #content_1, .anchor { |
display: none; | display: none; | ||
} | } | ||
| Line 146: | Line 160: | ||
| key | | key | ||
| value | | value | ||
| − | | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ # | + | | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #content_{{#var: key}}|.tab_1:target ~ #content_1}} |
}}{ | }}{ | ||
display: block; | display: block; | ||
| + | } | ||
| + | #foot { | ||
| + | border-top: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}}; | ||
| + | display: flex; | ||
| + | flex-flow: row; | ||
| + | width: 100%; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
} | } | ||
}} | }} | ||
| Line 166: | Line 188: | ||
| key | | key | ||
| value | | value | ||
| − | | <div id=" | + | | <div id="content_{{#var: key}}" class="panel">  |
{{{content_{{#var: key}}}}}</div> | {{{content_{{#var: key}}}}}</div> | ||
}} | }} | ||
| − | </div></div></includeonly><noinclude> | + | </div>{{#if:{{{footer|}}}|<div id="foot">{{{footer}}}</div>}}</div></includeonly><noinclude> |
===Usage=== | ===Usage=== | ||
<pre>{{PC Panels | <pre>{{PC Panels | ||
| Line 188: | Line 210: | ||
| banner_background = colour of the banner's background | | banner_background = colour of the banner's background | ||
| banner_text = colour of the banner's text | | banner_text = colour of the banner's text | ||
| − | | portrait = image link or off (if left out completely, will try to guess an image) | + | | portrait = image link or off (side menu only. if left out completely, will try to guess an image.) |
| + | | footer = what you want in your footer, if you want one | ||
| expand = stretch or scroll | | expand = stretch or scroll | ||
| height = how tall you want your box to be (default 500px) if using 'scroll' | | height = how tall you want your box to be (default 500px) if using 'scroll' | ||
| − | Must be tall enough to hold all tab names! | + | Must be tall enough to hold all tab names if using side menu! |
| --- Content --- | | --- Content --- | ||
| tab_1 = name of tab (i.e., Something) | | tab_1 = name of tab (i.e., Something) | ||
| Line 206: | Line 229: | ||
content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options: | content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options: | ||
| − | # | + | # Use [[Template:Table]] — instructions on that page, but it's fairly simple. |
# Use html; i.e., <nowiki><table><tr><td>First Cell</td><td>Second Cell</td></tr></table></nowiki>, etc. | # Use html; i.e., <nowiki><table><tr><td>First Cell</td><td>Second Cell</td></tr></table></nowiki>, etc. | ||
| − | # | + | # In the content slot you want, call a subpage, such as <nowiki>{{:{{PAGENAME}}/Contacts}}</nowiki> — you can put a wiki-markup table in that subpage and it will work fine. (n.b.: <nowiki>{{PAGENAME}}</nowiki> there is not a placeholder.) |
The appearance of nearly everything can be adjusted further by writing custom css. | The appearance of nearly everything can be adjusted further by writing custom css. | ||
[[Category: Template]] | [[Category: Template]] | ||
</noinclude> | </noinclude> | ||
Latest revision as of 22:24, 19 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
| portrait = image link or off (side menu only. if left out completely, will try to guess an image.)
| footer = what you want in your footer, if you want one
| expand = stretch or scroll
| height = how tall you want your box to be (default 500px) if using 'scroll'
Must be tall enough to hold all tab names if using side menu!
| --- 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.
content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options:
- Use Template:Table — instructions on that page, but it's fairly simple.
- Use html; i.e., <table><tr><td>First Cell</td><td>Second Cell</td></tr></table>, etc.
- In the content slot you want, call a subpage, such as {{:{{PAGENAME}}/Contacts}} — you can put a wiki-markup table in that subpage and it will work fine. (n.b.: {{PAGENAME}} there is not a placeholder.)
The appearance of nearly everything can be adjusted further by writing custom css.
