Difference between revisions of "Template:PC Panels"

From From The Ashes Wiki
Jump to: navigation, search
Line 38: Line 38:
 
     flex-flow: row wrap;
 
     flex-flow: row wrap;
 
     justify-content: center;
 
     justify-content: center;
 +
}
 +
#panels.side {
 +
    flex-flow: column wrap;
 +
    height: {{{height|600px}}};
 +
    justify-content: flex-start;
 +
}
 +
#panels.side .panel {
 +
    min-height: {{{height|600px}}};
 
}
 
}
 
.tab {
 
.tab {
Line 44: Line 52:
 
     order: 1;
 
     order: 1;
 
     padding-top: 4em;
 
     padding-top: 4em;
}
 
.side .tab {
 
    justify-self: flex-start;
 
    align-self: flex-start;
 
 
}
 
}
 
.tab_1 {
 
.tab_1 {
Line 103: Line 107:
 
| 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)
 
| --- Content ---
 
| --- Content ---
 
| tab_1        = name of tab (i.e., Something)
 
| tab_1        = name of tab (i.e., Something)

Revision as of 01:17, 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 600px)
| --- 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.