Discourse Formatting Guide

kermit · July 25, 2022, 6:54am

The post editor and the character profile fields both accept a mixture of Markdown, BBCode, and HTML. Markdown uses special characters like *, _, and #, BBCode uses tags in square brackets [ ], and html uses tags in angle brackets < >.

HTML For Dummies

Before diving in, I strongly recommend you check out this superbrief primer on HTML, which I’ve shamelessly stolen from Sophist’s Guide.

Read it here:

HTML is pretty straightforward when it’s doing the job it was designed to do, which is semantically mark up text. You’ve likely done this before with BBcode, and soon this will feel like second nature. The typical form of HTML markup is a string of text wrapped in two opening and closing HTML tags, which looks like this:

<tag>Some text</tag>

We can also nest tags within other tags, like so:

<p>The quick brown <em>fox</em> jumps over the lazy <strong>dog</strong>.</p>

When a browser renders that marked-up text, it looks like this:

The quick brown fox jumps over the lazy dog.

We’ll cover the specific tags you might need to use and what they do in the sections below. For now, here are some general principles to keep in mind:

Most tags work in pairs, with an opening and closing tag that wrap around the text they mark up. The closing tag will start with a forward slash (</tag>). Don’t forget to close your tags!
A few tags, like the line break tag <br />, are self-closing; in these cases, they don’t have a mate and the closing slash goes after the tag name, separated by a space.
You should try to close your tags in reverse order. Think about a tag like wrapping paper. You can wrap a present in as many layers as you want, but you should close up the innermost layer first, and so on outward.
Although browsers are often forgiving of mistakes, you should do your best to make sure that your markup is well formed. Sloppy markup leads to bugs.

Basic Formatting

If you’re familiar with other forums (or even discord), most of the built-in formatting options should be familiar to you. Most, but not all, styles can be achieved using each of the markup languages, and there are a couple variations between them to note. The most common available tags are listed below with their equivalents, where available.

Text Style

Bold

bold text

**bold text**
__bold text__
[b]bold text[/b]
<b>bold text</b>

Another option is <strong></strong>, which you’re technically supposed to use when you want to indicate increased importance, rather than just change the text style.

Italics

italic text

*italic text*
_italic text_
[i]italic text[/i]
<i>italic text</i>

Another option is <em></em>, which you’re technically supposed to use when you want to indicate emphasis, rather than just change the text style.

Underline

underlined text

[u]underlined text[/u]

Strikethrough

strikethrough

~~strikethrough~~
[s]strikethrough[/s]
<s>strikethrough</s>

Note markdown and html will add a ~~subdued~~ color effect.

Font

Fjalla One
Play
Ubuntu Mono
Germania One

[font=Fjalla One]Fjalla One[/font]
[font=Play]Play[/font]
[font=Ubuntu Mono]Ubuntu Mono[/font]
[font=Germania One]Germania One[/font]

Other web safe fonts are available in addition to the ones above that we’ve specifically added.

Font Color

font color

[color=red]font color[/color]

You can use html color names, hex codes (like #239edd), or decimal codes rgb(35,159,221).

Structures & Features

Headings

Heading 1
Heading 2
Heading 3
Heading 4

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>>

Headings 5 and 6 are available as well, but we don't have them specifically styled.

Hyperlinks

Link Text

[Link Text](https://argo.ex-astris.net/)
[url=https://argo.ex-astris.net/]Link Text[/url]
<a href="https://argo.ex-astris.net/">Link Text</a>

Images

![Alt Text](https://i.imgur.com/j0FYrar.png)
[img]https://i.imgur.com/j0FYrar.png[/img]
<img src="https://i.imgur.com/j0FYrar.png" />

Blockquotes

Blockquote Text

> Blockquote Text
[quote="Argonaut"]Blockquote Text[/quote]
<blockquote>Blockquote Text</blockquote>

Note bbcode version works a little differently. It’s indented, and allows you to specify who/what you’re quoting.

Details / Spoilers

Summary

This text will be hidden

[details="Summary"]
This text will be hidden
[/details]

<details>
<summary>Summary</summary>
This text will be hidden
</details>

Note bbcode version works a little differently. It’s indented, and allows you to specify who/what you’re quoting.

Tables

Head 1	Head 2
Cell 1	Cell 2
Cell 3	Cell 4

| Head 1 | Head 2 |
| --- | --- |
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |

<table>
 <tr>
   <th>Head 1</th>
   <th>Head 2</th>
 </tr>
 <tr>
   <td>Cell 1</td>
   <td>Cell 2</td>
 </tr>
 <tr>
   <td>Cell 3</td>
   <td>Cell 4</td>
 </tr>
</table>

Lists

Unordered List:

First Item
Second Item
Third Item

* First Item
* Second Item
* Third Item

[ul]
[li]First Item[/li]
[li]Second Item[/li]
[li]Third Item[/li]
[/ul]

<ul>
 <li>First Item</li>
 <li>Second Item</li>
 <li>Third Item</li>
</ul>

Ordered List:

First Item
Second Item
Third Item

1. First Item
2. Second Item
3. Third Item

[ol]
[li]First Item[/li]
[li]Second Item[/li]
[li]Third Item[/li]
[/ol]

<ol>
 <li>First Item</li>
 <li>Second Item</li>
 <li>Third Item</li>
</ol>

Description Lists

Term A: Description 1A; Description 2A
Term B: Description 1B; Description 2B

<dl>
 <dt>Term A</dt>
 <dd>Description 1A</dd>
 <dd>Description 2A</dd>
 <dt>Term B</dt>
 <dd>Description 1B</dd>
 <dd>Description 2B</dd>
</dl>

The description list on this site defaults to the ‘timeline’ style seen above. An alternative format is available by using <dl class="entry"> as seen below.

Term C: Description 1C; Description 2C
Term D: Description 1D; Description 2D

Finally, there is an option to display the descriptions inline rather than each on its own line. You can use <dl class="entry inline"> to affect the entire list, or <dd class="inline"> to each description to place them inline individually.

Term E: Description 1E; Description 2E
Term F: Description 1F; Description 2F

Code

inline code text

inline `code` text
inline [code]asdf[/code] text
inline <code>asdf</code> text

To create a code block (like the ones showing all the code in this guide!) use these:

```
Code
  Block
```
<pre><code>
  Code
  Block
</code></pre>

You can also create a code block by starting a line in the editor with four spaces . Because of this, using leading spaces to try to create indents in regular text is not recommended.

The interior of these code blocks will respect multiple spaces to create indents and such. You can also specify a coding language to get some highlighting by using ```html or <code class=“html”>. Note though that you’ll have to use > and < in place of < and > respectively, to prevent the tags from actually taking effect inside the block.

Abbreviation (Fancy Label)

These are great for labeling things.
These are often used in transcripts to show who sent a line.


<abbr>These</abbr> are great for labeling things.
<abbr title>These</abbr> are often used in transcripts to show who sent a line.

In addition to triggering the alternate formatting, the title attribute on the second version is used by our discord bot to store timestamps. You may see things like:
<abbr title=“2022-06-27T04:54:57.270Z”>Katriel</abbr> This is a thing Katriel said.

You can also use <span class=“fancylabel”>Label</span> if you want to be pointlessly verbose.

Tooltip

You can add tooltips to your posts!

You can add <span data-tooltip="Tooltips display when you hover over the element.">tooltips</span> to your posts!

Horizontal Rule

--- (three or more consecutive dashes)
<hr /> or <hr>

Extra Line Breaks

You can use a single blank line in the editor to skip a single line, but additional blank lines will be ignored.

The blank line between the previous paragraph and this one was made just by hitting enter twice.

But if you need extra lines, like the ones above this paragraph, you’ll need to use html line break tags: <br /> or <br>. One tag for each line break.

Advanced Formatting

When the basic formatting just isn’t enough, it’s time to turn to some of the more customized solutions available below.

Classes

Classes are pre-defined styles that you can apply to html elements to modify them in some way. You may have noticed a couple of these mentioned in the basic formatting section, but we’ll make much more thorough use of them here.

One of the most important concepts we’ll use is combining classes. To do this, simply put more than one class name into the tag. For example, if you have <div class="MyClass"> and <div class="YourClass">, you can combine them as <div class="MyClass YourClass"> to get the effects of both!

The Argobox

This is a fairly versatile class meant to help simplify and standardize formatting used throughout our IC templates, but it can be used almost anywhere! Argobox will work on most html elements including div, span, and table.

In its most basic form, argobox just puts a pretty box around your content. It's really meant for div and span, but it can also be thrown onto most other elements.

Code:

<div class="argobox">In its most basic form, argobox just puts a pretty box around your content. It's really meant for div and span, but it can also be thrown onto most other elements.</div>

Fancy Tables & class=“columns”

Argobox Tables Are Pretty Fancy
Why?	When placed inside an argobox container, or when the class is applied to the table itself, it takes on this standardized appearance. By default, like default styled tables, only horizontal borders are present.
What if I want vertical borders?	Well then you can easily add them by applying the `columns` class to the container, table, or even just the row.

Code:

<table class="argobox">
 <tr><th colspan="2">Argobox Tables Are Pretty Fancy</th></tr>
 <tr>
  <td>Why?</td>
  <td>When placed inside an argobox container, or when the class is applied to the table itself, it takes on this standardized appearance.<br />
  <br />By default, like default styled tables, only horizontal borders are present.</td>
 </tr>
 <tr class="columns">
  <td>What if I want vertical borders?</td>
  <td>Well then you can easily add them by applying the `columns` class to the container, table, or even just the row.</td>
 </tr>
</table>

Infobox

This is meant primarily to streamline the wiki-style infobox sections on ship profiles, but may have other uses!

Add the infobox class to float an element to the right and apply a fixed width. It will also make some style changes to tables.

These are, of course, combinable with other classes like faction switches and backgrounds.

You can also infoboxes on the left side by adding style="float: left;".

Code:

<div class="argobox infobox">This is meant primarily to streamline the wiki-style infobox sections on ship profiles, but may have other uses!</div>

Crewroster

COMMANDING OFFICER

CAPTAIN
Dolph Inman

EXECUTIVE OFFICER

COMMANDER
James Kermit

COUNSELING

LT COMMANDER
Katriel Sedai

JANITOR

CREWMAN
Scruffy

This addon for argobox creates the crew boxes used on ship record pages. This one is a bit different in that it forces a grid layout. The old table versions had problems on mobile and this is a more responsive solution. It might seem daunting at first, but let’s dive into it! The way it works is you add a div for each crew member and they will be arranged on a grid, filling the horizontal space first and then wrapping to a new line when there’s no more room. Each of these divs (“like cells”) is a fixed width and images inside will resize to fit.

In the first line of the code you’ll see max-width: calc(125px * 4). This, as you might expect, controls how wide the box can be. Simply change 4 to whatever number you want, to change how many crewmembers can be displayed before they start wrapping to a new row. If remove the max-width property entirely, the box will use the entire available width, so that’s an option too.

If you want more precise control over the layout – like placing the CO/XO on a separate line, you can do that by specifying the end of a column. For example, if you add style="grid-column: 2/-1" to the XO’s div, this says it’s starting at column 2 (where the XO is, in our example) and extending to column -1, which is the end of the row. Basically, this forces a line break and the remaining characters will start on the next row.

Code:

<div class="argobox crewroster background" style="max-width: calc(125px * 4);">

<div>
  <small><b>COMMANDING OFFICER</b><br />
  <img src="https://i.imgur.com/DEuS2Ud.png" /><br />
  CAPTAIN</small><br />
  Dolph Inman
</div>

<div>
  <small><b>EXECUTIVE OFFICER</b><br />
  <img src="https://i.imgur.com/GZMnpCp.png" /><br />
  COMMANDER</small><br />
  James Kermit
</div>

<div>
  <small><b>COUNSELING</b><br />
  <img src="https://i.imgur.com/SyWYL2Y.png" /><br />
  LT COMMANDER</small><br />
  Katriel Sedai
</div>

<div>
  <small><b>JANITOR</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  CREWMAN</small><br />
  Scruffy
</div>

</div>

Image Extend

Apply the class extend to an image inside an argobox container to scale the image to fit neatly inside the container, including rounded corners.

Code:

<span class="argobox"><img class="extend" src="https://s3.amazonaws.com/files.enjin.com/229572/modules/wiki/41727869/Saratoga.jpg" /></span>

Background

Adding the background class will add a background!

Code:

<div class="argobox background">Adding the background class will add a background!</div>

Faction Switches

Adding the romulan, klingon, dominion, or neutral classes will adjust the styling to be

specific to that faction

Compatible with most elements that are styled in a ‘starfleet blue’, and the background class.

Code:

<span class="argobox background romulan">specific</span>
<span class="argobox background klingon">to</span>
<span class="argobox background dominion">that</span>
<span class="argobox background neutral">faction</span>

OOC Switch

OOC The ooc class applies this standardized style for representing a section that is meant to be read out of character. Typically added on to an argobox div/span and combined with <abbr>OOC</abbr> at the beginning for extra emphasis as seen here.

Code:

<div class="argobox ooc"> <abbr>OOC</abbr> The ooc class applies this standardized style for representing a section that is meant to be read out of character. Typically added on to an argobox div/span and combined with an OOC abbr at the beginning for extra emphasis as seen here.</div>

Captionbox

This emulates wiki-style caption boxes on articles and ship profiles. Includes formatting for images placed inside the container.

These boxes default to a width of 250px. Use style="width: 250px;" to change the width. The image will auto resize itself to fit. Alternatively, you can use style="width: auto;" and change the size of the image itself.

String them together, or put them into a flex container <div style="display: flex; flex-wrap: wrap;"> to make galleries.

Float them to the right or left to use them alongside content. style="float: right;"

Code:

<div class="captionbox">
<img src="https://s3.amazonaws.com/files.enjin.com/229572/modules/wiki/41727869/Saratoga.jpg" /><br />
This emulates wiki-style caption boxes on articles and ship profiles. Includes formatting for images placed inside the container.
</div>

Mark

The <mark> tag allows highlighting of text, but we’ve hijacked it to streamline some common styling when used inside certain other tags. You can see this in action in the comm and report templates, where mark tags are used to style the ‘labels’ like To/From and Stardate.

To:

It’s also able to be used as a sort of subheader inside a description list with the entry class.

Inside an 'entry' list...: Subheader: This bit to the left was made using <mark>.

Article HR

This is probably the most weirdly specific class on the list, but very simply, <hr class="article" /> removes the margin from the horizontal rule. It’s a shortcut for sticking an hr underneath a header in the wiki-style article posts. It also makes the line faction-colored.

Inline Styles

When all else fails, and you want to style something in a way none of the above methods cover, the last resort is inline styling using CSS. This is an extremely powerful tool, but it requires an understanding that goes beyond the scope of this guide.

We’ve enabled this for a selection of html tags: div, span, img, a, hr, and the table tags table, tr, th, td. If you know what you’re doing, have fun and please use it responsibly.

Character Dossier Standards

Making a pretty character profile is one of the primary reasons to make use of all this knowledge! The sections below will cover some of the profile fields and provide a template that many of us are using.

Note: Inside the character profile all of these fields will automatically adjust to faction-specific colors. No need to add the faction switch classes manually!

Registered Family

Maternal: Mother's name. Job description.
Paternal: Father's name. Job description.
Sibling: Sister's name. Job description.; Brother's name. Job description.

<dl class="entry">
<dt>Maternal</dt>
<dd>Mother's name. <em>Job description.</em></dd>

<dt>Paternal</dt>
<dd>Father's name. <em>Job description.</em></dd>

<dt>Sibling</dt>
<dd>Sister's name. <em>Job description.</em></dd>
<dd>Brother's name. <em>Job description.</em></dd>
</dl>

Where appropriate, I’ll sometimes also use mark tags to draw attention to some status, like <mark>Deceased</mark>.

Career Milestones

2409: Significant career event #1
2410: Significant career event #2; Significant career event #3
2411: Significant career event #4

<dl>
<dt>2409</dt>
<dd>Significant career event #1</dd>

<dt>2410</dt>
<dd>Significant career event #2</dd>
<dd>Significant career event #3</dd>

<dt>2411</dt>
<dd>Significant career event #4</dd>
</dl>

Miscellaneous / Medical History

MEDICAL HISTORY

Physical Health Assessment: Status: OK for active duty; Up to Date: Yes; Evaluator: LT Smith; Notes: Doctor's comments go here
Mental Health Assessment: Status: OK for active duty; Up to Date: Yes; Evaluator: LCDR Tinker; Notes: Shrink's comments go here

<h3>Medical History</h3>

<dl class="entry inline">
<dt>Physical Health Assessment</dt>
<dd><mark>Status:</mark> OK for active duty</dd>
<dd><mark>Up to Date:</mark> Yes</dd>
<dd><mark>Evaluator:</mark> LT Smith</dd>
<dd><mark>Notes:</mark> Doctor's comments go here</dd>

<dt>Mental Health Assessment</dt>
<dd><mark>Status:</mark> OK for active duty</dd>
<dd><mark>Up to Date:</mark> Yes</dd>
<dd><mark>Evaluator:</mark> LCDR Tinker</dd>
<dd><mark>Notes:</mark> Shrink's comments go here</dd>
</dl>

Award Ribbons Display

This bit of code will produce a pretty “ribbon rack”-type display. You can put it anywhere you like, though my personal preference is at the top of the career milestones section.

CAPT Yourname, Here
AB-123-4567 CDE

<div class="argobox ribbons">

[img]BADGE URL HERE[/img]
[img]RANK URL HERE[/img]

CAPT Yourname, Here
AB-123-4567 CDE
<br />

[img]RIBBON URL HERE[/img]

[img]RIBBON URL HERE[/img][img]RIBBON URL HERE[/img]

[img]RIBBON URL HERE[/img][img]RIBBON URL HERE[/img][img]RIBBON URL HERE[/img]
</div><hr />

The first line creates the centered box and the outline. If you don’t want the outline, you can remove the argobox class and the rest will still work. You can also add the faction switch classes for other colors.

The next several lines create nametag section - the division badge, rank image, name, and service number. You can adjust, move, or remove parts of this section as you see fit, as long as it remains above the <br /> tag. If you want to remove this section entitrely to display only the ribbons, delete down to and including the br.

Badge and Rank images can be found in this album: Argo Rank Images.

The remainder of the code is the actual ribbon display. The code box above has three rows of ribbons, with one, two, and three ribbons per row. Edit/copy/paste as needed to suit your character’s number of awards and your preferred organization. The “standard” is rows of three with any remainder at the top, placed in the same order as on the Awards page.

Award Ribbon images can be found in this topic: Awards & Medals

The last line closes the box and adds a horizontal line below it to separate it from whatever follows. Delete the <hr /> tag if you don’t want the separator line.

Gettin’ Fancy

Here's the same template using HTML instead of BBCode for the images:

<div class="argobox ribbons">

<img src="BADGE URL HERE" />
<img src="RANK URL HERE" />

CAPT Yourname, Here
AB-123-4567 CDE
<br />

<img src="RIBBON URL HERE" />

<img src="RIBBON URL HERE" /><img src="RIBBON URL HERE" />

<img src="RIBBON URL HERE" /><img src="RIBBON URL HERE" /><img src="RIBBON URL HERE" />
</div><hr />

The HTML version works the exact same way, except you can do some extra fancy stuff with the images. For example, you can add a title to each image so that hovering the mouse over the ribbon will display the award name.

<img src="https://i.imgur.com/GlOut4c.png" title="Starfleet Medal of Commendation" />

If you wanna get really really fancy, you can wrap each image in a span and add a tooltip, instead of a title.

<span data-tooltip="Starfleet Medal of Commendation"><img src="https://i.imgur.com/GlOut4c.png" /></span>

Here's Some Examples:

This uses the code above, just filling in the images and arranging the ribbons:

If you prefer you can move the badge down to sit just above the ribbons:

This one leaves out the box, divider, and the ‘nametag’ section and only shows the awards:

This fancy one is in the miscellaneous section, has its own header, and uses titles to show award name and count:

This was the original mini-profile thing I made using this format that included a little dossier picture as well. Add the picture above the rank (use 100x133 for best result) and move the badge down above the ribbons.

Portrait Template

Here’s the most recent photoshop template for the fancy portrait pictures. Now with a rounded corner to match the dossier page!

Portrait Template 2023.psd (2.9 MB)

If you don’t have photoshop or you just don’t feel up to tackling this yourself, you have a couple options:

Ask your fellow fleetmates! Throw a shout into discord and see if anybody’s free to help you out. This can be hit-or-miss, but when it hits, it’s probably the fastest option.
Open a ticket on discord, and I or another staff member will hook you up. Reliable, but you might have to wait a little bit if we’re busy!
You don’t have to use the template! The photo link field on the character profile will accept any image url, so you can use a regular screenshot or whatever you have.

That said, the standardized portraits are super cool and I think you’ll be 1000% glad you got one, if you do!

Ship Record Templates

Unlike character dossiers, ship records are just posts in the ship records category, so we have to design them from the ground up. These templates are meant to help you get started, but please don’t feel limited to them.

Simple Ship Record

This basic ship record template includes a spot at the top for a single large image/screenshot of your ship (which you can delete if you don’t want) and a single text area to write about your ship. There are sections at the end for crew and specifications, along with places to put a ship’s patch and an MSD, if available.

For an example of this style ship record, see USS Atlantis.

Code:

[img]https://i.imgur.com/VH5quQF.png[/img]
  [size=200][font=Fjalla One][color=white]U.S.S. ENTERPRISE[/color][/font][/size]
[img]YOUR_SHIP_IMAGE.JPG[/img]

---

The **USS Enterprise (NCC-1701)** was a very famous ship. It did many awesome things, and they made a TV show about it.

This is where you talk about your ship and its history and anything else you want.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

[img]https://i.imgur.com/yHR2DMC.png[/img]

<div class="argobox crewroster background" style="max-width: calc(125px * 4);">

<div>
  <small><b>COMMANDING OFFICER</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  CAPTAIN</small><br />
  James T. Kirk
</div>

<div>
  <small><b>XO/SCIENCE OFFICER</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  COMMANDER</small><br />
  Spock
</div>

<div>
  <small><b>CHIEF MEDICAL OFCR</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LT COMMANDER</small><br />
  Leonard McCoy
</div>

<div>
  <small><b>CHIEF ENGINEER</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LT COMMANDER</small><br />
  Montgomery Scott
</div>

<div>
  <small><b>HELMSMAN</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LIEUTENANT</small><br />
  Hikaru Sulu
</div>

<div>
  <small><b>COMMUNICATIONS</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LIEUTENANT</small><br />
  Nyota Uhura
</div>

<div>
  <small><b>HELMSMAN</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  ENSIGN</small><br />
  Pavel Checkov
</div>

</div>

---

[img]https://i.imgur.com/IYLA8gn.png[/img]

<table class="argobox infobox background" style="float: left;">
 <tr>
  <td>
   Class:<br />
   Registry:<br />
  </td>
  <td>
   Constitution Class<br />
   NCC-1701<br />
  </td>
 </tr>

 <tr>
  <td>
   Length:<br />
   Beam:<br />
   Draft:<br />
   Mass:<br />
  </td>
  <td>
   288 m<br />
   127 m<br />
   72 m<br />
   190,000 mt<br />
 </td>
 </tr>

 <tr>
  <td>
   Decks:<br />
   Crew:<br />
   Capacity:<br />
  </td>
  <td>
   23<br />
   430<br />
   225<br />
  </td>
 </tr>

 <tr>
  <td>
   Avg. Cruise:<br />
   Max Cruise:<br />
   Top Speed:<br />
  </td>
  <td>
   Warp 6<br />
   Warp 7<br />
   Warp 8 (for 20 hours)<br />
  </td>
 </tr>

 <tr>
  <td>
   Armaments:<br />
  </td>
  <td>
   7x Dual Phaser Banks<br />
   2x Photon Torpedo Launchers<br />
  </td>
 </tr>
</table>

<img src="PATCH_OR_SOMETHING_HERE.PNG" style="height: 250px; width: auto;" />

<div class="captionbox" style="width: auto;">
<img src="MSD_IMAGE_HERE.JPG" /><br />
Constitution Class Master Systems Display</div>

Detailed/Wiki Style Ship Record

This record is much fancier, with the tradeoff obviously of being more complex. It’s meant to be sort of in the style of a wikipedia article. There’s kind of a lot going on, so I recommend taking a peek at the relevant sections earlier in this guide, and checking out what it’s supposed to look like on a live record of this type, before starting.

For an example of this style ship record, see USS Saratoga.

Code:

# [color=white]U.S.S. Enterprise[/color]
<hr class="article" />
<div data-theme-toc="true"> </div>

<table class="argobox infobox background">
 <tr><th colspan=2>USS Enterprise</th></tr>
 <tr><th colspan=2>
    <img src="IMAGE_OF_SHIP.JPG" />
 </th></tr>
 <tr>
  <td>
   Class:<br />
   Registry:<br />
   Owner:<br />
   Operator:<br />
   Status:<br />
  </td>
  <td>
   Galaxy Class<br />
   NCC-1701-D<br />
   United Federation of Planets<br />
   Starfleet<br />
   Destroyed<br />
  </td>
 </tr>
 <tr><th colspan=2>
   <img src="SECOND_SHIP_IMAGE.PNG" />
 </th></tr>
</table>

The **USS Enterprise (NCC-1701-D)** was an awesome ship and it deserves an awesome short intro summary paragraph like this one!.




# History
<hr class="article" />

This Enterprise was bigger and fatter than the original, and inexplicably carried civilians and children, even when expecting danger! It did lots of exploring, plenty of posturing with Romulans, and violated the Prime Directive a whole bunch of times!

Eventually, some Klingon Academy dropouts teamed up with Dr. Monty on a ninety year old junker and blew up the Enterprise with one shot. Well, half of it. Troi crashed the other half.




# Technical Data
<hr class="article" />

## Physical Arrangement & Crew Support

<table class="argobox infobox background" style="float: left;">
 <tr><th colspan=2>Specifications</th></tr>
 <tr>
  <td>
   Length:<br />
   Beam:<br />
   Draft:<br />
   Mass:<br />
  </td>
  <td>
   642 m<br />
   463 m<br />
   195 m<br />
   4,500,000 mt<br />
  </td>
 </tr>
 
 <tr>
  <td>
   Decks:<br />
   Crew:<br />
   Capacity.:<br />
  </td>
  <td>
   42<br />
   1,012<br />
   15,000<br />
  </td>
 </tr>
 
 <tr>
  <td>
   Avg. Cruise:<br />
   Max Cruise:<br />
   Maximum Speed:<br />
  </td>
  <td>
   Warp 6<br />
   Warp 9.6<br />
   Warp 9.8 (for 12 hours)<br />
  </td>
 </tr>
 
 <tr>
  <td>
   Armaments:<br />
  </td>
  <td>
   12x Type-XII Phaser Arrays<br />
   3x Photon Torpedo Tubes<br />
  </td>
 </tr>
 
 <tr>
  <td>
   Defenses:<br />
  </td>
  <td>
   Deflector Shields<br />
  </td>
 </tr>
 
 <tr>
  <td>
   Auxiliary Craft:<br />
 </td>
 <td>
   8x Shuttlecraft<br />
   8x Shuttlepods<br />
   4x CMU Workbees<br />
   1x Integrated Yacht<br />
  </td>
 </tr>
</table>

A description of your ship's specs should go here. This can typically be found on the Memory Alpha (or Beta, if you're brave) page for your ship's class. Any differences from class default specs should be noted.

<div class="captionbox" style="width: auto;">
<img src="MSD_IMAGE_HERE.JPG" /><br />
Galaxy Class Master Systems Display</div>




## Subheader 1
<div class="captionbox" style="float: right; width: 200px;">
<img src="SOME_IMAGE_HERE.JPG" /></a><br />
Sovereign Class Bridge Layout
</div>

You can get as detailed as you want by adding subheaders. Often players will use these to define the various systems of the ship. The code just above this paragraph creates a box to the right with an image.


## Subheader 2
You can add as many of these headers as you want, with or without the associated image. As you can see, this one doesn't have the captionbox code!




# Personnel
<hr class="article" />

<div class="argobox crewroster background"">

<div>
  <small><b>COMMANDING OFFICER</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  CAPTAIN</small><br />
  Jean-Luc Picard
</div>

<div style="grid-column: 2/-1;">
  <small><b>EXECUTIVE OFFICER</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  COMMANDER</small><br />
  William Riker
</div>

<div>
  <small><b>OPERATIONS OFFICER</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LT COMMANDER</small><br />
  Data
</div>

<div>
  <small><b>CHIEF ENGINEER</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LT COMMANDER</small><br />
  Geordi LaForge
</div>

<div>
  <small><b>CHIEF OF SECURITY</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LIEUTENANT</small><br />
  Worf
</div>

<div>
  <small><b>CHIEF MEDICAL OFCR</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  COMMANDER</small><br />
  Beverly Crusher
</div>

<div>
  <small><b>COUNSELOR</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  LT COMMANDER</small><br />
  Deanna Troi
</div>

<div>
  <small><b>PUNCHING BAG</b><br />
  <img src="https://i.imgur.com/IINqVng.png" /><br />
  ENSIGN</small><br />
  Wesley Crusher
</div>

</div>




<h1>Gallery</h1>
<hr class="article" />

<div style="display: flex; flex-wrap: wrap;">

<div class="captionbox" style="width: 300px;">
<img src="SOME_IMAGE_HERE.JPG" /><br />
If you have screenshots of your ship that don't fit elsewhere...</div>

<div class="captionbox" style="width: 300px;">
<img src="SOME_IMAGE_HERE.JPG" /><br />
You can make a gallery for them like this one.</div>

<div class="captionbox" style="width: 300px;">
<img src="SOME_IMAGE_HERE.JPG" /><br />
If you don't need it, you can just delete this whole section.</div>

</div>



<h1>References</h1>
<hr class="article" />

* Be sure to include 
* any sources you used
* here at the end!

Faction-Specific Ship Record

Just kidding! There’s no template needed here. Simply use one of the other templates and wrap the whole thing in a faction switch div.

Add <div class="romulan"> as the first line of your post, add a blank like, then paste in the rest of the template. Add </div> as the very last line to close it out, and that’s that! Obviously, sub out romulan for klingon or dominion as appropriate.

You can grab faction-specific headers from here, as well: LCARS Headers

Discourse Formatting Guide

HTML For Dummies

Basic Formatting

Text Style

Bold

Italics

Underline

Strikethrough

Font

Font Color

Font Size

Structures & Features

Headings

Hyperlinks

Images

Blockquotes

Details / Spoilers

Tables

Lists

Description Lists

Code

Abbreviation (Fancy Label)

Tooltip

Horizontal Rule

Extra Line Breaks

Advanced Formatting

Classes

The Argobox

Fancy Tables & class=“columns”

Infobox

Crewroster

Image Extend

Background

Faction Switches

OOC Switch

Captionbox

Mark

Article HR

Inline Styles

Character Dossier Standards

Registered Family

Career Milestones

Miscellaneous / Medical History

Award Ribbons Display

Portrait Template

Ship Record Templates

Simple Ship Record

Detailed/Wiki Style Ship Record

Faction-Specific Ship Record