Formatting



[Jump to End]

Style Guide

A style guide describes the page layout of a web site to provide a consistent appearance and experience. These are 'guidelines', not hard and fast rules. They may be ignored to the extent the information to be conveyed requires it, but every effort should first be made to adhere to them if possible.

  • When editing a page, please put a description of the additions or changes being made into the 'Description' field in the lower-left corner of the edit page. These descriptions appear on the 'Recent Changes' page and make it easier for everyone to understand what has changed.
  • It is better to submit a number of limited changes than one massive one, as it is easier to revert or adjust small changes limited in scope if necessary.
  • The Navigation Panel should only display Section Labels (in all capital letters) and have main topics (capitalized, mixed case) linked to each 'main topic page'. Sub-topics should be accessed from the Table of Contents (ToC) on the main topic page, not the navigation panel. This is because the navigation panel does not make the distinction between levels of topics clear. At present, TESTG has only four Section Labels on the Navigation Panel: ELDER SCROLLS GAMES, GENERAL INFORMATION, UTILITIES, and SITE MANAGEMENT. Everything else is a main topic link, or in the case of 'Add a new page', a template link.
  • Each Main Topic page should be linked from the Navigation Panel.
  • If there is more than one display screen (25 lines) of information, consider dividing it into sub-topics. If there is more than one sub-topic on a topic page, use a 'Table of Contents' (ToC). This makes it easier for navigating to the desired information.
  • If a sub-topic needs it's own page to convey it's information, make the sub-topic label on the main topic page into an internal link to the sub-topic page, with a short description of the nature of the sub-topic on the main page below the label/link. A sub-topic with it's own sub-topics, or more than one display screen (25 lines) of information probably belongs on it's own page.
  • Each entry in a ToC, and each sub-topic, should have an anchor placed just above the label/link. In order to ensure each anchorname is unique, it should have a format conforming to the pattern: <pagename-anchorname>. Replace any colons (:) in the <pagename> with an underscore (_).
  • The Wiki automatically places an unseen 'toc' anchor above each ToC, but it is a good practice to place your own unique anchor as well. This anchor name should be used for "Back to Top" anchor links at the end of each sub-topic section and the bottom of each topic page, for internal navigation purposes, and can be used for navigation between site pages. Internal page navigation is via the ToC and 'Back to Top' anchor links.
  • Each sub-topic page should be linked to a main topic page through the 'Parent' option. This can be done directly when creating the 'new page' by naming the new page: <parent-pagename>:<new-pagename>, or after creation by expanding the 'Options' button at the bottom-right of the page, followed by selecting the 'Parent' button. For instance: info:formatting creates the page 'formatting' with the page 'info' as it's parent.
  • By design, this site contains a large number of links to external site files, and a goal is to have a screenshot to illustrate the nature of the files purpose. Most of the time these file links should be presented in tables, organized by categories of subject matter. In those instances where only a few file links are presented, they may be included in descriptive paragraphs if that is felt to be a more appropriate method. In general, 'a few' would be less than five. Where screenshots will be attached to the file link, tables should be used even if it means essentially duplicating the descriptive narrative portion.
  • Images in file link tables can be displayed as thumbnails only if the image is hosted on this Wiki. Image links to external sites will always display full size.


[Back to Top]
[Jump to End]

Creating/Editing a Page

When you create a new page or edit an existing one, you get a spiffy editor to help with the formatting. This Wikidot page also has a handy list of formatting tags. There are some things, however, that are more easily explained here.

[Back to Top]
[Jump to End]


Paragraphs

By default, Wikidot double-spaces paragraphs (that is, it adds a line of white space between each one), and doesn't indent. I added custom CSS to this site to eliminate that, and to automatically indent - all you need to do is hit return at the end of each paragraph like normal.

Wikidot also allows for line breaks (as in, a line that cuts off all formatting; the next line after that will not be indented - it's great for things like headings, where you don't want them indented). A line break is a simple underscore with a space in front of it:

" _" (quotation marks are just to show the blank space. Do not include them in actual use.)

Be sure you don't add a space after it, or Wikidot will think you're adding a normal underscore.

Unfortunately, Wikidot didn't add a method for indenting paragraphs, so I had to invent one. If you look at the code for some pages, you'll probably see [[div class="indent"]] and [[/div]] tags. This is, again, part of the custom CSS; it allows me to indent paragraphs after a line break. The proper format for this is:.



[[div class="indent"]]

Text of the paragraph.[[/div]]


Note the placement of the tags: the first one must go *above* the paragraph, and the second *after* the paragraph, or it won't work properly. You also only need it for the first paragraph in any block of text; after that, the normal CSS takes over until you add another line break.

This can also act as a line break, but without removing the formatting. I add one at the top of every page because the normal line break doesn't work for some reason, and if there's no line break at the top, the text is crammed up right under the navigation links. So if you create a new page, don't delete that - just start adding text below it.

[Back to Top]
[Jump to End]


Topics and Sub-Topics

So they stand out, topics and sub-topics should be placed within size large tags, as in:


[[size large]]Topic[[/size]]

When the topic is to be added to a Table of Contents, put a '+ ' symbol before the large size tags, as in:


+ [[size large]]Topic[[/size]]

Additional '+' symbols will cause the sub-topic to be indented in the ToC, but not on the page itself, as in '++' will cause a single level of indentation in the ToC compared to topics with only a single '+' symbol. You can use the [[div class="indent"]] and [[/div]] bracketing the sub-topic entry to indent it on the page. For example:


[[div class="indent"]]
+ [[size large]]Topic[[/size]]
[[/div]]

indents the "Topic" on both the ToC and the page.

[Back to Top]
[Jump to End]


Links and Anchors

Links are pretty easy to do in the editor; if you want to type them manually (because it's faster), you just type the appropriate number of [square brackets] and the link data.

External site pages:
This is for links to another website, like TES Nexus. Please don't link directly to a file. Link to that sites download page for the mod so any updates, instructions, and requirements can be seen before actually downloading:
[<URL-name> <visible text>]
Note the space between the URL and the visible text, i.e.
[http://testg.wikidot.com/info:formatting This page] displays as
This page
Internal site pages:
Come in two flavors: simple and compound. Both jump to the top of the destination page.
  • Simple internal links use three brackets and a bar between the link and the text:
    [[[<internal page-name>|<visible text>]]] , i.e.
    [[[main|Home page]]] displays as
    Home page
  • Compound page names are separated by a semi-colon(:), but otherwise have the same structure:
    [[[<parent page-name>:<child page-name>|<visible text>]]] , i.e.
    [[[info:formatting|This page]]] , which still display just as:
    This page
Site anchors:
You can also link to an anchor, of which there can be any number and anywhere on the page. Anchors are not visible unless you are viewing the source (under "Options" at the bottom of the page). In order for an anchor to work, though, you must insert the following code somewhere near the entry you want to link to (on the line above is best, to keep things clean):
[[# <anchor-name>]]
Note the space between the hash (#) and the <anchor-name>.
  • To link to an anchor on the current page, use this:
    [[#<anchor-name> <text to display>]]
    Note the space between the hash (#) and the <anchor-name> is gone and one has been added between the link and the text. As an example,
    [[#info_formatting-Top Back to Top]] is used everywhere on this page for internal page navigation and appears as:
    [Back to Top]
  • It is also possible to combine a link to another internal page with an anchor, to jump directly to the anchor location on the destination page. In this instance, a vertical bar must replace the separating space between the '<anchor-name>' and the '<display-text>':
    [[[<parent_page>:<child_page>#<anchor-name>|<display-text]]] , i.e.
    [[[info:formatting#info_formatting-Links|Links]]] , jumps to the top of this section on this page (the same as if it were another page) and displays as:
    Links


One final note: Links must be case-sensitive! Microsofts Internet Explorer (IE) doesn't care one way or another, but some other browsers like Firefox do, so make sure the capitalization in the link matches the page name. Plus, it just looks better.

[Back to Top]
[Jump to End]


Images

Inserting images works pretty much like making a link - you have to upload a file or have a picture somewhere else to link to. Use the Files button on the bottom of a page to upload to this site. The format I use is:

[[image source size="square" title="sometitle" alt="alt text"]]

[[div class="indent"]]
Image: This tells the wiki that you're using an image. It's a required tag.

Source: This is the filepath to the image. If you upload it to the same page as the link, you'll just need the filename; if on another page, use the form /page name/filename.jpg (i.e. /oblivion:lods/test.jpg). If it's on another site, like Imageshack, you'll need the entire link. If you have Flickr, you can use a shorthand code: flickr:IDnumber. Again, kind of required. Only use JPG files to save space.

Size: Square is a thumbnail size (75x75), which I've found is best. Necessary, or the image won't show up. Only appears as a thumbnail if the image is attached to a page on this site.

Title: The title that appears if the image doesn't show up. Totally optional, but I like to add it anyway.

Alt: Alt text. Description of the image for a screen reader. Again, optional, but I like to add it too.

[Back to Top]
[Jump to End]


Include Pages (Label links to full description page.)

Often there is some identical information or code that is used in multiple pages (commonly called boilerplate). Standardization and consistency is ensured by "including" pages that already have that information prepared. Calling parameters can be used to adapt the boilerplate to each specific page. This process is described on the linked page. It also contains a list of prepared Include Pages specific to this site.

[Back to Top]

Return to General Information page

Back to General Information

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License