User:Keris

Wiki formatting and you

Since this Wiki is seriously lacking in Help pages, I thought I'd give it a shot. Most of the mediawiki markup pages can be googled, but it is a little sad that we do not have them on this Wiki. Some of the other things this Wiki possesses with the various extensions is not easily understood if one has not done Wiki-editing before.

Most importantly, however is that people do not quite harness the power of the <css> tag extension and use templates from other Wiki which repeat the same CSS style information a million-trillion times all over the page and in every cell. Not only does it make the Source look like someone barfed over it, it makes editing it a nightmare and even less accessible for the causual wiki user.

There are a lot of CSS help pages, but again, googling for them is not for everyone. It also sometimes seems daunting to learn all about all that goes on with page rendering. This tends to scare people away from using those tools to their benefit. I hope this text might simplify things for the use on a Wiki when the goal is not to create a production-strength corporate website but just a character bulletin or a "pretty" wiki page for some group or Category.

Wiki Markup

Most people who have clicked on the "View Source"-button (or "Edit"-button in case you are logged in.) have seen Wiki markup before. They are meant to be human readable representations of html-tags that do not lose their meaning even if the text is not displayed by a browser but read in text form. As an example if I write:

* One
* Two 
* Three

This is displayed as:

• One
• Two
• Three

This allows for easy creation of articles that are based on one particular topic and which only need limited 'styling', e.g.: Wikipedia articles. Most character pages, however, are less about the data containing it, but more about the presentation. Which leads to the use of excessive use of the table-wikimarkup (Which, btw, I think is horrible!) and sneaking in of HTML-tags to override Wiki standard colors, fonts, placing and other fancy things.

HTML tags

Sadly standard wiki(media) only offers rudementary support for HTML tags, and more importantly, for the CSS styling that goes hand in hand with it. Which leads to the use of tags and methods that have been deprecated since 1990. <font></font> chief among them. Also the table wikimarkup allows for adding style="" additions for individual tables and/or cells. This is the crux of the problem with most templates that are copied from elsewhere: They 'hack' mediawiki to allow more styling than the original wikimarkup allows. It does it poorly however if anyone ever wants to edit the page or gods forbid change the background from bile-green to frog-green because the person has to go through every single cell of the table to change every single style-entry. While copy/replace sometimes work, very often there are slight differences and in big (character) pages with multiple columns? It becomes a nightmare.

CSS tags for the rescue

Thankfully the Wiki admins here have installed the CSS-extension, which introduces the <css> </css>-tags that allow the use of a stylesheet instead of individual style-comments in each cell. How does that improve the situation? It allows to gather your whole style comments in one place (usually at the top of the page, or as I have done with this page, in a different (sub-)page all together. It also only describes how I want this particular "thing" to look once, and if I change my mind, I change it in one place, and the page automatically changed every cell or item I "marked" as belonging to the same "thing" to look differently. It also fullfills the (esoteric sounding) demand to separate content from presentation, but everyone who tried to edit a heavily style-barfed character page knows how tedious it can be to find that spot where you change the age from 24 to 25 when all you see is "color: #4798378; -moz-background...." and so on. By separating the content from the presentation you make it easier to change both without going crazy.

All right, explain it to me then!

It is rather easy to do if you do it from the start, and a bit more of apain if you want to convert an existing page. The core concept one has to understand using CSS (apart of the syntax of the language, which can be daunting. But if you are using style="" things you already saw the CSS language and hopefully understood it) is the following: There are two types of "things" you can tell CSS to 'paint in pretty colors'. One is called and ID, the other a class. You usually will stick to classes for the most part. A class is what it says on the tin: A classification of "things". The usual Real World example that is used is 'cars'. You may drive a BMW, or a Volvo, but they are both cars. They may be blue or black or silver, but cars. How does that translate to wiki-code and CSS?

It requires a little bit of "forethought and planning". You have to consider the elements of your text you want to look the same and classify them. Usually the structure of a text is pretty easy: There is a bunch of block text, like this one here. There are a few headers. A few subheaders. A block of data that on paper you would write out in a table-form of some kind, which has column and row headers and the data in side being of one or two different "kinds" or "classes" as well. A good example are excerpts of your character sheet: It is classified in three sections: (Attributes, Abilities, Other Traits), with Attributes split into three sections (Mental, Physical, Social), each with three actual Attributes (Stength, Dexterity, Stamina) which is further subdivided into two parts (the Name of the Attribute, and how many dots you have in it).