Difference between revisions of "Template:PC Panels"

From From The Ashes Wiki
Jump to: navigation, search
Line 41: Line 41:
 
#panels.side {
 
#panels.side {
 
     flex-flow: column wrap;
 
     flex-flow: column wrap;
     height: {{{height|600px}}};
+
     height: {{{height|500px}}};
 
     justify-content: flex-start;
 
     justify-content: flex-start;
 +
    padding: 1em 0;
 
}
 
}
 
#panels.side .panel {
 
#panels.side .panel {
     min-height: {{{height|600px}}};
+
     min-height: 100%;
 
}
 
}
 
.tab {
 
.tab {
Line 107: Line 108:
 
| text          = text colour
 
| text          = text colour
 
| links        = link colour
 
| links        = link colour
| height        = how tall you want your box to be if using 'side' menu (default 600px)
+
| height        = how tall you want your box to be if using 'side' menu (default 500px)
 
| --- Content ---
 
| --- Content ---
 
| tab_1        = name of tab (i.e., Something)
 
| tab_1        = name of tab (i.e., Something)

Revision as of 00:21, 18 March 2018

Usage

{{PC Panels
| --- Appearance ---
| menu          = top or side
| background    = page colour (#ff0000, red, etc.)
| text          = text colour
| links         = link 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.