Guide:Writing HeroPage

## Intro

This is a small guide to working with the Project Haven Wikia.

This is a quick demonstration of how I did a hero page. Just a heads up, it's much easier to write using the source code. The visual/GUI editor is slow and makes sleeker things hard to do IMO. Whenever you are confused about a specific page, turn on the source option, skim the code and try to understand what's doing what.

Disclaimer: you're allowed to write whichever way you please, just make sure your information is accurate and understandable. But I must say, most of this can be learned in 30~120 minutes. It's very easy, you can google stuff you don't understand or just experiment with CnP'd code.

## Hero Info

Let's examine the first part, I'll be deconstructing the source of the Widow Mine page for an example.

If you're gonna CnP, which you should, I recommend doing so from the Firebat page, which is slightly better organized than the earlier pages I did (not by very much though). I only chose the Widow Mine page because it has slightly less text, making it easier to read.

 Health | 500 (1 regen)
 Attack damage | 50 (3.5 aspd)
 Range | 7

This is what the first part looks like in source.

{{hero info

}}

This part is very straight forward, you basically just copy this code and change the parts behind the "=" sign. I guess you can do this via GUI since I made a GUI template for this called "hero info".

The only part that might confuse you slightly might be the image row. Basically navigate to Special:Images, upload the portrait image and copy and paste the name of the desired image into the line, prefaced by "File:". You can find the name of an image by clicking on it in the Special:Images page. But as of writing this article, I have uploaded all the portrait images. They follow the format "Characternameportrait\_static.png".

## Tabbed Sections (+Ability Info/Perks/Etc..)

This next part will be slightly more confusing to users unfamiliar with HTML/markup. It's kind of best just to CnP and twiddle around with things until you start to understand a little more.

* Abilities

Widow Mine currently utilizes the Original System.

 Triple ShotRapidly fires three Sentinel Missiles (deals your base weapon damage).Energy BurstReleases a burst of energy in a radius of 5 that deals 150 damage to enemies and restores 5% energy for allied units.

<tabber>

Creates a tab menu, where we can separate different sections of information.

Abilities=

First tab section, every tab section following this must use "|-|" at the beginning of the line.

<span style="font-size:12px;">Widow Mine currently utilizes the [http://project-haven.wikia.com/wiki/Skill\_Systems#Original\_System Original System].</span>

Simple hero system preface.

{| border="1" style="text-align:left; border-color:black; border-size:1px"

"{|" creates a new table, and following it are all the options.

Creates a new row.

! style="background-color:#252525" | https://vignette1.wikia.nocookie.net/project-haven5963/images/d/d3/Btn-adaptationSystems.png/revision/latest?cb=20170529063027 <span style="color:#ffff80">Adaptation Systems</span> - (Passive)

"!" Creates a new header for the row, style="background-color:#252525" makes the background color black, "https://vignette1.wikia.nocookie.net/project-haven5963/images/d/d3/Btn-adaptationSystems.png/revision/latest?cb=20170529063027" Refers to the image link address. Span is mostly used for styling short passages of text between blocks More about span.

"|-" Creates a new row

"|" Creates a new cell for the current row, the rest of the line is text.

Another new row.

! style="background-color:#252525" | https://vignette4.wikia.nocookie.net/project-haven5963/images/c/c0/Btn-tripleBurst.png/revision/latest?cb=20170529063354 https://vignette1.wikia.nocookie.net/project-haven5963/images/6/6b/Btn-energyBurst.png/revision/latest?cb=20170529063348 <span style="color:#ffff80">Triple Shot/Energy Burst</span> - (Q)

The last couple segments are basically the previous few segments repeated, but for different abil's.

"|}" ends the current table.

</tabber>

"</tabber>" ends the tab menu.

IMO this makes it look a lot complicated than it really is, just copy and paste stuff - tweak stuff for yourself. Google "Wikia Table", "Wikia Colored Text",.. stuff like that - it's really easy. Have fun editing Project Haven Wikia.

Note to self, make this community page a specific page.

Sobrtonog (talk) 10:38, May 30, 2017 (UTC)