Wiki Walkthrough Author Guide

Revision as of 17:46, 6 October 2017 by Krystal109 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Hello and welcome to the guide for writing a Neoseeker wiki walkthrough. This guide is intended to help walkthrough authors create Neoseeker walkthroughs with a uniform look and feel that takes advantage of all of the features in our guide system.


Contents

[edit] General Guidelines


1) Bold all important information (Collectibles, Quest NPCS, etc.)

2) All guides must have an introductory page, which include an overview of all info in the guide

3) Walkthroughs should aim to mention all Collectibles, missable events and trophy/achievements, and hidden areas/items/secrets within the main text.

4) Additional sections can be added to cover any optional content, or non-missable events, but this content should be covered to help players get 100% completion.

5) Open-world and non-linear games should still have a walkthrough component that a user can follow to complete the game. Optional side-quests can be added to an appendix section and linked to as a suggested action at certain points within the main walkthrough.

6) Look for opportunities to do "mini guides" or "specialized pages" which cover topics likely to be "commonly asked" about the game. Some examples include particularly powerful or hard to get items, particularly hard bosses, things that people will need extra help on, etc.

Eg if the game has 3 particularly tough bosses, having a separate reference page for each boss, rather than only talking about the boss withing the walkthrough section helps. Sometimes you can extract the information from the main walkthrough and repeat it in the additional pages.

more example pages: "How to unlock the Shadow Sword", "Where to find the last Sword Pieces", "Getting around the End Boss glitch", "How to the True Ending", etc.

[edit] Creating the Homepage


The guide homepage is always to be created in a URL like this:

 http://www.neoseeker.com/game-name/walkthrough

Eg

 http://www.neoseeker.com/dead-rising-4/walkthrough
 http://www.neoseeker.com/horizon-zero-dawn/walkthrough
 http://www.neoseeker.com/ever-oasis/walkthrough

To create this page, search for the game on Neoseeker, go to the game profile, and then on a desktop/laptop browser look for a button called "Start a Walkthrough" on the right hand side bar like this:

Starting walkthrough button.png

[edit] What to include?

1) The top of the page should include a banner with the game name.

2) The first line should include "Welcome to Neoseeker's {Game Name} walkthrough and guide."

eg: "Welcome to Neoseeker's Dead Rising 4 walkthrough and guide"

3) The first paragraph of the page should talk about the guide, what it intends to covers etc. Explicitly name all the collectible types, quest types, etc.

  • Include some background information about the game/franchise, if applicable

4) Some authors like to include a small blue box below this that outlines what the guide will contain in a bullet list:

What this guide includes.png

The above box was done with the following code:

<div class="alert alert-info">
<i class="icon icon-info-sign pull-right icon-3x"></i> What this guide offers:

* Complete walkthrough to each of the five Grand Tome Worlds.
* Complete walkthrough to the Hivory Tower hub area including locations of all hidden Pagies and Grand Tome World entrances.
* Location Guides for every type of collectible including: Pagies, Ghost Writers, Rextro Arcade Tokens, Mollycools, Health Extenders, Power Boosters and Pirate Treasures. 
* Achievement/trophy guide.
</div>


[edit] Creating a Table of Contents


Table of contents.png

The Table of Contents is the list of pages at the right hand side of all guides. This "TOC" is also shown in mobile devices as a hovering box that opens a full screen Table of Contents for easy navigation.

The Table of Contents also controls the "Next" and "Previous" links on each page of the guide. The order of pages listed in the TOC is the order in which users paginate when clicking "next" at the bottom of each page.

Show toc pagination.png


The TOC can edited by clicking on the little cog on the upper right-hand side of the guide:

Table of contents button.png

This will take you to a page where you can enter "section" and "sub-sections" by creating bullet lists with proper markup.

[edit] Sections & Sub-Sections

Each major portion of the guide should be listed as a "Section", such as Walkthrough or Side-Quests. To create these, simply type the name of the section with no markup.

Each section should be followed by a bullet list of all pages that belong in that portion of the guide. For example, all pages that belong in the Walkthrough should be listed under the "Walkthrough" section. These sub-sections should use proper markup (see below) to create a "link" to the page where that content is going to be displayed.

To create a proper sub-section, use the following markup:

[["Section Name"/"Sub-Section Name"|"Displayed Text"]]


Here's an example wiki code for a Table of Contents:

Gameplay Basics
* [[Gameplay Basics/Tech Scrap Tips|Tech Scrap Tips]]
* [[Gameplay Basics/Using an Ops/Command Centre|Using an Ops/Command Centre]]
* [[Gameplay Basics/Managing Action Bars|Managing Action Bars]]
* [[Gameplay Basics/Combat|Combat]]
The Surge Walkthrough
* [[walkthrough/Prologue|Prologue]]
* [[walkthrough/Abandoned Production|Abandoned Production]]
** [[walkthrough/Abandoned Production - Rocket Yard|Rocket Yard]]
** [[walkthrough/Abandoned Production - Main Assembly Line| Main Assembly Line]]
Mini Guides
* [[Endings]]
* [[Achievements]]


Note that sub-sub-sections, those that are a sub-section of another sub-section, don't have to include the original section's name.

For example, the above Table of Contents can also be as follows:

The Surge Walkthrough
* [[walkthrough/Prologue|Prologue]]
* [[walkthrough/Abandoned Production|Abandoned Production]]
** [[Abandoned Production/Rocket Yard|Rocket Yard]]
** [[Abandoned Production/Main Assembly Line| Main Assembly Line]]

Here are some from existing guides:


[edit] Basic Markup


Adding in markup to create headings and text formatting is essential in writing a guide. This allows you to bring certain text to the attention of the user and separate information into grouped headings that make the guide more readable.

[edit] Headings

=Heading 1=
==Heading 2==
===Heading 3===

The general rule is that Heading 2's should be used for the highest level of content, as Heading 1's are too large. There should be only one Header 2 per page, as this is the heading for all content on the page and any additional content belongs on their own page.

[edit] Text Formatting

Bold:

Pick up the '''painting [3/5]''' and continue onwards

Italics:

Pick up the ''painting [3/5]'' and continue onwards


You can also use standard HTML markup, such as:

Bold:

Pick up the <b>painting [3/5]</i> and continue onwards

Italics:

Pick up the <i>painting [3/5]</b> and continue onwards

Underline:

Pick up the <u>painting [3/5]</u> and continue onwards


For more basic formatting markup see the:


[edit] Advanced Markup


While basic markup will get you through a guide, it is very limited and lacks interactivity with other pages. By adding advanced markup coding you can make your pages look better, while also helping users navigate to other portions of the guide.

[edit] Text Formatting

For advanced text formatting, such as color, you'll need to use standard HTML.

Colored Font

Pick up the <span style="color:red">painting [3/5]</span> and continue onwards

You can also change the font color by it's hex color:

Pick up the <span style="color:#ff0000">painting [3/5]</span> and continue onwards


Background Color

Pick up the <span style="background-color:red">painting [3/5]</span> and continue onwards


[edit] Linking to Pages

In some cases, you may want to link to other portions of the guide to direct users to additional information not contained on the current page. Linking is also great for referencing information in the appendix section of the guide.

The markup for linking is identical to the text used in the creation of a Table of Contents, and linking to a non-existent page will create a link to the creation of that page.

The following links to /game-name/Chapter_1

[[Chapter 1]]


The following links to /game-name/walkthrough/Chapter_1

[[walkthrough/Chapter 1]]


You can also link to a headings within a page by using the following markup:

[[walkthrough/Chapter 1#Locate George|Locate George]]


For more basic formatting markup see the MediaWiki Linking Guide.


[edit] Highlighted Boxes

There are several types of highlighted boxes that can be used to bring text to the attention of the user, either for important notes or words of warning:

Alert boxes.png

The code to make the above looking boxes are:

<div class="alert alert-primary">
This is a blue box
</div>

<div class="alert alert-secondary">
This is a grey box
</div>

<div class="alert alert-success">
This is a green box
</div>

<div class="alert alert-warning">
This is a yellow box
</div>

<div class="alert alert-error">
This is a red box
</div>

[edit] Editor Helper Buttons for Coloured Boxes

Note that the editor has some shortcut buttons that help insert some markup for you, including the above above highlighted boxes:

Wiki editor buttons.png


[edit] Box w/ Headers

In some cases you may want the highlighted text to have a header:

Section box.png


The markup for this is as follows:

<div class="section section-info">
<div class="section-header">This is the title</div>
This is text inside the box
</div>

[edit] Tables


For text that is too complicated for a simple bulleted list, tables provide a great way to display that information in a neat and orderly manner. While tables are great for displaying long lists of short information, it's not recommended to place long sentences within a table.

There are two ways to create tables:


While the MediaWiki mark is fine for basic tables, and is considered easier to read and understand for those new to markup and HTML, it lacks the ability to make complex tables or interesting headers, such as the following:

Table list.png

The code for table above is this:

<table class="wikitable table-list">
<tr><th>Item</th><th>Location</th><th>Value</th><th>Enchantment</th></tr>
<tr><td>Epic Sword</td><td>Top Northeast Corner of Map 1</td><td>100 Gold</td><td>+5 damage</td></tr>
<tr><td>Epic Shield</td><td>Top Southeast Corner of Map 3</td><td>200 Gold</td><td>+10 Block</td></tr>
</table>


Each table consists of the following:

  • A "table" tag to designate the beginning of the table HTML and "/table" to close the table
  • A "tr" tag to designate the beginning of a table row and "/tr" to close the row
  • At least one "td" and "/td", within the row tags, to create a single cell
  • The "th" and "/th" tags designate a table header cell (Optional)

The information between each opening and closing tag is what will be displayed within that portion of the table. For example, in the above HTML "Epic Shield" is placed within the first "cell" tags of the second row, so it is displayed in that location on the image above.


Sortable Tables

You can also make the table sortable by adding "sortable" class to it:

<table class="wikitable table-list sortable">
<tr><th>Item</th><th>Location</th><th>Value</th><th>Enchantment</th></tr>
<tr><td>Epic Sword</td><td>Top Northeast Corner of Map 1</td><td>100 Gold</td><td>+5 damage</td></tr>
<tr><td>Epic Shield</td><td>Top Southeast Corner of Map 3</td><td>200 Gold</td><td>+10 Block</td></tr>
</table>


Note that sortable tables won't be sortable on preview, but will be sortable when saved.

[edit] Text Alignment in Tables

By default, all text within a table will be automatically aligned to the left. If you'd like to change the alignment for better readability or presentation, this can be done as follow:

Table alignment.png

<table class="wikitable table-list sortable">
<tr><th style="text-align:center">Item</th><th style="text-align:center">Location</th><th style="text-align:center">Value</th><th>Enchantment</th></tr>
<tr><td>Epic Sword</td><td>Top Northeast Corner of Map 1</td><td>100 Gold</td><td>+5 damage</td></tr>
<tr><td>Epic Shield</td><td>Top Southeast Corner of Map 3</td><td>200 Gold</td><td>+10 Block</td></tr>
</table>


Note that the above table's header cells all contain style="text-align:center" within the opening tag and that this results in the text to align to the center in those cells. The same "style" text can be used, replacing the word center with right or left, to align the text accordingly.

In addition, text can be aligned vertically within a cell by using the style="vertical-align:middle", or top and bottom:

Table cell merging.png

<table class="wikitable table-list">
<tr><th rowspan="2" style="vertical-align:middle">Name</th><th rowspan="2" style="vertical-align:middle">Available</th><th rowspan="2" style="vertical-align:middle">Cost</th><th rowspan="2" style="vertical-align:middle">Growth</th><th colspan="3" style="text-align:center">Sell Price</th></tr>
<tr><th>Base</th> <th>Silver</th><th>Gold</th></tr>
<tr><td rowspan="2" style="vertical-align:middle">Blue Jazz</td><td>Pierre's Shop</td><td>30</td><td rowspan="2" style="vertical-align:middle">7 Days</td><td rowspan="2" style="vertical-align:middle">50</td><td rowspan="2" style="vertical-align:middle">62</td><td rowspan="2" style="vertical-align:middle">75</td></tr>
<tr><td>Joja Mart</td><td>37</td></tr>


Note that vertical alignment will only be visible if the cell spans across more than 1 row (see below).

[edit] Merging Cells

Information is usually displayed as one "item" per cell, per row, but in some cases you may want information to be display across multiple rows or columns. In these cases, you'll need to use the following tags within the cell you wish to affect:

<td rowspan="2">
<td colspan="2">
  • The number following "rowspan" indicates how many rows BELOW this cell will be merged into this cell.
  • The number following "colspan" indicates how many columns AFTER this cell will be merged into this cell.

When dealing with the rows/columns that follow these types of cells, only include the information that should appear on that row - DO NOT place a blank cell.

In other words, if you have an item that is sold at multiple locations and use td rowspan="2" on the item name, followed by the first location and sell price, the next row should ONLY contain the second location and sell price.


Table cell merging.png

Header

<table class="wikitable table-list">
<tr><th rowspan="2" style="vertical-align:middle">Name</th><th rowspan="2" style="vertical-align:middle">Available</th><th rowspan="2" style="vertical-align:middle">Cost</th><th rowspan="2" style="vertical-align:middle">Growth</th><th colspan="3" style="text-align:center">Sell Price</th></tr>
<tr><th>Base</th> <th>Silver</th><th>Gold</th></tr>

Row 1

<tr><td rowspan="2" style="vertical-align:middle">Blue Jazz</td><td>Pierre's Shop</td><td>30</td><td rowspan="2" style="vertical-align:middle">7 Days</td><td rowspan="2" style="vertical-align:middle">50</td><td rowspan="2" style="vertical-align:middle">62</td><td rowspan="2" style="vertical-align:middle">75</td></tr>

Row 2

<tr><td>Joja Mart</td><td>37</td></tr>


Note that the second row ONLY contains the information that appears between the rowspans.

[edit] Fixed Width Cells

If you run into an issue where certain cells are becoming too long, squishing other cells to the point that they look bad, you can make a cell a "fixed width". This means that the cell will only display that wide before word-wrapping to a new line.

To do this, add the following to the cell you'd like to constrain:

<td width="70%">

Note that you can also use pixels (100px) to constrain the width of a cell, but this will display oddly on mobile phones. For this reason, it's best to use a "percentage" of the full (100%) width of the available space.

[edit] Tables w/ Highlight Boxes

It's also possible to make a table look like an alert box, while have the ability to control the information in the alert box like a table. This is great for things like inserting trophy information, such as the following:

Table alerts.png

<table class="wikitable table alert alert-success">
<tr><td>[[File:Dishonored_DotO_-_Uncaged.png|70px]]</td><td style="vertical-align:middle" width="70%">'''Uncaged''': Free the assassin Daud.</td><td style="text-align:right; vertical-align:middle">[[File:Trophy_Silver.png|50px]] / 25G</td></tr>
</table>


Note that the highlight box can be any of the ones mentioned in the "Highlight Boxes" section.


[edit] Images


Images make a guide that is text heavy look more balanced and can also help cover information that is hard to describe in text.

Important: Images are shared across the entire Neoseeker site. Please prefix your guide images with some keywords related to the game name, eg "doom4-map-1.jpg" or you can overwrite other images and/or have other people overwrite your images.

You might want to check out the Bulk Rename utility. The tool can help prefix every file in a folder with the game name and can help auto numerate files.

To upload an image, press the "Upload Image" button in the top right of each page of a guide. Wiki walkthrough uploader button.png

There are two ways to upload images:
  • Drag and drop multiple files into the upload window
  • Click the orange "File Upload" button to select files from your hard drive

When the file is uploaded you'll see a small code box with the image code in it, this can be copy and pasted into your guide to display the image.


Alternatively, if you write a guide in a .txt program, you might want to pre-populate your guide with images placeholders that can be filled in once pasted into neoseeker.

You can do this using the File syntax even if no file was uploaded yet:

[[File:gamename-filename.jpg]]


When you cut and paste the text into the editor and save it, these become links that let you upload the file into the placeholder.

Note that whatever filename you put into the placeholder tag is the final filename of the file, so if you have a tag like File:doom4-map_1.jpg and upload a file dsc00012345.jpg it will be renamed to doom4-map_1.jpg.

Here's what a file upload placeholder looks like:

Placeholder example.png


[edit] Resizing Images

In some cases, you may not want a single image at full width, but rather two or three smaller images to cover a section of text.

We recommend 2 standard sizes, to maximize image size for side-by-side display:

  • 326px for a thumbnail that can fit 2 images side by side
  • 215px for a thumbnail that can fit 3 images side by side

Eg:

See example 2 side by side thumbs with code that looks like:

[[File:Genesis_-_Progression_Pic_60.jpg|326px]] [[File:Genesis_-_Progression_Pic_61.jpg|326px]]

2 side by side thumbs.png

3 side by side thumbs with code that looks like:

<div>[[File:-000239-.jpg|215px]] [[File:-000240-.jpg|215px]] [[File:-000242-.jpg|215px]]</div>

3 side by side thumbs.png

Note that 3 side-by-side images MUST be placed in a div to allow all three images to appear next to each other and avoid weird behavior, such as this:

Multiple thumbs in mobile.png


Note the code difference, as follows:

Multiple thumbs in mobile code.png


[edit] Image Alignment

Images are aligned to the left by default, but you can also change their alignment for better presentation or to have them appear inline with the text.

[edit] Centering Images

There are multiple ways to center align text:

[[File:Genesis_-_Progression_Pic_60.jpg|center]]

[[File:Genesis_-_Progression_Pic_60.jpg|class=center-block]]

<div class="center-div-container">
[[File:Genesis_-_Progression_Pic_60.jpg]]
</div>

<div class="text-center">
[[File:Genesis_-_Progression_Pic_60.jpg]]
</div>

Note that centering an image only has a visual effect if the image is narrower than the width of the text area and will never display text next to it.

[edit] Left/Right Alignment

Aligning images to the left and right can be done using the following:

[[File:Genesis_-_Progression_Pic_60.jpg|326px|right]]
[[File:Genesis_-_Progression_Pic_60.jpg|326px|class=pull-right]]
[[File:Genesis_-_Progression_Pic_60.jpg|326px|left]]
[[File:Genesis_-_Progression_Pic_60.jpg|326px|class=pull-left]]

or

<div class="pull-right">[[File:Genesis_-_Progression_Pic_60.jpg|326px]]</div>
<div class="pull-left">[[File:Genesis_-_Progression_Pic_60.jpg|326px]]</div>

Note that text will automatically wrap around the image, making it appear "inline", depending on how you align the image. This can be avoided by using a "clear" tag:

Float right and clearfix.png

<div class="pull-right">[[File:20170922185152_1.jpg|300px|class=pull-right]]</div>
Some text here appears on the left of the image.
This text is still to the left of the image
<br class="clear" />
Now this text is below the image

[edit] Inside Boxes & Tables

Images can also appear within boxes and tables, along with the use of image alignment, to control the placement and presentation of images and text.

Pull right inside section info.png

<div class="section section-info"><div class="section-header">Title is here</div>
[[File:20170922185152_1.jpg|120px|class=pull-right]]
Some text here appears on the left of the image.
This text is still to the left of the image
</div>

or

Table alerts.png

<table class="wikitable table alert alert-success">
<tr><td>[[File:Dishonored_DotO_-_Uncaged.png|70px]]</td><td style="vertical-align:middle" width="70%">'''Uncaged''': Free the assassin Daud.</td><td style="text-align:right; vertical-align:middle">[[File:Trophy_Silver.png|50px]] / 25G</td></tr>
</table>

The above is an example of using a table to control text placement and alignment of text and images to create a unique-looking presentation. It also makes use of the highlight box classes to add green coloring to the table.

If you want to create a table for achievements/trophies, similar to the one above, please use the following generic images for the trophy icons.

[[File:Trophy_Bronze.png]]
[[File:Trophy_Silver.png]]
[[File:Trophy_Gold.png]]
[[File:Trophy_Platinum.png]]

For more information on images see the MediaWiki Images Guide.


[edit] Embedding Youtube Videos


If you'd like to embed a Youtube video into your guide just enclose the Youtube URL code in [yt][/yt]

The URL code is a small portion of the complete Youtube URL:

This Youtube video URL:

https://www.youtube.com/watch?v=LyFXCHOi7Ic


This is the URL code:

[yt]LyFXCHOi7Ic[/yt]


[edit] Tools for Authors


Most of the tools for authors are located in a few places:

  • the right hand side navigation area (uploading images, looking for images, editing navigation)
  • above the article (to Edit page, see edit history, move a page, and delete a page)

Tools right bart walkthrough.png

Wiki walkthrough author tools.png

Last edited by Krystal109 on 6 October 2017 at 17:46
This page has been accessed 453 times.