Difference between revisions of "Premade Wiki Templates"

From Modern Enigma Society 2020 Wiki
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 19: Line 19:
 
* [https://www.w3schools.com/ W3 Schools] for learning HTML and CSS
 
* [https://www.w3schools.com/ W3 Schools] for learning HTML and CSS
 
* [https://www.google.com/search?q=html+color+picker HTML Colors]
 
* [https://www.google.com/search?q=html+color+picker HTML Colors]
−
 
−
'''Using Images''' - Background Images are the one challenge with using CSS formatting on MediaWiki. They are not supported within the {{#css}} tag, but must instead be embedded in the HTML style attribute. In order to use background images, add the following code to the section that you want to have it:
 
−
<pre><nowiki>style="{{#backgroundImage:Image.jpg}};"</nowiki></pre>
 
−
From there, you can customize how the background image behaves based on the options [https://www.w3schools.com/cssref/pr_background-image.asp here].
 
  
 
=Character Templates=
 
=Character Templates=
Line 33: Line 29:
 
* [[Template 5]]
 
* [[Template 5]]
 
* [[Template 6]]
 
* [[Template 6]]
 +
* [[Template 7]]
 +
* [[Template 8]]
  
−
=Venue Templates=
+
=Venue & Domain Templates=
−
'''Venue Specific templates:'''
 
−
* [[Masquerade Domain Template | Masquerade]]
 
−
* [[Apocalypse Sept Template | Werewolf]]
 
−
* [[Space System Template | Space]]
 
−
* [[CoD-X City Template | CoD-X]]
 
−
 
 
−
 
 
 
'''The Templates:'''
 
'''The Templates:'''
 
* [[Venue Template 1]]
 
* [[Venue Template 1]]

Latest revision as of 17:04, 18 August 2020

Using these Templates

To use the sheet, do the following steps:

  1. Copy the source code from the template to your character page.
    1. To create your own page, just search for the name you want to use, and then (if it's not already in use), click the "Create <page> on this wiki" link.
    2. Make sure that you aren't editing the original template page!
    3. Note that domain and venue pages should be created as categories. See the instructions in each section for details.
  2. Fill the sections in with the template for your venue.
  3. Customize icons - replace the banner and placeholder image with your own
    1. Character Icons can be found here.
  4. Customize color - you can either use one of the CSS Sheets, or the custom style sheet at the bottom of this page
  5. Add Categories - reference the MES Wiki Category List for the categories to add to the bottom of the page

Detailed Customization

These wiki pages are a starting point, meant for people with minimal wiki experience. If you want to go beyond the base layout, you can modify the layout code in the Template-specific formatting section at the bottom of each template.

Here are some good resources to get started on more advanced customization:

Character Templates

The Templates:

Venue & Domain Templates

The Templates:

Domain Templates

The Templates:

CSS Sheets

Replace the following code in the template with the reference to the CSS template that you want (i.e: vampire.css for Masquerade, or space.css for Infinite Edge) 

{{#css:MyPage/vampire.css}}

If you want to just customize some colors, you can also modify just the parts that you want changed in the layout section at the bottom of the template.

Click to expand the custom CSS 

{}/* ------------ Theme colors and fonts ----------------- */
#template-container
{ 
	background:#000; 
	background-image:-webkit-gradient(linear, 21% 19%, 100% 59%, from(#000000), to(#000000), color-stop(.6,#162b25)); 
	border:3px solid #d7ab6b;
	color: #E8DABE; 

}

/* ------------ Main Content Sections ----------------- */
/* Main body */
#template-container .main
{
	background: rgba(81, 107, 105, 0.75);
}

/* Container for content sections */
#template-container .content 
{
	color: #E8DABE; 
	background-color:#223b31;
	border:solid 1px #af8752; 
}

/* Columns, and main content area */
#template-container .column,
#template-container .mainColumn,
#template-container .section
{
	border:solid 3px #af8752; 
	background-color:#9AB1A7;
	color: #000; 
}
/* ------------  Quote box ----------------- */
/* Central header box */
#template-container .quote 
{
	background: #223b31;
	border:solid 2px #af8752; 
	box-shadow: 3px 3px 5px 1px #000;
	
	font-family: Georgia;
	font-size: 16px;
	color: #E8DABE;
}

#template-container .quote a,
{
	color:#E8DABE;
}

/* ------------ Wikitable formatting ----------------- */
/* Wiki Table formatting */
#template-container .wikitable 
{
	background:inherit;
	border:1px solid black;
}

/* Wiki Table header */
#template-container .wikitable th
{
	background:#223b31;
	background: rgba(34, 59, 49, 0.75); /* 8c0f14 */
	color:#E8DABE;
	border:1px solid #000;
}

#template-container .wikitable td
{
	border:1px solid #af8752;
}

/* ------------ Title Box (for templates with header boxes) ----------------- */
/* Title box */
#template-container .headerSection
{
	border:1px solid #af8752; 
	background:#223b31;
	background: rgba(34, 59, 49, 0.75); /* 8c0f14 */
	color:#E8DABE; 
}

/* Headers inside the title box */
#template-container .headerSection > h1
{ 
	font-size:120%; 
	font-weight:bold; 
}

/* ------------ Header Tabs ----------------- */
/* Tab links */
#template-container .tab
{
	background:rgba(81, 107, 105, 0.75);
	border:solid 1px #af8752;
	border-radius: 5px;
	color:#E8DABE;
}

#template-container .tab:hover
{
	background:rgba(112, 147, 144, 0.75);
}

/* ------------ Misc Formatting ----------------- */
/* Solid color padding blocks */
#template-container .pad 
{
	background-color:#223b31;
	border: 2px solid #d7ab6b; 
	background-attachment: fixed;
}

/* Sets bulleted items to the default color */
#template-container li 
{
	list-style-image: none;
	list-style-type: disc;
}

/* Horizontal lines */
#template-container hr
{
	border-color:#af8752;
	background-color:#af8752;
}

/* Emphasized text */
#template-container strong,
#template-container b
{
	font-family: Georgia;
	font-size: 16px;
}

/* ------------ Default text colors ----------------- */

/* Header colors and fonts */
#template-container h1,
#template-container h2,
#template-container h3
{
	color: #E8DABE;
	border:none;
}

/* link colors */
#template-container a 
{
	color: #E8DABE;
}

/* Emphasized text */
#template-container strong,
#template-container b
{
	color: #E8DABE;
}

/* ------------------- Text for content ------------------ */
#template-container .contentText
{
	color: #E8DABE; 
}

/* Header colors and fonts */
#template-container .contentText h1,
#template-container .contentText h2,
#template-container .contentText h3
{
	color: #E8DABE;	
}

/* link colors */
#template-container .contentText a 
{
	color: #E8DABE;
}

#template-container .contentText strong,
#template-container .contentText b
{
	color: #E8DABE;
}

/* ------------------- Text for section ------------------ */
#template-container .sectionText
{
	color:#000;
}

#template-container .sectionText h1,
#template-container .sectionText h2,
#template-container .sectionText h3
{
	color: #283D32;
}

/* link colors */
#template-container .sectionText a 
{
	color: #E8DABE;
}

/* Emphasized text */
#template-container .sectionText strong,
#template-container .sectionText b,
#template-container .sectionText .quote 
{
	color: #283D32;
}

Credits

Many of these templates are based off of the excellent work that others have done, either in layout or in code style.

Retrieved from "https://wiki2020.modernenigmasociety.org/index.php?title=Premade_Wiki_Templates&oldid=1407"