MediaWiki Character Page Template


  • Coder

    Character page templates! Character page templates can be tricky because they have to a) look nice and b) be simple enough that most people can fill them in easily.

    (Then you get into the problem of people wanting their character page to look nicer than the others and fooling about putting things like banners and image-based layouts. Which, yes, more 'interesting' pages, but also sometimes results in really awful looking stuff that's difficult to read. Some people know what they're doing and can turn out really lovely things. Some people do not know what they are doing, copy and paste complicated things, and wind up not understanding WTF the code does. So on one hand, yay, creativity, but on the other hand, I worked hard to make stuff cohesive, thanks for tossing that out the window to have dancing alligators all over your bright purple page, you special, special snowflake.)

    ANYWAY.

    The best way I have found to get things to align mostly how you want them to on MediaWiki pages is to use tables. The following code is your garish teachable moment; for the non-crazy just-give-me-the-template-learning-is-for-nerds version, skip to the post below.

    __NOTOC__
    {| width="100%" style="background: lawngreen"
    |- style="vertical-align: top"
    | width="100%" |
    {| width="100%"  style="background: turquoise"
    | 
    = Character Name =
    
    == Overview ==
    
    == Hooks ==
    
    == Contacts ==
    
    == Potato ==
    
    == Logs ==
    |}
    |
    {| style="background: teal"
    |
    {| width="100%" style="background: yellow"
    | colspan="2" | [[Image:CPage_Main.jpg|250px]]
    |-
    | class="left" | '''Birthdate:'''
    | Potato
    |-
    | class="left" | '''Virtue:'''
    | Potato
    |-
    | class="left" | '''Occupation:'''
    | Potato
    |-
    | class="left" | '''Played-By:'''
    | Potato
    |-
    | colspan="2" | <hr>
    |-
    | class="left" | '''Clan:'''
    | Potato
    |-
    | class="left" | '''Covenant:'''
    | Potato
    |-
    | class="left" | '''Auspice:'''
    | Potato
    | colspan="2" | <hr>
    |-
    | colspan="2" | 
    <center>
    == Soundtrack ==
    </center>
    |-
    | colspan="2" |
    '''Song Title'''<br>
    ''Lyric''<br>
    ''Lyric''<br>
    ''Lyric''
    |-
    |}
    |}
    |}
    

    What we have here are four sections.

    1. containing table – lawngreen
    2. character information – turquoise
    3. infobox shell – teal
    4. main infobox – yellow

    The 'NOTOC' up there at the top keeps MediaWiki from automatically generating a table of contents despite all those headings.

    Anyway, section by section again:

    tutorial image

    1. containing table – lawngreen
      This is the entire table's background. It's set to be 100% of the page width, though it doesn't look it in that screencap because I modified the window's size so the picture wouldn't be as wide. The character information and the infobox are both nested inside this yellow outer portion. You could specify a different width here, or add a border with rounded corners, or whatever. The 'vertical-align: top' part is important: otherwise, MediaWiki will center text vertically in the table cell, which looks stupid if one side's text takes up a lot more length that the other side. That's how you get an infobox floating halfway down the page to the right. That stinks.
    2. character information – turquoise
      All the long-form character information goes here. It starts off with a large heading for character name, and then smaller headings for the next sections, which are usually things like overview, RP hooks, whatever. Treat this section like its own little regular wiki page, because it kind of is. Just having headings and text makes it simple and hopefully easier for rookies to fill out.
    3. infobox shell – teal
      This is the right column, where the infobox is. This teal part holds the smaller infobox table in place. It will go right down to the bottom of the page, because its length will always be the same as the length of the main character information text.
    4. main infobox – yellow
      This is a smaller, two-column table that keeps shit arranged under a picture.

    Under all that is category junk.

    Some notes:

    • Keeping the tables simple wastes some space, namely anything under the infobox. In order to have the main part's text wrap around underneath the infoxbox, we'd have to float the infobox instead of making it a table cell. This would probably be nicer, but in the interest of simplicity and not making a tangle of style divisions (divs), we just made it a static part of the table.

  • Coder

    And now without the rainbow barf:

    __NOTOC__
    {| width="100%" 
    |- style="vertical-align: top"
    | width="100%" |
    {| width="100%" 
    | 
    = Character Name =
    
    == Overview ==
    
    
    == Hooks ==
    
    
    == Contacts ==
    
    
    == Potato ==
    
    
    == Logs ==
    |}
    |
    {| |
    {| width="100%" 
    | colspan="2" | [[Image:CPage_Main.jpg|250px]]
    |-
    | class="left" | '''Birthdate:'''
    | Potato
    |-
    | class="left" | '''Virtue:'''
    | Potato
    |-
    | class="left" | '''Occupation:'''
    | Potato
    |-
    | class="left" | '''Played-By:'''
    | Potato
    |-
    | colspan="2" | <hr>
    |-
    | class="left" | '''Clan:'''
    | Potato
    |-
    | class="left" | '''Covenant:'''
    | Potato
    |-
    | class="left" | '''Auspice:'''
    | Potato
    |-
    | colspan="2" | <hr>
    |-
    | colspan="2" | 
    <center>
    == Soundtrack ==
    </center>
    |-
    | colspan="2" |
    '''Song Title'''<br>
    ''Lyric''<br>
    ''Lyric''<br>
    ''Lyric''
    |-
    |}
    |}
    |}
    

  • Coder

    And now an unpopular opinion:

    My character page doesn't stand out!

    Well, it's not supposed to. A wiki is ideally a centralized location for information, not a website host. It's reference. When you're looking up something in a book or on a site, you expect certain information to be in certain areas and you expect it to look like similar content in the rest of the book or the rest of the site. Think of a cookbook. Imagine if every recipe page had a different colour scheme, different fonts and font sizes, and this one cake recipe had a giant artsy photo of the cake as a background with the name of the cake written in huge white letters in a fancy font spanning two pages. That would be fucking nuts.

    Sorry. Organization of information is kind of a peeve of mine. Part of my day job is essentially getting paid to enforce it, like a tiny book dictator, and helping people find the information they need as easily as possible. AND I LOVE MY JOB, BRO.



  • I am not concerned about 'standing out'. Though, I don't think I could install that without breaking all the things. I break logs when I am told HOW to do it. I will just have to hassle someone to make wiki magic for us to make it all purty.


  • Coder

    @icanbeyourmuse

    No, really. Copy, paste. Mess around with it. Best way to learn.