Grouse:EditingGuide

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

Table of Contents
Links not working? Sections must be expanded to jump to a subheader within them!
Important Information
General Editing Resources
Uploading Images
Image Naming Conventions
Adding Images to an Article
Color Guide
Basic Page Setup
Headers and Sections

Expand allCollapse all

Important Information

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 Editing Resources

General Editing Resources

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.

The wiki also supports CSS formatting and Javascript functions. Maddie manages and creates both of these, so please check with her if you'd like something formatted or a feature added. Please do not edit pages ending in .css or .js without permission.

Uploading Images

Uploading Images

Some images can be uploaded directly to the wiki by an editor, but many will need to be added to the wiki directly by Maddie. This is so that the image can be accessed easily in the server, allowing certain Javascript functions (decor previewers, marking templates, etc.) to work. Generally, item images can be uploaded directly to the wiki, but not decoration or background items. If you're unsure whether or not you should upload an image directly to the wiki, feel free to ask Maddie!

You can upload an image on the Upload page, or by dragging and dropping a file into the menu bar visible while editing any page.

Below are some images which should not be uploaded directly to the wiki. Instead, place these images in a Google Drive folder and ping Maddie in the Discord to let me know that the images need to be uploaded directly to the server.

• Decoration and background thumbnails
• Decoration stages
• Plain marking or bases

When uploading images or creating a Google Drive folder with images to be uploaded to the wiki, be sure to follow naming convention guidelines outlined below.

Image Naming Conventions

Image Naming Conventions

For ease of finding images used on the wiki, specific names are used for certain images. When downloading images, please stick strictly to these naming conventions.

Genetics

Genetics traits should be downloaded and uploaded into a Google Drive folder, since Maddie will add them to the server files directly. Downloaded genetics do not need to follow a specific naming convention as the images are edited before being added to the wiki. However, make sure that what has been downloaded is clear in the name (don't just leave it Untitled, etc).

Decor and Backgrounds

All decoration and background images should be downloaded and uploaded into a Google Drive folder, since Maddie will add them to the server files directly.

When saving a decoration or background, use the name of the item in plain text with no punctuation. For example, Scar: Cheekbone [Left] would be switch to Scarcheekboneleft. [USA] Utah - Bryce Canyon would be switched to Usautahbrycecanyon. The first letter of the image should be capitalized.

Thumbnails

The thumbnail images of decor and backgrounds should be the item's plain name by itself.

Decorname

Backgroundname

Decor Stages

If the decor is different on all stages, please use:

Decorname_adult Decorname_motherly Decorname_relaxed Decorname_sentinel Decorname_adolescent Decorname_pup Decorname_pupyoung Decorname_pupnewborn
 Decorname_brachycephaly Decorname_conjoined Decorname_polycephaly Decorname_polymelia Decorname_sirenomelia

If the decor is the same on all stages, please use:

Decorname_all

Backgrounds

For the thumbnail of a background, please use:

Backgroundname

For the full version of backgrounds, please use:

Backgroundname_preview

If you are curious about naming schemes for additional items, please feel free to ask Maddie in Discord!

Adding Images to an Article

Adding Images to an Article

Images can be added to articles in two different way.

Images which have been uploaded to the website through the on-site uploading feature, and which can be found through searching its name in the multimedia search can be uploaded with Wikitext. You can type [[File:name]], with name being replaced with the file name and extension of the image you are added. For example, [[File:Nestingmaterial.png]] will add the Nesting Material image.

Images can also be added with HTML. Images uploaded directly to the server by Maddie must be added to a page this way, but any other image can also be added this way if you wish. With 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". If you're not sure where a specific image is located, Maddie can find it for you if you ask them in Discord!

Color Guide

Color Guide

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

	#3a5f70	Primary table headers
	#648a9b	Secondary table headers
	#f4f4f4	Used alongside white for alternating table rows
	#dbdbdb	Used to emphasize table cells that aren't headers
	#d4d4d4	Sidebar mid gray
	#d33	Warning red

Basic Page Setup

Basic Page Setup

Headers and Sections

Headers and Sections

Headers define how a section is presented in the article. Sections are collapsible, allowing users with Javascript enabled to hide a section from view. 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 just use equal signs instead!

Collapsible Headers

Collapsible headers are the default for the wiki. They should be used for every section unless otherwise specified. 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;">

Examples

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

H2 Collapsed by Default

<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>