Difference between revisions of "Template:PC Panels"
From From The Ashes Wiki
m |
|||
| Line 72: | Line 72: | ||
} | } | ||
#panels.side { | #panels.side { | ||
| − | + | /* flex-flow: column wrap; | |
justify-content: flex-start; | justify-content: flex-start; | ||
overflow-y: auto; | overflow-y: auto; | ||
| − | overflow-x: hidden; | + | overflow-x: hidden; */ |
| − | display: | + | display: grid; |
} | } | ||
.panel { | .panel { | ||
| Line 87: | Line 87: | ||
overflow-y: auto; | overflow-y: auto; | ||
border-left: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}}; | border-left: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}}; | ||
| − | padding: 1em 1.5em; | + | padding: 1em 1.5em; |
| + | grid-column-start: 2; | ||
| + | grid-column-end: 3; | ||
| + | grid-row-start: 1; | ||
| + | grid-row-end: -1; | ||
} | } | ||
#panels.top .panel { | #panels.top .panel { | ||
| Line 104: | Line 108: | ||
} | } | ||
.tab_1 { | .tab_1 { | ||
| − | + | order: 0; | |
| + | } | ||
| + | {{#forargs: tab_ | ||
| + | | key | ||
| + | | value | ||
| + | | .tab_{{#var: key}} { | ||
| + | grid-column-start: 1; | ||
| + | grid-column-end: 2; | ||
| + | grid-row-start: {{#var: key}}; | ||
| + | grid-row-end: {{#expr:{{#var: key}}+1}}; | ||
} | } | ||
| + | }} | ||
.tab a, *:target ~ .tab_1.tab a { | .tab a, *:target ~ .tab_1.tab a { | ||
border-bottom: medium none; | border-bottom: medium none; | ||
Revision as of 17:05, 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.
