Name
This page was made by {name}!
Character Name | |
|---|---|
|
| |
Biographical Info | |
| Full Name | xyz |
| Aliases |
one
two |
| Pronouns | xyz |
| Age of Arrival | xyz (YEAR) |
| Species | xyz |
| Origin | xyz |
| Status | Active/Inactive/Missing/etc |
Afterlife Info | |
| Circle | xyz (Heaven/Hell) |
| Affiliations | xyz |
| Abilities | xyz |
Meta Info | |
| Player | xyz |
This is an example of a real link. This is an example of a redlink that doesn't go anywhere. You can adjust the colors of these (and everything else in the template) by going into the CSS file and changing the color variables at the top of the file.
Table of Contents
Appearance
So! I looked at wikis to figure out what slots pages have. This one was pretty common, so was everything else. If you want to erase any of them, just pay attention to the code comments, between <\!---\-> (without the backslashes) in the code. If you use a specialized text editor which I hope you do they usually show up in different colors.
Personality
I kept a lot of the comments from the original template. You can copy and paste and modify things until they look right.
History
This code has two mobile responsiveness breakpoints: one at 1000px and one at 576px. The sidebar goes on top on small screens. On desktop, you can test this by resizing the window. You should delete this paragraph, probably, by the way...
Pre-Death
The table of contents is open by default. You can make it closed by default by removing the word open from the tag.
This is a static template, so you'll have to set up the table of contents on each page manually. Add an id="headername" to each header in your code, then add a corresponding link with href="#headername" to the table of contents. IDs cannot contain spaces or begin with a number.
There's no elegant way to make sub-ordered-lists appear like 1.1, 1.2, etc. in HTMLCSS. On MediaWiki sites, they just auto generate the numbers right onto the page, which is messy and not ideal for a static site. You'll have to make do with a/b/c, sorry.
Post-Death
Most things in this code (the notice boxes, floating images, infoboxes, etc.) can be dropped into your page wherever you want with minimal issues. Just copy and paste.
Relationships
There are some utility classes in the CSS:
- Adding .text-center to anything centers the text
- Adding .text-big to anything makes the text big
- Adding .redlink to <a> makes it red (see above)
- See below for effect of .clear-both
We can write the relationships kind of, like:
- Character Name: description of relationship.
- Character Name: and then copy and paste over and over.
Abilities
- By the way, this is how you make lists with no numbers. The ul tag is a requirement, yeah.
Trivia
- Let's also use bulletpoints here. I think it's the best way to display the information...
Gallery
Make sure any <h2> elements directly under a section with a right-floating image have the class "clear-both" applied. This makes it "clear" any floating elements and appear below them, to avoid display weirdness on large screens.
(NEW) This code now contains gallery rows - see below for an example. If you're already using this theme, you can use "view page source" to grab the HTML/CSS for the gallery, and drop them into your code.