Difference between revisions of "Template:PC Panels"
From From The Ashes Wiki
| Line 38: | Line 38: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
| + | align-content: flex-start; | ||
border: 3px solid {{{border|{{{text|black}}}}}}; | border: 3px solid {{{border|{{{text|black}}}}}}; | ||
height: {{{height|500px}}}; | height: {{{height|500px}}}; | ||
| Line 47: | Line 48: | ||
flex-flow: column wrap; | flex-flow: column wrap; | ||
justify-content: flex-start; | justify-content: flex-start; | ||
| − | |||
overflow-y: auto; | overflow-y: auto; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
| + | } | ||
| + | .panel { | ||
| + | display: none; | ||
| + | order: 2; | ||
| + | width: 100%; | ||
} | } | ||
#panels.side .panel { | #panels.side .panel { | ||
| Line 56: | Line 61: | ||
padding: 1em 1.5em; | padding: 1em 1.5em; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| + | } | ||
| + | #panels.top .panel { | ||
| + | border-top: 3px solid {{{border|{{{text|black}}}}}}; | ||
| + | padding-top: 1em; | ||
} | } | ||
.tab { | .tab { | ||
| Line 82: | Line 91: | ||
.tab_1.tab a, .anchor:target + .tab a { | .tab_1.tab a, .anchor:target + .tab a { | ||
opacity: 1; | opacity: 1; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
#tab_1-panel { | #tab_1-panel { | ||
Revision as of 00:56, 18 March 2018
Usage
{{PC Panels
| --- Appearance ---
| menu = top or side
| background = page colour (#ff0000, red, etc.)
| text = text colour
| links = link colour
| border = border colour
| height = how tall you want your box to be if using 'side' menu (default 500px)
| --- 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.
