Grouse:EditingGuide

This page contains important editing information, tips, and tricks for creating and managing wiki pages.

Color Guide

Here are some hex codes for some common colors used across the site.

	#252525	Dark gray on header
	#5388a0	Blue used on links and buttons
	#007095	Dark blue used on hovers and some links
	#b0b0b0	Header dark gray
	#bcbcbc	Subheader mid gray
	#d4d4d4	Sidebar mid gray
	#d33	Warning red

Basic Page Setup

Headers and Sections

Headers define how a section is presented in the article. Sections can be collapsible - either collapsed by default or open by default - or static/noncollapsible. The header of each section must be defined by three elements: a header with a specific class, a div to start the collapsed content (if applicable), and a second header use to get around Mediawiki editing constraints. Headers entered without using a class will not appear on the page!

Right now, the use of these classes are only required for H2 and H3 headers - if you're using any header smaller than that, feel free to use equal signs instead!

Collapsible Headers

When using collapsible headers, each section must begin with a header class and collapsible content div, and end with a

</div>

For the section to include a working edit button, you must also add a second header to get around Mediawiki constraints.

In order to define the top of the collapsible content section, you can add this text. You will change the display style depending on whether or not the content is collapsed by default.

<div class="c-content" style="display: block;">

For example, a section might appear like this if it is collapsible and open by default.

<h2 class="c-header active">Header</h2>
<div class="c-content" style="display: block;">
== Header ==
Section content.
</div>

Open by Default

To create a section that's open by default, add the following class to your header tag and change the collapsible div display style to "block".

Main Header

<h2 class="c-header active">Header</h2>
<div class="c-content" style="display: block;">

Sub Header

<h3 class="c-header active">Header</h3>
<div class="c-content" style="display: block;">

Closed by Default

To create a section that's open by default, add the following class to your header tag and change the collapsible div display style to "none".

Main Header

<h2 class="c-header hidden">Header</h2>
<div class="c-content" style="display: none;">

Sub Header

<h3 class="c-header hidden">Header</h3>
<div class="c-content" style="display: none;">

Static/Noncollapsible

To create a section that's static/non-collapsible, add the following class to your header tag. When using a static section, you do not need to use include

<div class="c-content">

or

</div>

at the end of the section.

Main Header

<h2 class="h-static">Header</h2>

Sub Header

<h3 class="h-static">Header</h3>

Examples

Here are some of the common headers used across the site as examples you can copy and paste.

H2 Collapsed by Default (used on every long page)

<h2 class="c-header hidden">Header</h2>
<div class="c-content" style="display: block;">
== Header ==
Section content.
</div>

H3 Collapsed by Default

<h3 class="c-header hidden">Header</h3>
<div class="c-content" style="display: block;">
== Header ==
Section content.
</div>

H2 Static/Noncollapsible

<h2 class="h-static">Header</h2>
== Header ==