Forum:Templates as Headings!

Heheheh while writing the question here I ran into an issue which, by solving it, solved my question. :D

I'll explain what I was trying to do, as others may find this interesting:

Using Templates as Headers


 * Wikis work primarily on the basis of text, tables and images. It can sometimes be difficult to place one type of element in a place that was not designed for it, preventing more complicated designs unless one knows a fair deal of HTML or Wiki Markup.


 * During work on a Wiki, I realized that I was using the same h2-level headings repeatedly (and would be using it many more times), but that these headings did not have sufficient presence on the page. I was toying with the idea of adding small images to said headings, to make it clear which part of the page discusses which subject (in my case, two incarnations of the same video game).


 * There are several problems with this idea. For one, the rich-text editor is not very helpful as far as placing both images and text (which is required for the heading to show up properly on the contents table) in an H2 heading. Additionally, since these headings are going to be present on all pages in the Wiki, this would confuse newcomer editors - and eventually lead to uglyness and errors all over the place.


 * The solution I came up with would sound obvious at first: create a simple template to handle it all for me. Then, all I need to do would be to type something like this:




 * Where the template itself would contain the following:


 * ==[[File:HeadingIcon.png]] Heading Text==


 * This could even work with arguments, of course, but to make things simple it's best used for headings that repeat all over the Wiki, so that newcomers can just copy the simple template call to whereever it's needed.


 * At first this seemed to work fine, creating a pretty heading with an icon on the left, which made it quite visible on the page. I augmented this with a "vertical-align:text-bottom" style to make it look neater since the image I used was a little taller than the text:


 * ==[[File:HeadingIcon.png]] Heading Text ==


 * Unfortunately, what I did not notice was that when you put those "==" heading markers into a template, the "Edit" button appearing next to the heading will edit the template rather than the section of the page where it is used.


 * To counter this, the "==" should go in the page itself, surrounding the template call:




 * Voila, works like a charm.


 * One thing to note, which I had a lot of problems with until discovering the answer just now: Make sure that your template does not have any line-breaks in it. Write your entire heading code as a single line, including the " " tags, otherwise the template will generate a break once it's activated, causing the "==" heading markup to fail.


 * While on the subject, I also toyed around with the idea of making headings that were made only of images. In other words, instead of using text for a heading, use an image. Here's an example of how it's done (template code):


 * [[File:HeadingImage.png]] Heading Text


 * Again, this is used by entering a template call into your page as such:




 * Note the hidden "Heading Text" there, which does not appear on the page thanks to the "Display:none" style. It IS absolutely required to have text there, because the contents table will actually read that text and generate a content link accordingly, otherwise your content table will look like... erm... crap.


 * Again, it should be noted that this is best done with headings that repeat themselves over and over throughout the entire wiki. If you want to include arguments, just remember that newbies make easily get confused by this, and could end up making your Wiki look messy.

Anyhow, I realize that this is not a question, it's only here because I figured out the solution WHILE writing the question. If this is not the appropriate place, maybe someone can move it to where it would be better suited? I couldn't delete this forum entry myself, so...

Hope this helps someone!

--Headrock 22:32, March 20, 2011 (UTC)


 * That works as a per-page solution, but if you're going to do that for every header on your wiki, CSS is a better choice.


 * Since, as I stated, I use the same exact header repeatedly on almost every page, it's a working solution as far as I'm concerned. However, if you would care to enlighten me on how CSS could be used to achieve this, I'm always glad to learn something new... --Headrock 19:05, March 21, 2011 (UTC)