Wiki Creation Walkthrough

Thanks to the generous assistance of User:Darc, TowersWiki has the Template:LokiCharPage wiki construction kit available for use by our players. Of course, use of this template is not required: if you're good with MediaWiki and CSS, you're more than welcome to build your characters' pages from the ground up. For those who would prefer a slightly more plug and play experience, however, using the template is much easier. While the template itself provides some basic instruction, this page will show you the process step by step.

• For the purposes of this tutorial, we'll use Anne Bowesly, the Ventrue Prince of London, as our sample character. You can refer to her page as we continue through the process.

• First, you'll need a wiki account. One will be automatically created for you upon character approval.

• Once you have an account, log in (using the box in the upper right corner), and navigate to: https://towersmux.net/towerswiki/CharacterName -- in this case, https://towersmux.net/towerswiki/Anne_Bowesly. Use underscores (_) in place of spaces. If there's nothing there, select the option to create the page. If there is already content there, then you may need to choose a different name for your character's wiki page. Alternatively, if it's a page for a character who has been retired, idled out, etc., please speak to someone on staff so they can move the old page out of the way.

• One way or another, you should now have a blank editbox. Copy and paste the following:

{{LokiCharPage 
| fullname=Your Character's Name Here
}}
[[Category:Characters]]

Click "Save Changes", and you should see a very basic page with several red links. It probably looks very plain and empty right now, but not to worry: we'll fix that in the next few steps.

• Click the "CharacterName/Infobox" red link, or the "Edit" button in the "Overview" titlebar -- both will accomplish the same thing. Copy and paste the following, changing as appropriate for your character:

{| align="center"
|-
| '''Name:'''
| Your character's full name
|-
| '''Appears In-Game As:'''
| Your in-game character name 
|-
| '''Occupation:'''
| Your character's job
|-
| '''Apparent Age:'''
| How old your character looks
|-
| '''Demeanor:'''
| Your character's Demeanor
|-
| '''Eye Color:'''
| Your character's eye color
|-
| '''Hair Color:'''
| Your character's hair color
|-
| '''Date of Birth:'''
| Your character's date of birth
|}

You don't need to use all of these entries if you don't want to, and you can add more of your own if you like: just follow the same basic format, i.e., each entry should look like this:

|-
| '''A New Entry:'''
| Text of that entry

When you're done, click "Save Changes", and then back out to the main character page. You'll probably need to refresh the page, but once you do, you should see the information you just entered displayed in the "Overview" box. It may be a little squished, but we'll fix that, too.

• Let's do the same for the 'CharacterName/Statistics' red link. This is meant to allow you to point out things that people will know or easily be able to find out about you, so you may not want to include things that aren't easy to find out. It's up to you, though! Copy and paste the following, changing as appropriate to your character:

'''Something Obvious:''' Some text describing it.

'''Something Else Obvious:''' Additional text describing that.

There are other ways to format this information, using dot graphics to visually represent levels of stats rather than using numbers, and so on -- this is just the basics! And, as with all of these entries, you can add as many more as you think are justified. Once you're done, click "Save Changes" and then go back to the main character page and refresh.

• You're probably noticing, at this point, that the text in the "Statistics" box is awfully close up against the box boundaries. If you're happy with that, you can skip the next step. To change it, however, edit the main character page again, and at the top, above the "{{LokiCharPage" entry, add the following:

{{#css:
.header {
  background-color:#34282C; 
  color:#FFFFFF;
  text-align:center;
}
.container {
  background-color:#FFFFFF;
  text-align:left; 
  vertical-align:top; 
  padding:10px;
  margin-bottom:0.5em
}
}}

Then, under the "|fullname=" line, add the following:

| introduction container class = container
| hooks container class = container
| portrait container class = container
| overview container class = container
| disclaimer container class = container
| statistics container class = container
| soundtrack container class = container
| contacts container class = container
| gallery container class = container
| introduction header class = header
| hooks header class = header
| portrait header class = header
| overview header class = header
| disclaimer header class = header
| statistics header class = header
| soundtrack header class = header
| contacts header class = header
| gallery header class = header

This tells the wiki to apply the ".header" formatting instructions to the header for each of the cited boxes, and the ".container" formatting instructions to each of the boxes themselves. If you add additional boxes using the instructions in the Template page, you'll have to add similar entries for them, if you want these formatting instructions to apply to them also.

Save changes and refresh. That should look a little less crowded. If you feel like it's too much space, just lower the "padding" number until it looks right to you. And of course you can also change the "background-color" and "color" entries to suit your taste.

• Possibly by now you have an idea of what your character looks like. Maybe you have a drawing or painting, a piece of AI-generated art, a photograph of someone who resembles them -- something along those lines. If you don't, you can skip this step and come back to it later. If you do, go ahead and click the "CharacterName/Portrait" red link, and enter the following, modified for your character and for whatever format the image you have is in:

[[File:CharName1.jpg|300px]]

Click "Save Changes". You should now see a red link that looks like "File:CharName1.jpg". Click that link, and, on the "Upload File" page, click "Choose File" under "Source File". Navigate to your local copy of the image file, select it, and click "OK"; then click "Upload File". You should see the image and a smaller thumbnail of it. If all looks good, go ahead and back out to the main character page, which should now feature a (probably resized) version of the image in the character box. If it looks too big or too small, you can increase or decrease "300px" until it's right -- although bear in mind that not everyone will be viewing the page on the same screen you are. 300 pixels is usually a good middle ground.

• By now the right side of the page should be looking pretty good, but the right side is a little lonely. Let's demonstrate how to relocate sections of the page by moving the "Soundtrack" section to the right side. Edit the main page, and, under "|fullname=", add:

| soundtrack position=left

You can replace "left" with "right", "top", "bottom", or "off" (don't display the section at all) depending on your preferences. While you're there, if you have a specific person whose image you used in the previous step, you might want to add:

| played by=Name of Person

Click "Save Changes" and refresh.

• By now you probably have a pretty good idea how this is supposed to work, so go ahead and fill in the Introduction, Hooks, Contacts, and Soundtrack sections, too. If you want to link to someone else's entry on TowersWiki, you can do so like this:

[[Anne Bowesly]]

Or, to display something other than the name of the target page:

[[Anne Bowesly|The Prince]]

On the other hand, if you want to link to something off the wiki (like a music video on YouTube, say), use the following format:

<span class="plainlinks">[https://url/to/visit/ Text of link]</span>

You can omit the "<span class="plainlinks">" and "</span>", although doing so will leave an external link icon that may bleed over onto your text. We're looking into ways to fix that particular issue.

• Adding images to the "Gallery" section is much like adding a portrait:

[[File:CharName1.jpg|300px]] [[File:CharName2.jpg|300px]] [[File:CharName3.jpg|300px]]

As with the portrait section, you can vary the size at which the images are displayed by changing the "300px" tags.

• Finally, let's do a little customization of various colors. Edit the main character page, and:

In the .header section, add:

 
  background-color:#800020; 
  color:#C0C0C0;

This will make the headers a rich deep burgundy with silver text, just right for a distinguished elder vampire.

In the .container section, add:

  background-color:#FFFFF0;

This turns the background of the boxes ivory.

Finally, under "|fullname=", add:

| page color=#800020

This makes sure that the borders of the page *outside* the boxes is the same burgundy color as the box headers.

• The above walkthrough barely scratches the surface of the things you can do with MediaWiki in general and with the LokiCharPage template in specific. Be sure to read through the template page itself for more in-depth discussion of its possibilities.