Grouse
Grouse:EditingGuide
From Grouse House Wiki
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 |
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.
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>