Difference between revisions of "Template:PC Panels"

From From The Ashes Wiki
Jump to: navigation, search
m
m
 
(9 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 113: Line 116:
 
}
 
}
 
#panels.side .tab {
 
#panels.side .tab {
     margin: .75em 0;
+
     margin: .5em 0;
 
     padding-top: 0;
 
     padding-top: 0;
 
}
 
}
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:
  
# 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.
+
# 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.
 
# 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.
+
# 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.)
  
 
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.