Grouse:EditingGuide

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

Important Information

Grousehouse.wiki is hosted on a small server and large processes can overload the server, causing the site to go down. When editing very large pages, please edit only by section (the edit links that appear next to headers), rather than by the whole page, in order to prevent issues. If you notice that the site has gone down or experience any other major issues, please ping Maddie in the Discord.

General Information

Wiki pages can be edited using HTML or Wikitext markup. Documentation for both languages are linked below.

Wikitext help page

HTML documentation

If you would like to use HTML in an article, you must surround it with < html> < /html> tags. There are a few exceptions to this: Mediawiki can parse all of the HTML tags listed here, so surrounding these tags is not necessary.

Formatting is also available for editors to manage using CSS. There are two pages for editing site CSS. The Common.css file is for formatting of in-article elements like tables. The Foreground.css file is for formatting of site-wide elements- this page should be edited with caution. Both formatting pages are managed by Maddie, so please let me know if you need any help with them.

If you're wanting to make an interactive element or something similar, JavaScript can be added to the site. Functions can be added on the Foreground.js page.

If you would like to experiment with CSS or JavaScript without changes being visible to wiki viewers, you can edit group-specific pages. Editing Group-Grouse.css or Group-Grouse.js will make it so that your changes are only visible to logged-in users.

Uploading Images

Images can be uploaded on the Upload File page or using the menu bar when you're editing an article. If you're uploading multiple images at once, you can drag all of them into the upload menu on an article.

Please follow naming conventions when uploading images. If you're unsure how an image should be named, Maddie will be able to tell you.

Here are a few rules to follow when uploading images.

• When uploading item thumbnails, the name should remain exactly how it is on Wolvden (ie. the file for Arctic White is called "_butt_arcticwhite" on Wolvden so the file should be uploaded as "_butt_arcticwhite")
• Previews of decors should include the exact name of the decor followed by the stage that it is a preview of (ie. the preview of Arctic White on the Motherly pose would be uploaded as "_butt_arcticwhite_motherly")

Adding Images to an Article

Images can be added to articles in two different ways. Through wikitext, you can type [[File:name]], with name being the file name and extension of the image you are added. Through HTML, images must be added using their links with <img src="link">. You will be able to find the link to an image by opening it in a new tab. You do not need to include grousehouse.wiki in the link, just /images/path. For example, the link to the Spring icon would be "/images/0/04/Icon-season-spring.png".

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
	#3a5f70	Dark blue used in table headers
	#648a9b	Light blue used in table sub-headers
	#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: none;">
== Header ==
Section content.
</div>

H3 Collapsed by Default

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

H2 Static/Noncollapsible

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