Difference between revisions of "Template:PC Panels"

From From The Ashes Wiki
Jump to: navigation, search
Line 76: Line 76:
 
     overflow-y: auto;
 
     overflow-y: auto;
 
     overflow-x: hidden;
 
     overflow-x: hidden;
 +
    display: table;
 
}
 
}
 
.panel {
 
.panel {
Line 83: Line 84:
 
}
 
}
 
#panels.side .panel {
 
#panels.side .panel {
     min-height: 100%;
+
     max-height: {{{height|500px}}};
 +
    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;
Line 99: Line 101:
 
     margin-top: 0;
 
     margin-top: 0;
 
     padding-top: 0;
 
     padding-top: 0;
 +
    display: table;
 
}
 
}
 
#panels.side .tab_1 {
 
#panels.side .tab_1 {
    margin-top: 1em;
+
  // margin-top: 1em;
 
}
 
}
 
.tab_1 {
 
.tab_1 {

Revision as of 06:04, 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.