Difference between revisions of "User:Keris/col-right"
imported>Keris (Created page with "=====Header===== Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Bla...") |
imported>Keris m (→Wiki Markup) |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | ===== | + | ======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'''. <nowiki><font></font></nowiki> chief among them. Also the table wikimarkup allows for adding <nowiki>style=""</nowiki> 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 <nowiki><css> </css></nowiki>-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). | ||
Latest revision as of 13:03, 21 February 2014
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).
