Difference between revisions of "Template:PC Panels"

From From The Ashes Wiki
Jump to: navigation, search
m
 
(7 intermediate revisions by the same user not shown)
Line 44: Line 44:
 
     border: {{{border_width|6px}}} {{{border_style|solid}}} {{{border|{{{page_text|black}}}}}};
 
     border: {{{border_width|6px}}} {{{border_style|solid}}} {{{border|{{{page_text|black}}}}}};
 
     border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}};
 
     border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}};
     background-color: {{{box_background|}}};
+
     background-color: {{{box_background|white}}};
 
     color: {{{box_text|}}};
 
     color: {{{box_text|}}};
 
     margin: 0 auto 1em;
 
     margin: 0 auto 1em;
Line 51: Line 51:
 
}
 
}
 
#banner {
 
#banner {
     background-color: {{{banner_background|{{{border|}}}}}};
+
     background-color: {{{banner_background|{{{border|black}}}}}};
 
     color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}};
 
     color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}};
 
     font-size: 2.5em;
 
     font-size: 2.5em;
Line 66: Line 66:
 
     grid-row: 1/2;
 
     grid-row: 1/2;
 
     grid-column: 1/2;
 
     grid-column: 1/2;
     margin: .5em;
+
     margin: .5em .5em 0;
 
     border: 1px solid {{{border|black}}};
 
     border: 1px solid {{{border|black}}};
 +
}
 +
#panels.top div#portrait {
 +
    display: none;
 
}
 
}
 
#panels {
 
#panels {
Line 120: Line 123:
 
}
 
}
 
#panels.side .tab_1.tab {
 
#panels.side .tab_1.tab {
     margin-top: 1.25em;
+
     margin-top: 1.5em;
 
}
 
}
 
{{#vardefine:i|0}}
 
{{#vardefine:i|0}}
Line 148: Line 151:
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
#tab_1-panel {
+
#content_1 {
 
     display: block;
 
     display: block;
 
}
 
}
:target ~ #tab_1-panel, .anchor {
+
:target ~ #content_1, .anchor {
 
     display: none;
 
     display: none;
 
}
 
}
Line 157: Line 160:
 
  | key
 
  | key
 
  | value
 
  | value
  | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #tab_{{#var: key}}-panel|.tab_1:target ~ #tab_1-panel}}
+
  | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #content_{{#var: key}}|.tab_1:target ~ #content_1}}
 
}}{
 
}}{
 
     display: block;
 
     display: block;
Line 185: Line 188:
 
  | key
 
  | key
 
  | value
 
  | value
  | <div id="tab_{{#var: key}}-panel" class="panel">&#32;
+
  | <div id="content_{{#var: key}}" class="panel">&#32;
 
{{{content_{{#var: key}}}}}</div>
 
{{{content_{{#var: key}}}}}</div>
 
}}
 
}}
Line 207: Line 210:
 
| banner_background  = colour of the banner's background
 
| banner_background  = colour of the banner's background
 
| banner_text        = colour of the banner's text
 
| banner_text        = colour of the banner's text
| portrait          = image link or off (if left out completely, will try to guess an image)
+
| portrait          = image link or off (side menu only. if left out completely, will try to guess an image.)
 
| footer            = what you want in your footer, if you want one
 
| footer            = what you want in your footer, if you want one
 
| expand            = stretch or scroll
 
| expand            = stretch or scroll
 
| height            = how tall you want your box to be (default 500px) if using 'scroll'  
 
| height            = how tall you want your box to be (default 500px) if using 'scroll'  
                       Must be tall enough to hold all tab names!
+
                       Must be tall enough to hold all tab names if using side menu!
 
| --- Content ---
 
| --- Content ---
 
| tab_1              = name of tab (i.e., Something)
 
| tab_1              = name of tab (i.e., Something)
Line 226: Line 229:
 
content_# can be as complicated as you like, as long as nothing is left open &mdash; with one major exception. Wiki table markup will not work in this template.  If you want a table in one section, you have three options:
 
content_# can be as complicated as you like, as long as nothing is left open &mdash; with one major exception. Wiki table markup will not work in this template.  If you want a table in one section, you have three options:
  
 +
# Use [[Template:Table]] &mdash; instructions on that page, but it's fairly simple.
 +
# Use html; i.e., <nowiki><table><tr><td>First Cell</td><td>Second Cell</td></tr></table></nowiki>, etc.
 
# In the content slot you want, call a subpage, such as <nowiki>{{:{{PAGENAME}}/Contacts}}</nowiki> &mdash; you can put a wiki-markup table in that subpage and it will work fine. (n.b.: <nowiki>{{PAGENAME}}</nowiki> there is not a placeholder.)
 
# In the content slot you want, call a subpage, such as <nowiki>{{:{{PAGENAME}}/Contacts}}</nowiki> &mdash; you can put a wiki-markup table in that subpage and it will work fine. (n.b.: <nowiki>{{PAGENAME}}</nowiki> there is not a placeholder.)
# Use html; i.e., <nowiki><table><tr><td>First Cell</td><td>Second Cell</td></tr></table></nowiki>, etc.
 
# Use [[Template:Table]] &mdash; instructions on that page, but it's fairly simple.
 
  
 
The appearance of nearly everything can be adjusted further by writing custom css.
 
The appearance of nearly everything can be adjusted further by writing custom css.
 
[[Category: Template]]
 
[[Category: Template]]
 
</noinclude>
 
</noinclude>

Latest revision as of 21:24, 19 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
| portrait           = image link or off (side menu only. if left out completely, will try to guess an image.)
| footer             = what you want in your footer, if you want one
| expand             = stretch or scroll
| height             = how tall you want your box to be (default 500px) if using 'scroll' 
                       Must be tall enough to hold all tab names if using side menu!
| --- 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.

content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options:

  1. Use Template:Table — instructions on that page, but it's fairly simple.
  2. Use html; i.e., <table><tr><td>First Cell</td><td>Second Cell</td></tr></table>, etc.
  3. In the content slot you want, call a subpage, such as {{:{{PAGENAME}}/Contacts}} — you can put a wiki-markup table in that subpage and it will work fine. (n.b.: {{PAGENAME}} there is not a placeholder.)

The appearance of nearly everything can be adjusted further by writing custom css.