Grouse

EditingGuide: Difference between revisions

From Grouse House Wiki

No edit summary
No edit summary
Line 8: Line 8:
|-
|-
| class="mtocl1" | [https://grousehouse.wiki/Grouse:EditingGuide#Important_Information Important Information]
| class="mtocl1" | [https://grousehouse.wiki/Grouse:EditingGuide#Important_Information Important Information]
|-
| class="mtocl1" | [https://grousehouse.wiki/Grouse:EditingGuide#General_Editing_Resources General Editing Resources]
|}
|}




{{SectionToggles}}
{{SectionToggles}}
<h2 class="h-static">Important Information</h2>
<h2 class="c-header active">Important Information</h2>
<div class="c-content" style="display: block;">
== 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.
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.




<h2 class="h-static">General Information</h2>
</div>
 
<h2 class="c-header active">General Editing Resources</h2>
<div class="c-content" style="display: block;">
== General Editing Resources ==
 
Wiki pages can be edited using HTML or Wikitext markup. Documentation for both languages are linked below.
Wiki pages can be edited using HTML or Wikitext markup. Documentation for both languages are linked below.


Line 28: Line 38:




Formatting is also available for editors to manage using CSS. There are two pages for editing site CSS. The [https://grousehouse.wiki/MediaWiki:Common.css Common.css] file is for formatting of in-article elements like tables. The [https://grousehouse.wiki/MediaWiki:Foreground.css 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.
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.
 
 
</div>
 
<h2 class="c-header active">Uploading Images</h2>
<div class="c-content" style="display: block;">
== 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 [http://grousehouse.wiki/Special:Upload 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.
 
 
<h3 class="c-header active">Image Naming Conventions</h3>
<div class="c-content" style="display: block;">
=== 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


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 [https://grousehouse.wiki/MediaWiki:Foreground.js Foreground.js] page.
Backgroundname


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


<h2 class="h-static">Uploading Images</h2>
'''Decor Stages'''
Images can be uploaded on the [http://grousehouse.wiki/Special:Upload 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.
If the decor is different on all stages, please use:
* 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")


<h2 class="h-static">Adding Images to an Article</h2>


Images can be added to articles in two different ways. Through wikitext, you can type <html>[[File:name]]</html>, 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".
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!
 
 
</div>
</div>
 
<h2 class="c-header active">Adding Images to an Article</h2>
<div class="c-content" style="display: block;">
== 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 [https://grousehouse.wiki/index.php?title=Special:Search&profile=images&search=&fulltext=1 multimedia search] can be uploaded with Wikitext. You can type <html><b>[[File:name]]</b></html>, with name being replaced with the file name and extension of the image you are added. For example, <html>[[File:Nestingmaterial.png]]</html> 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!
 
 
</div>
 
<h2 class="c-header active">Color Guide</h2>
<div class="c-content" style="display: block;">
== Color Guide ==


<h2 class="h-static">Color Guide</h2>
Here are some hex codes for some common colors used across the site.
Here are some hex codes for some common colors used across the site.


Line 54: Line 165:
<table style="width: 100%;">
<table style="width: 100%;">
<tr>
<tr>
<td style="background-color: #252525; width: 10%;"></td><td style="padding-left: 1em; width: 20%;">#252525</td><td>Dark gray on header</td>
<td style="background-color: #252525; width: 10%;"></td><td style="padding-left: 1em; width: 20%;">#3a5f70</td><td>Primary table headers</td>
</tr><tr>
</tr><tr>
<td style="background-color: #5388a0; width: 10%;"></td><td style="padding-left: 1em;">#5388a0</td><td>Blue used on links and buttons</td>
<td style="background-color: #648a9b; width: 10%;"></td><td style="padding-left: 1em;">#5388a0</td><td>Secondary table headers</td>
</tr><tr>
</tr><tr>
<td style="background-color: #007095; width: 10%;"></td><td style="padding-left: 1em;">#007095</td><td>Dark blue used on hovers and some links</td>
<td style="background-color: #f4f4f4; width: 10%;"></td><td style="padding-left: 1em;">#007095</td><td>Used alongside white for alternating table rows</td>
</tr><tr>
</tr><tr>
<td style="background-color: #3a5f70; width: 10%;"></td><td style="padding-left: 1em;">#3a5f70</td><td>Dark blue used in table headers</td>
<td style="background-color: #dbdbdb; width: 10%;"></td><td style="padding-left: 1em;">#3a5f70</td><td>Used to emphasize table cells that aren't headers</td>
</tr><tr>
<td style="background-color: #648a9b; width: 10%;"></td><td style="padding-left: 1em;">#648a9b</td><td>Light blue used in table sub-headers</td>
</tr><tr>
<td style="background-color: #b0b0b0; width: 10%;"></td><td style="padding-left: 1em;">#b0b0b0</td><td>Header dark gray</td>
</tr><tr>
<td style="background-color: #bcbcbc; width: 10%;"></td><td style="padding-left: 1em;">#bcbcbc</td><td>Subheader mid gray</td>
</tr><tr>
</tr><tr>
<td style="background-color: #d4d4d4; width: 10%;"></td><td style="padding-left: 1em;">#d4d4d4</td><td>Sidebar mid gray</td>
<td style="background-color: #d4d4d4; width: 10%;"></td><td style="padding-left: 1em;">#d4d4d4</td><td>Sidebar mid gray</td>
Line 74: Line 179:
</table>
</table>


<h2 class="h-static">Basic Page Setup</h2>
<h3 class="h-static">Headers and Sections</h3>
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!


</div>


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!
<h2 class="c-header active">Basic Page Setup</h2>
<div class="c-content" style="display: block;">
== Basic Page Setup ==
 
<h3 class="c-header active">Headers and Sections</h3>
<div class="c-content" style="display: block;">
=== 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'''====
When using collapsible headers, each section must begin with a header class and collapsible content div, and end with a  
 
 
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  
<pre style="margin:0;"></div></pre>  
<pre style="margin:0;"></div></pre>  
For the section to include a working edit button, you must also add a second header to get around Mediawiki constraints.
For the section to include a working edit button, you must also add a second header to get around Mediawiki constraints.
Line 112: Line 228:
<pre><h3 class="c-header active">Header</h3>
<pre><h3 class="c-header active">Header</h3>
<div class="c-content" style="display: block;"></pre>
<div class="c-content" style="display: block;"></pre>
'''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'''
<pre><h2 class="c-header hidden">Header</h2>
<div class="c-content" style="display: none;"></pre>
'''Sub Header'''
<pre><h3 class="c-header hidden">Header</h3>
<div class="c-content" style="display: none;"></pre>
'''Static/Noncollapsible'''
<p style="margin:0;">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 <pre><div class="c-content"></pre> or <pre></div></pre> at the end of the section.</p>
'''Main Header'''
<pre><h2 class="h-static">Header</h2></pre>
'''Sub Header'''
<pre><h3 class="h-static">Header</h3></pre>




Line 145: Line 235:




'''H2 Collapsed by Default (used on every long page)'''
'''H2 Collapsed by Default'''
<pre><h2 class="c-header hidden">Header</h2>
<pre><h2 class="c-header hidden">Header</h2>
<div class="c-content" style="display: none;">
<div class="c-content" style="display: none;">
Line 161: Line 251:




'''H2 Static/Noncollapsible'''
</div>
<pre><h2 class="h-static">Header</h2>
== Header ==</pre>

Revision as of 05:01, 16 December 2024

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


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.


#3a5f70Primary table headers
#5388a0Secondary table headers
#007095Used alongside white for alternating table rows
#3a5f70Used to emphasize table cells that aren't headers
#d4d4d4Sidebar mid gray
#d33Warning 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>