Difference between revisions of "Template:PC 1"

From City of Hope MUSH
Jump to navigation Jump to search
imported>Felix
(Created page with "<noinclude>This is a character page template, with various options. {{#css: td, th { vertical-align: top; padding: 5px; } td:nth-of-type(2n-1) { white-space: nowra...")
 
(removing automatic category)
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
<noinclude>This is a character page template, with various options.
+
<includeonly>{{#css:Template:PC_1/PC_1.css}}{{#css:
 +
.outer {
 +
border: 2px solid {{{colour-border|black}}};
 +
background-color: {{{colour-background|white}}};
 +
color: {{{colour-text|black}}}
 +
}
 +
#left {
 +
border-right: 1px dotted {{{colour-border|black}}};
 +
}
 +
#header {
 +
background-color: {{{colour-border|black}}};
 +
border-bottom: 2px solid {{{colour-links|#666}}};
 +
color: {{{colour-headers|#CCC}}};
 +
}
 +
#contents {
 +
color: {{{colour-border|black}}};
 +
background-color: {{{colour-headers|#CCC}}};
 +
}
 +
.header {
 +
border-top: 1px solid {{{colour-border|black}}};
 +
border-bottom: 1px dotted {{{colour-border|black}}};
 +
background-color: {{{colour-headers|#CCC}}};
 +
}
 +
#mainimg, #altimg {
 +
border-top: 1px solid {{{colour-border|black}}};
 +
}
 +
#mainimg img, #altimg img {
 +
border: 1px solid {{{colour-links|#666}}};
 +
}
 +
a {
 +
color: {{{colour-links|#666}}} !important;
 +
}
 +
{{#ifeq:{{lc:{{{small-side}}} }}|right|
 +
#left {
 +
width: unset;
 +
flex: 1;
 +
min-width: 260px;
 +
}
 +
#right {
 +
flex: 0 1 260px;
 +
min-width: unset;
 +
width: 260px;
 +
}
 +
@media only screen and (max-width: 730px) {
 +
#right {
 +
min-width: 100%;
 +
order: 1;
 +
}
 +
#left {
 +
order: 2;
 +
}
 +
}
 +
| }}
 +
}}
 +
<div class="outer">
 +
<div id="header">{{{header-data|{{PAGENAME}}}}}</div>
 +
<div id="contents">{{#if:{{{left-1-header|}}}|*[[#{{{left-1-header}}}|{{{left-1-header}}}]]|}}{{#if:{{{right-1-header|}}}|*[[#{{{right-1-header}}}|{{{right-1-header}}}]]|}}{{#if:{{{left-2-header|}}}|*[[#{{{left-2-header}}}|{{{left-2-header}}}]]|}}{{#if:{{{right-2-header|}}}|*[[#{{{right-2-header}}}|{{{right-2-header}}}]]|}}{{#if:{{{left-3-header|}}}|*[[#{{{left-3-header}}}|{{{left-3-header}}}]]|}}{{#if:{{{right-3-header|}}}|*[[#{{{right-3-header}}}|{{{right-3-header}}}]]|}}{{#if:{{{left-4-header|}}}|*[[#{{{left-4-header}}}|{{{left-4-header}}}]]|}}{{#if:{{{right-4-header|}}}|*[[#{{{right-4-header}}}|{{{right-4-header}}}]]|}}{{#if:{{{left-5-header|}}}|*[[#{{{left-5-header}}}|{{{left-5-header}}}]]|}}{{#if:{{{right-5-header|}}}|*[[#{{{right-5-header}}}|{{{right-5-header}}}]]|}}{{#if:{{{left-6-header|}}}|*[[#{{{left-6-header}}}|{{{left-6-header}}}]]|}}{{#if:{{{right-6-header|}}}|*[[#{{{right-6-header}}}|{{{right-6-header}}}]]|}}{{#if:{{{left-7-header|}}}|*[[#{{{left-7-header}}}|{{{left-7-header}}}]]|}}{{#if:{{{right-7-header|}}}|*[[#{{{right-7-header}}}|{{{right-7-header}}}]]|}}{{#if:{{{left-8-header|}}}|*[[#{{{left-8-header}}}|{{{left-8-header}}}]]|}}{{#if:{{{right-8-header|}}}|*[[#{{{right-8-header}}}|{{{right-8-header}}}]]|}}{{#if:{{{left-9-header|}}}|*[[#{{{left-9-header}}}|{{{left-9-header}}}]]|}}{{#if:{{{right-9-header|}}}|*[[#{{{right-9-header}}}|{{{right-9-header}}}]]|}}</div>
 +
<div id="left">
 +
{{#ifexpr: {{#if:{{{image-main|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|0|1}}|<div id="mainimg" class="data">[[File:{{{image-main}}}|240px|border]]</div>|}}{{#if:{{{left-1-header|}}}|<div class="header" id="{{{left-1-header}}}">{{{left-1-header}}}</div>
 +
<div id="left-1" class="data">{{{left-1-data}}}</div>|}}{{#if:{{{left-2-header|}}}|<div class="header" id="{{{left-2-header}}}">{{{left-2-header}}}</div>
 +
<div id="left-2" class="data">{{{left-2-data}}}</div>|}}{{#if:{{{left-3-header|}}}|<div class="header" id="{{{left-3-header}}}">{{{left-3-header}}}</div>
 +
<div id="left-3" class="data">{{{left-3-data}}}</div>|}}{{#if:{{{left-4-header|}}}|<div class="header" id="{{{left-4-header}}}">{{{left-4-header}}}</div>
 +
<div id="left-4" class="data">{{{left-4-data}}}</div>|}}{{#if:{{{left-5-header|}}}|<div class="header" id="{{{left-5-header}}}">{{{left-5-header}}}</div>
 +
<div id="left-5" class="data">{{{left-5-data}}}</div>|}}{{#if:{{{left-6-header|}}}|<div class="header" id="{{{left-6-header}}}">{{{left-6-header}}}</div>
 +
<div id="left-6" class="data">{{{left-6-data}}}</div>|}}{{#if:{{{left-7-header|}}}|<div class="header" id="{{{left-7-header}}}">{{{left-7-header}}}</div>
 +
<div id="left-7" class="data">{{{left-7-data}}}</div>|}}{{#if:{{{left-8-header|}}}|<div class="header" id="{{{left-8-header}}}">{{{left-8-header}}}</div>
 +
<div id="left-8" class="data">{{{left-8-data}}}</div>|}}{{#if:{{{left-9-header|}}}|<div class="header" id="{{{left-9-header}}}">{{{left-9-header}}}</div>
 +
<div id="left-9" class="data">{{{left-9-data}}}</div>|}}{{#ifexpr: {{#if:{{{image-alt|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|0|1}}|<div id="altimg" class="data">[[File:{{{image-alt}}}|240px|border]]</div>|}}
 +
</div>
 +
<div id="right">
 +
{{#ifexpr: {{#if:{{{image-main|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|1|0}}|<div id="mainimg" class="data">[[File:{{{image-main}}}|240px|border]]</div>|}}{{#if:{{{right-1-header|}}}|<div class="header" id="{{{right-1-header}}}">{{{right-1-header}}}</div>
 +
<div id="right-1" class="data">{{{right-1-data}}}</div>|}}{{#if:{{{right-2-header|}}}|<div class="header" id="{{{right-2-header}}}">{{{right-2-header}}}</div>
 +
<div id="right-2" class="data">{{{right-2-data}}}</div>|}}{{#if:{{{right-3-header|}}}|<div class="header" id="{{{right-3-header}}}">{{{right-3-header}}}</div>
 +
<div id="right-3" class="data">{{{right-3-data}}}</div>|}}{{#if:{{{right-4-header|}}}|<div class="header" id="{{{right-4-header}}}">{{{right-4-header}}}</div>
 +
<div id="right-4" class="data">{{{right-4-data}}}</div>|}}{{#if:{{{right-5-header|}}}|<div class="header" id="{{{right-5-header}}}">{{{right-5-header}}}</div>
 +
<div id="right-5" class="data">{{{right-5-data}}}</div>|}}{{#if:{{{right-6-header|}}}|<div class="header" id="{{{right-6-header}}}">{{{right-6-header}}}</div>
 +
<div id="right-6" class="data">{{{right-6-data}}}</div>|}}{{#if:{{{right-7-header|}}}|<div class="header" id="{{{right-7-header}}}">{{{right-7-header}}}</div>
 +
<div id="right-7" class="data">{{{right-7-data}}}</div>|}}{{#if:{{{right-8-header|}}}|<div class="header" id="{{{right-8-header}}}">{{{right-8-header}}}</div>
 +
<div id="right-8" class="data">{{{right-8-data}}}</div>|}}{{#if:{{{right-9-header|}}}|<div class="header" id="{{{right-9-header}}}">{{{right-9-header}}}</div>
 +
<div id="right-9" class="data">{{{right-9-data}}}</div>|}}{{#ifexpr: {{#if:{{{image-alt|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|1|0}}|<div id="altimg" class="data">[[File:{{{image-alt}}}|240px|border]]</div>|}}
 +
</div>
 +
</div>
 +
</includeonly><noinclude>This is a character page template, with various options.
 
{{#css:
 
{{#css:
 
td, th {
 
td, th {
Line 39: Line 121:
 
| Sets the colour for the section headers.
 
| Sets the colour for the section headers.
 
|-
 
|-
| cclour-links
+
| colour-links
 
| Any web colour name, hex colour, or rgb()/rgba() value.
 
| Any web colour name, hex colour, or rgb()/rgba() value.
 
| #666666
 
| #666666
Line 88: Line 170:
 
<pre>{{PC_1
 
<pre>{{PC_1
 
| small-side=left
 
| small-side=left
| colour-border=red
+
| colour-border=palevioletred
 
| colour-background=#FFEEEE
 
| colour-background=#FFEEEE
 
| colour-headers=rgb(255,182,193)
 
| colour-headers=rgb(255,182,193)
Line 95: Line 177:
 
| left-1-header=Overview
 
| left-1-header=Overview
 
| left-1-data={{:Bob/Overview}}
 
| left-1-data={{:Bob/Overview}}
} right-1-header=Hooks
+
| right-1-header=Hooks
| right-1-data=* Here's a hook
+
| right-1-data=&amp;#32;* Here's a hook
 
* Here's another
 
* Here's another
 
* And a third
 
* And a third
 
| left-2-header=A Picture
 
| left-2-header=A Picture
| left-2-data=[[File:Glyph-galliard-f.jpg]]
+
| left-2-data=<center>[[File:Glyph-galliard-f.png]]</center>
 
| right-2-header=Contacts
 
| right-2-header=Contacts
 
| right-2-data=I don't know anyone yet.
 
| right-2-data=I don't know anyone yet.
 
}}</pre>
 
}}</pre>
 +
 +
''(The &amp;#32; is only necessary when starting data with a list element -- without it mediawiki won't render the first item in said list properly.)''
  
 
This would give you:
 
This would give you:
Line 109: Line 193:
 
{{PC_1
 
{{PC_1
 
| small-side=left
 
| small-side=left
| colour-border=red
+
| colour-border=palevioletred
 
| colour-background=#FFEEEE
 
| colour-background=#FFEEEE
 
| colour-headers=rgb(255,182,193)
 
| colour-headers=rgb(255,182,193)
Line 116: Line 200:
 
| left-1-header=Overview
 
| left-1-header=Overview
 
| left-1-data={{:Bob/Overview}}
 
| left-1-data={{:Bob/Overview}}
} right-1-header=Hooks
+
| right-1-header=Hooks
| right-1-data=* Here's a hook
+
| right-1-data=&#32;
 +
* Here's a hook
 
* Here's another
 
* Here's another
 
* And a third
 
* And a third
 
| left-2-header=A Picture
 
| left-2-header=A Picture
| left-2-data=[[File:Glyph-galliard-f.jpg]]
+
| left-2-data=<center>[[File:Glyph-galliard-f.png]]</center>
 
| right-2-header=Contacts
 
| right-2-header=Contacts
 
| right-2-data=I don't know anyone yet.
 
| right-2-data=I don't know anyone yet.
Line 128: Line 213:
 
[[Category: Template]]
 
[[Category: Template]]
 
</noinclude>
 
</noinclude>
<includeonly>{{#css:Template:PC_1/PC_1.css}}{{#css:
 
.outer {
 
border: 2px solid {{{colour-border|black}}};
 
background-color: {{{colour-background|white}}};
 
color: {{{colour-text|black}}}
 
}
 
#left {
 
border-right: 1px dotted {{{colour-border|black}}};
 
}
 
#header {
 
background-color: {{{colour-border|black}}};
 
border-bottom: 2px solid {{{colour-links|#666}}};
 
color: {{{colour-headers|#CCC}}};
 
}
 
#contents {
 
color: {{{colour-border|black}}};
 
background-color: {{{colour-headers|#CCC}}};
 
}
 
.header {
 
border-top: 1px solid {{{colour-border|black}}};
 
border-bottom: 1px dotted {{{colour-border|black}}};
 
background-color: {{{colour-headers|#CCC}}};
 
}
 
#mainimg, #altimg {
 
border-top: 1px solid {{{colour-border|black}}};
 
}
 
#mainimg img, #altimg img {
 
border: 1px solid {{{colour-links|#666}}};
 
}
 
a {
 
color: {{{colour-links|#666}}} !important;
 
}
 
{{#ifeq:{{lc:{{{small-side}}} }}|right|
 
#left {
 
width: unset;
 
flex: 1;
 
min-width: 260px;
 
}
 
#right {
 
flex: 0 1 260px;
 
min-width: unset;
 
width: 260px;
 
}
 
@media only screen and (max-width: 730px) {
 
#right {
 
min-width: 100%;
 
order: 1;
 
}
 
#left {
 
order: 2;
 
}
 
}
 
| }}
 
}}
 
<div class="outer">
 
<div id="header">{{{header-data|{{PAGENAME}}}}}</div>
 
<div id="contents">{{#if:{{{left-1-header|}}}|*[[#{{{left-1-header}}}|{{{left-1-header}}}]]|}}{{#if:{{{right-1-header|}}}|*[[#{{{right-1-header}}}|{{{right-1-header}}}]]|}}{{#if:{{{left-2-header|}}}|*[[#{{{left-2-header}}}|{{{left-2-header}}}]]|}}{{#if:{{{right-2-header|}}}|*[[#{{{right-2-header}}}|{{{right-2-header}}}]]|}}{{#if:{{{left-3-header|}}}|*[[#{{{left-3-header}}}|{{{left-3-header}}}]]|}}{{#if:{{{right-3-header|}}}|*[[#{{{right-3-header}}}|{{{right-3-header}}}]]|}}{{#if:{{{left-4-header|}}}|*[[#{{{left-4-header}}}|{{{left-4-header}}}]]|}}{{#if:{{{right-4-header|}}}|*[[#{{{right-4-header}}}|{{{right-4-header}}}]]|}}{{#if:{{{left-5-header|}}}|*[[#{{{left-5-header}}}|{{{left-5-header}}}]]|}}{{#if:{{{right-5-header|}}}|*[[#{{{right-5-header}}}|{{{right-5-header}}}]]|}}{{#if:{{{left-6-header|}}}|*[[#{{{left-6-header}}}|{{{left-6-header}}}]]|}}{{#if:{{{right-6-header|}}}|*[[#{{{right-6-header}}}|{{{right-6-header}}}]]|}}{{#if:{{{left-7-header|}}}|*[[#{{{left-7-header}}}|{{{left-7-header}}}]]|}}{{#if:{{{right-7-header|}}}|*[[#{{{right-7-header}}}|{{{right-7-header}}}]]|}}{{#if:{{{left-8-header|}}}|*[[#{{{left-8-header}}}|{{{left-8-header}}}]]|}}{{#if:{{{right-8-header|}}}|*[[#{{{right-8-header}}}|{{{right-8-header}}}]]|}}{{#if:{{{left-9-header|}}}|*[[#{{{left-9-header}}}|{{{left-9-header}}}]]|}}{{#if:{{{right-9-header|}}}|*[[#{{{right-9-header}}}|{{{right-9-header}}}]]|}}</div>
 
<div id="left">
 
{{#ifexpr: {{#if:{{{image-main|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|0|1}}|<div id="mainimg" class="data">[[File:{{{image-main}}}|240px|border]]</div>|}}{{#if:{{{left-1-header|}}}|<div class="header" id="{{{left-1-header}}}">{{{left-1-header}}}</div>
 
<div id="left-1" class="data">{{{left-1-data}}}</div>|}}{{#if:{{{left-2-header|}}}|<div class="header" id="{{{left-2-header}}}">{{{left-2-header}}}</div>
 
<div id="left-2" class="data">{{{left-2-data}}}</div>|}}{{#if:{{{left-3-header|}}}|<div class="header" id="{{{left-3-header}}}">{{{left-3-header}}}</div>
 
<div id="left-3" class="data">{{{left-3-data}}}</div>|}}{{#if:{{{left-4-header|}}}|<div class="header" id="{{{left-4-header}}}">{{{left-4-header}}}</div>
 
<div id="left-4" class="data">{{{left-4-data}}}</div>|}}{{#if:{{{left-5-header|}}}|<div class="header" id="{{{left-5-header}}}">{{{left-5-header}}}</div>
 
<div id="left-5" class="data">{{{left-5-data}}}</div>|}}{{#if:{{{left-6-header|}}}|<div class="header" id="{{{left-6-header}}}">{{{left-6-header}}}</div>
 
<div id="left-6" class="data">{{{left-6-data}}}</div>|}}{{#if:{{{left-7-header|}}}|<div class="header" id="{{{left-7-header}}}">{{{left-7-header}}}</div>
 
<div id="left-7" class="data">{{{left-7-data}}}</div>|}}{{#if:{{{left-8-header|}}}|<div class="header" id="{{{left-8-header}}}">{{{left-8-header}}}</div>
 
<div id="left-8" class="data">{{{left-8-data}}}</div>|}}{{#if:{{{left-9-header|}}}|<div class="header" id="{{{left-9-header}}}">{{{left-9-header}}}</div>
 
<div id="left-9" class="data">{{{left-9-data}}}</div>|}}{{#ifexpr: {{#if:{{{image-alt|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|0|1}}|<div id="altimg" class="data">[[File:{{{image-alt}}}|240px|border]]</div>|}}
 
</div>
 
<div id="right">
 
{{#ifexpr: {{#if:{{{image-main|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|1|0}}|<div id="mainimg" class="data">[[File:{{{image-main}}}|240px|border]]</div>|}}{{#if:{{{right-1-header|}}}|<div class="header" id="{{{right-1-header}}}">{{{right-1-header}}}</div>
 
<div id="right-1" class="data">{{{right-1-data}}}</div>|}}{{#if:{{{right-2-header|}}}|<div class="header" id="{{{right-2-header}}}">{{{right-2-header}}}</div>
 
<div id="right-2" class="data">{{{right-2-data}}}</div>|}}{{#if:{{{right-3-header|}}}|<div class="header" id="{{{right-3-header}}}">{{{right-3-header}}}</div>
 
<div id="right-3" class="data">{{{right-3-data}}}</div>|}}{{#if:{{{right-4-header|}}}|<div class="header" id="{{{right-4-header}}}">{{{right-4-header}}}</div>
 
<div id="right-4" class="data">{{{right-4-data}}}</div>|}}{{#if:{{{right-5-header|}}}|<div class="header" id="{{{right-5-header}}}">{{{right-5-header}}}</div>
 
<div id="right-5" class="data">{{{right-5-data}}}</div>|}}{{#if:{{{right-6-header|}}}|<div class="header" id="{{{right-6-header}}}">{{{right-6-header}}}</div>
 
<div id="right-6" class="data">{{{right-6-data}}}</div>|}}{{#if:{{{right-7-header|}}}|<div class="header" id="{{{right-7-header}}}">{{{right-7-header}}}</div>
 
<div id="right-7" class="data">{{{right-7-data}}}</div>|}}{{#if:{{{right-8-header|}}}|<div class="header" id="{{{right-8-header}}}">{{{right-8-header}}}</div>
 
<div id="right-8" class="data">{{{right-8-data}}}</div>|}}{{#if:{{{right-9-header|}}}|<div class="header" id="{{{right-9-header}}}">{{{right-9-header}}}</div>
 
<div id="right-9" class="data">{{{right-9-data}}}</div>|}}{{#ifexpr: {{#if:{{{image-alt|}}}|1|0}} and {{#ifeq:{{lc:{{{small-side}}} }}|right|1|0}}|<div id="altimg" class="data">[[File:{{{image-alt}}}|240px|border]]</div>|}}
 
</div>
 
</div>
 
[[Category:PCs]]</includeonly>
 

Latest revision as of 22:30, 30 December 2021

This is a character page template, with various options.

variable options default what it does
small-side left, right left Determines whether the left or right is the thinner side.
colour-background Any web colour name, hex colour, or rgb()/rgba() value. white Sets the background for the main data areas.
colour-border Any web colour name, hex colour, or rgb()/rgba() value. black Sets the colour for the borders.
colour-headers Any web colour name, hex colour, or rgb()/rgba() value. #CCCCCC Sets the colour for the section headers.
colour-links Any web colour name, hex colour, or rgb()/rgba() value. #666666 Sets the colour for links and some other accents.
colour-text Any web colour name, hex colour, or rgb()/rgba() value. black Sets the text colour.
image-main An image name, such as Bob.png N/A Sets the character image at the top of the thin side.
image-alt An image name, such as Bob2.png N/A Sets the image at the bottom of the thin side.
header-data Almost anything. (Except tables, but you can call a subpage with one.) N/A This is what you want in the main display header, such as your name.
left-X-header A section name, such as Overview. N/A Sets the name of a section on the left side. X can be from 1-9.
left-X-data Almost anything. (Except tables, but you can call a subpage with one.) N/A Sets the content of a section on the left side. X can be from 1-9.
right-X-header A section name, such as Overview. N/A Sets the name of a section on the right side. X can be from 1-9.
right-X-data Almost anything. (Except tables, but you can call a subpage with one.) N/A Sets the content of a section on the right side. X can be from 1-9.

An example, using only some options:

{{PC_1
| small-side=left
| colour-border=palevioletred
| colour-background=#FFEEEE
| colour-headers=rgb(255,182,193)
| image-main=FelixGraffiti.jpg
| header-data=This Is A Test
| left-1-header=Overview
| left-1-data={{:Bob/Overview}}
| right-1-header=Hooks
| right-1-data=&#32;* Here's a hook
* Here's another
* And a third
| left-2-header=A Picture
| left-2-data=<center>[[File:Glyph-galliard-f.png]]</center>
| right-2-header=Contacts
| right-2-data=I don't know anyone yet.
}}

(The &#32; is only necessary when starting data with a list element -- without it mediawiki won't render the first item in said list properly.)

This would give you:


FelixGraffiti.jpg
Overview
Full Name:Bob Example
Ritename:Verbs-the-Noun
Race:Garou
Faction:Gaian
Tribe:Bone Gnawers
Auspice:Galliard (Waxing)
Breed:Homid
Rank:Cliath
Date of Birth:April 1st, 1991
Age:25
Height:6'7"
Weight:200lbs
Eye Colour:Brown
Hair Colour:Brown
Demeanor:Crackerjack
Photo Reference:Guy Incognito
Theme Song:Sexy And I Know It - LMFAO
A Picture
Glyph-galliard-f.png