memory alpha
Help Contents → Sidebars

Sidebars, sometimes called infoboxes, are like fact sheets, or sidebars in magazine articles, designed to present a summary of the topic of the page. No matter what they're called, they present important points in an organized and quickly readable format. The sections of an sidebar are usually the same from article to article to create consistency across Memory Alpha. Sidebars are made with templates.

A new way to code sidebars, called portable infoboxes, was created by Fandom to enable them to display properly across different devices. There are no changes to how you use a sidebar on an article – instead, the changes affect how it is written on a template page.

Step by step

Memory Alpha has a large number of built-in sidebar templates that can be customized to fit the style and content and topic of an article. Here's how to get started.

You can add a sidebar to an article the same way as you would any other template – either via the editor's built-in template tools, or through the editor's source mode. In the latter case, you would generally start by copying the syntax from the template's documentation, normally found towards the bottom of the template's page, and pasting it into an article, changing the words after the equals signs to provide the desired information. For example: 

{{sidebar starship
|image      = ISS Avenger.jpg
|Name       = ISS ''Avenger''
|Class      = {{Class|NX}}
|Registry   = NX-09
|owner      = [[Terran Empire]]
|operator   = {{mu|Starfleet}}
|Status     = Destroyed
|Datestatus = 2155
|image2     = ISS Avenger explodes.jpg
|imagecap2  = ISS Avenger destroyed
|Logo       = ISS Avenger assignment patch.png
}}

You can adjust the code that manages your sidebar by editing the source of your sidebar. With portable infoboxes, this works just the same as with any other template. However, the template page markup is a little different, as detailed below.

MediaWiki standard sidebars

Customizing stardard sidebars

When you start a new wiki, there are already some infoboxes created with some default parameters. Chances are, those aren't going to be exactly the parameters you need. So, how do you customize them to suit your wiki?

First, you need to know how not to customize an sidebar. Many new users mistake the code in the section above for the code which creates the sidebar, but the trouble with this is that that code isn't for creating a sidebar, but for calling one for use on another page. That code basically says "I want to take the contents of 'Template:Sidebar starship' and put it on this page, and I want to fill in these attributes with this information". It doesn't give the information to create the template itself, but rather brings the code for the template which is stored elsewhere to the page you're putting it on.

Let us look at how to customize the most basic of sidebars; the one which goes by the name of Template:Infobox on every new wiki. It works the same with all the other sidebars, but this one's the easiest to start with.

Go into edit mode and you will see a lot of code on the page. If you're reading this, chances are a lot of it won't make any sense to you, and for the most part you can ignore those bits. You just need to focus on this part of the template: 

|-
! colspan="2" | <div class="wikia-infobox-section-header">Some attributes</div>

|-
! First
| {{{first|''Unknown''}}}

|-
! Second
| {{{second|''Unknown''}}}

|-
! Third
| {{{third|''Unknown''}}}

|-
! colspan="2" | <div class="wikia-infobox-section-header">Other attributes</div>

|-
{{#if: {{{fourth|}}} |
! Fourth
{{!}} {{{fourth}}}
| }}

|-
{{#if: {{{fifth|}}} |
! Fifth
{{!}} {{{fifth}}}
| }}

|-
{{#if: {{{sixth|}}} |
! Sixth
{{!}} {{{sixth}}}
| }}

First, Second, Third, Fourth, Fifth, and Sixth are all place-holder names ready for you to change them to whatever you want, while "Some attributes" and "Other attributes" are also place-holder heading names which you can change at will. But let's start with changing the default attributes.

These are the attributes that above follow this format: 

|-
! First
| {{{first|''Unknown''}}}

The First that is capitalized is the name that will appear beside the attribute once the page is published, and the first which is uncapitalized is the name of the attribute as you place it in the code to put it on a page. You can change these to anything you want, and the same goes for Second/second and Third/third. Let's give an example: 

|-
! Date of Birth
| {{{dob|''Unknown''}}}

That specific piece of code there could be called by doing the following: 

{{Infobox
 | dob        = 11/23/1963
}}

Which will look like this:

Unknown
Some attributes
Date of Birth 11/23/1963
Other attributes


Like how the First, Second, and Third attributes are currently lined up, you can add more default attributes by copy/pasting that structure and just changing the place-holder names to the names you want, e.g.: 

|-
! colspan="2" | <div class="wikia-infobox-section-header">Some attributes</div>

|-
! Date of Birth
| {{{dob|''Unknown''}}}

|-
! Place of Birth
| {{{birthplace|''Unknown''}}}

|-
! Occupation
| {{{occupation|''Unknown''}}}

|-
! Family
| {{{family|''Unknown''}}}

After the default attributes are the ones that are only included if they are relevant to the page they're being put on. Let's say that some of your characters go by nicknames and you want to put an alternative name attribute in the sidebar, but not all characters have alternative names so you don't want to have the attribute shown on all pages. That's when you alter the attributes that look like this: 

|-
{{#if: {{{fourth|}}} |
! Fourth
{{!}} {{{fourth}}}
| }}

As in the previous examples, the capitalized Fourth is the name which will appear beside the attribute, and the lowercase fourth is the one with which you tell the template what information to use. In this case, however, you need to make sure that whatever you put in the first lowercase fourth's position is exactly the same as you place in the second lowercase fourth's position, for example: 

|-
{{#if: {{{aka|}}} |
! Also Known As
{{!}} {{{aka}}}
| }}

These are called the same way as the other attributes, but if there is no information given, they just simply won't show up. You can put them anywhere the other kind of attribute can go, in any order or mixture.

The final things are the "Some-" and "Other attributes" which are in the headings of each section of the sidebar. Just change those names to whatever you want, leaving the rest of the code in place. You can also take the second one out if you don't need it, or add a third in by copying the code of the first two and pasting it where needed, changing the name as you please.

So let's put this all together to see what we've got. The original part of the template now looks like this: 

|-
! colspan="2" | <div class="wikia-infobox-section-header">Basic info</div>

|-
{{#if: {{{aka|}}} |
! Also Known As
{{!}} {{{aka}}}
| }}

|-
! Date of Birth
| {{{dob|''Unknown''}}}

|-
! Place of Birth
| {{{birthplace|''Unknown''}}}

|-
! Occupation
| {{{occupation|''Unknown''}}}

|-
! Family
| {{{family|''Unknown''}}}

Because we left the other parts alone, there are also some things there which can be called in the template. The above, when combined with the remaining template, would be called like this: 

{{Sidebar
 | title          = Maury Ginsberg
 | image          = Maury Ginsberg.jpg
 | imagecaption   = 
 | imagewidth     = 
 | aka            = The Orthodontist
 | dob            = 15 July, 1970
 | birthplace     = Gallifrey
 | occupation     = Scientist
 | family         = Susan (granddaughter)
}}

and look like this:

Maury Ginsberg
Maury Ginsberg
Basic info
Also Known As The Doctor
Date of Birth 23 November, 1963
Place of Birth Gallifrey
Occupation Scientist
Family Susan (granddaughter)

Congratulations! You have just customized your first sidebar! Changing how the sidebar looks requires CSS, which you can learn more about here or here.

Advanced customization for standard sidebars

Archivists and administrators on Memory Alpha have created many elaborate sidebars with advanced custom CSS and template code work. All code is publicly available, so you can simply look at their template files to see how they created it, and borrow ideas for your own sidebars.

If you need help with technical details, you can ask for advice from other Archivists who've edited sidebars successfully before, or raise a question in Ten Forward.

Portable sidebars

Customizing portable sidebars

First, start new template with any name you like – Template:ExampleSidebar, for example. While in the past we would have used tables and divs, we can now use infobox tags. We'll begin with a basic "stacked" sidebar, with a title and an image: 

<infobox layout="stacked">
 <title source="name"><default>{{PAGENAME}}</default></title>
 <image source="image" />
</infobox>

This wikitext will tell your template to use name and image variables for title and image elements. Additionally you can provide the default tag, whose value will be used when a user does not specify a name/image/etc. on the article.

Now we just need two more fields containing additional information, so let's add one: 

<data source="season"><label>Season(s)</label></data>

After adding one last field with source set to first and label to First seen, we end up with the following: 

<infobox layout="stacked">
 <title source="name"><default>{{PAGENAME}}</default></title>
 <image source="image" />
 <data source="season"><label>Season(s)</label></data>
 <data source="first"><label>First seen</label></data>
</infobox>

We can now use the template in an article, inserting the following parameters to get a working sidebar: 

{{ExampleSidebar
 |name   = Eddard Stark
 |image  = eddard.jpg
 |season = [[Season 1|1]]
 |first  = "[[Winter is Coming]]"
}}

Styling and display

Sidebars using this kind of code are automatically styled, taking cues from Memory Alpha's custom theme. If any of the variables are empty, the relevant row of the template will not be displayed (unless the 'default' tag has been used).

Layout options

Two alternative layout options are available for sidebars: 

<infobox>
   ...
</infobox>

<infobox layout="stacked">
   ...
</infobox>
Custom theming

Default sidebar theming can be overwritten using either theme or theme-source attributes of the infobox tag, allowing sidebars to be styled via Memory Alpha's custom CSS.

If both attributes are used inside the infobox tag, the theme attribute is treated as the default. Note that spaces in the values of theme and theme-source are converted to hyphen-minuses (-), so only a single class may be added using them.

For lots more information about how to theme an sidebar, including detailed guides, check out Sidebars/CSS.

Advanced usage

Now, that you have created a simple sidebar, you can learn how to use more advanced fields. In this section we are going to build the sidebar shown on the right.

Multiple ordering options for simple tags

There are three data fields, then title and image fields. As you can see, the title field does not have to be the first field, though you can only use it once per sidebar. 

<infobox layout="stacked">
 <data source="prev"><label>Previous</label></data>
 <data source="conc"><label>Concurrent</label></data>
 <data source="next"><label>Next</label></data>
 <title source="name" />
 <image source="image" />
</infobox>

Grouping information inside the group tags

The next field will let you put a number of fields into group, each of which can be given a header. Remember: fields that are declared but don't have a value won't appear. This rule also applies to groups – if none of the fields (excluding the header tag) inside any particular group have a value, the whole group won't show up. 

<infobox layout="stacked">
 <data source="prev"><label>Previous</label></data>
 <data source="conc"><label>Concurrent</label></data>
 <data source="next"><label>Next</label></data>
 <title source="name" />
 <image source="image" />
 <group>
  <header>Details</header>
  <data source="conflict"><label>Conflict</label></data>
  <data source="date"><label>Date</label></data>
  <data source="place"><label>Place</label></data>
  <data source="result"><label>Outcome</label></data>
 </group>
</infobox>
Alternative layout for group tags

Group tags can have an alternative horizontal layout where all the content is displayed next to each other in single horizontal line. This can be achieved by adding layout="horizontal" attribute to the group tag. 

<group layout="horizontal">
   ...
</group>
Force all group elements to be displayed

Using show="incomplete", you can force all group elements to be displayed, even when empty - unless all are empty, then the group is not rendered at all. 

<group layout="horizontal" show="incomplete">
 <header>Combatants</header>
 <data source="side1" />
 <data source="side2" />
</group>

Now adding all this together, we come to the final template code: 

<infobox layout="stacked">
 <data source="prev"><label>Previous</label></data>
 <data source="conc"><label>Concurrent</label></data>
 <data source="next"><label>Next</label></data>
 <title source="name" />
 <image source="image" />
 <group>
  <header>Details</header>
  <data source="conflict"><label>Conflict</label></data>
  <data source="date"><label>Date</label></data>
  <data source="place"><label>Place</label></data>
  <data source="result"><label>Outcome</label></data>
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Combatants</header>
  <data source="side1" />
  <data source="side2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Commanders</header>
  <data source="commanders1" />
  <data source="commanders2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Strength</header>
  <data source="forces1" />
  <data source="forces2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Casualties</header>
  <data source="casual1" />
  <data source="casual2" />
 </group>
 <data source="civilian"><label>Civilian casualties</label></data>
</infobox>

Now we can use it in an article, and the work is done: 

{{Battle
 |prev        = [[Battle of Fair Isle]]
 |conc        = [[Siege of Old Wyk]]
 |next        = [[Siege of Pyke]]
 |name        = [[Siege of Great Wyk]]
 |image       = Stannis Great Wyk.png
 |conflict    = [[Greyjoy Rebellion]]
 |date        = 289 AL
 |place       = [[Great Wyk]], the [[the Iron Islands]]
 |result      = [[Iron Throne]] victory
 |side1       = [[File:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[House Greyjoy]]
 |side2       = [[File:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[Iron Throne]]
 |commanders1 = Unknown
 |commanders2 = Lord [[Stannis Baratheon]]
 |casual1     = Unknown
 |casual2     = Unknown
}}

Field formatting

If you want to prepend or append some additional information to your data – like adding some icons, categories – or to process the passed values, the field formatting allows you to do that.

A few sample use cases:

Here, we add an icon through a {{money_icon}} template: 

<data source="price">
 <label>Price</label>
 <format>{{{price}}} {{money_icon}}</format>
</data>

The effect shown to the right can be achieved with the following syntax: 

<header>Price to buy</header>
<data source="buyh">
 <label>Price with Haggling</label>
 <format>{{{buyh}}} {{oren2}}</format>
</data>
<data source="buy">
 <label>Undiscounted price</label>
 <format>{{{buy}}} {{oren2}}</format>
</data>
<data source="sell">
 <label>Price to sell</label>
 <format>{{{sell}}} {{oren2}}</format>
</data>
<data source="weight">
 <label>Weight</label>
 <format>{{{weight}}} {{weight}}</format>
</data>

Available tags

For a detailed list of the standard tags available for portable infoboxes, including samples of wikitext to use and their HTML output, please see Sidebars/Tags.

Examples

MediaWiki standard

Portable

See also