m (Conjugation)
Line 99: Line 99:
[[fr:Aide:Aperçu d'infobox]]
[[fr:Aide:Aperçu d'infobox]]
[[pt:Ajuda:Pré-visualização de infoboxes]]
[[vi:Trợ giúp:Xem trước Hộp thông tin]]
[[vi:Trợ giúp:Xem trước Hộp thông tin]]

Revision as of 17:43, June 28, 2016

Infobox Preview help page

The Infobox Preview tool in action

The Infobox Preview feature is a tool built to help users build and experiment with Wikia's Portable Infobox markup and CSS styling . The tool is a sandbox — it can import existing code from your community but does not publish edits to either the CSS or any template page.

Every time you click the "Preview" button the tool looks at the contents of all three tabs — Infobox Markup, Custom CSS, and Invocation — and the provided Wikia domain and template name to generate a preview. It will identify where the template is already used on your community and show up to 10 examples of how the template will render with any new code you have provided.

Remember: no matter what you do inside the tool, we guarantee you will not break anything. The tool does not save changes to templates or CSS — it is a stand-alone feature. Have fun!

How do I access the tool?

Either visit in your browser or click the "Open Infobox Preview" button inside the Template editor.

What do the different buttons do?


When you click the 'XML' button and the 'Wikia domain' and 'Template name' fields are filled out, the 'Infobox Markup' tab will be populated with the contents of the template on the provided wiki.

For example, if you want to test you should fill in '' as the domain and 'Character' as the template name.

If the template does not exist or if the template does not contain any Infobox XML markup, the 'Infobox Markup' tab will display a blank <infobox></infobox> tag.

Learn more about the Infobox XML markup at Help:Infoboxes.


When you click the 'CSS' button and the 'Wikia domain' is filled out, entire contents of MediaWiki:Wikia.css are imported into the 'Custom CSS' tab.


When you click 'Preview' all available information is combined to generate a preview for you. The following three things happen simultaneously:

First, the tool looks at 'Wikia domain' and 'Template name' to find articles where the template is already used along with the values to their parameters. For example, will look at and display it in the preview area.

Second, the tool will render the infobox based on the markup provided in the 'Infobox Markup' tab. Try rearranging tags in the 'Infobox Markup' and clicking 'Preview' to see how this works.

Third, the tool will generate the appropriate CSS to style the infobox. The tool will first look at the entire CSS on the provided 'Wikia domain' and load it into the preview area. It then loads the contents of the 'Custom CSS' tab if you have provided any changes.

Fourth, the tool will look at the the 'Invocation' tab and generate it on the top of the other options. See the "Building a custom invocation" section below for more info.

The tool will only generate a preview of Portable Infobox markup. All other contents of the template will be ignored.


Infobox Preview help page - share dialog

Clicking 'Share' will generate a snapshot of the current state of your Preview — the 'Wikia domain' and 'Template name' fields and the contents of all three tabs. The link generated will always point to that exact draft. You can make changes and generate more share links.

Sharing is helpful if you want to collaborate with another editor to build an infobox without affecting any live articles on your community. It's also a great way to save your work and return to editing later.

What do the different tabs do?

Infobox Markup

This tab can be populated by clicking the 'XML' button at the top of the tool. Alternatively, you can build an infobox from scratch. The preview area will look to this 'Infobox Markup' tab to understand how the infoboxes should be built.

Learn more about the Infobox XML markup at Help:Infoboxes.

Custom CSS

Infobox preview - CSS tree

CSS tree

This tab can be populated by clicking the 'CSS' button at the top of the tool. Alternatively, you can write CSS from scratch. The preview will live update as you write proper CSS.

At the bottom of the screen a CSS structure tree will show you the exact class names of each element in the preview area as you hover over them. Click in the preview area to lock or unlock the tree.

Learn more about CSS on Wikia at Help:CSS and JS customization or learn CSS basics at


Infobox Preview - Custom Invocation

An example custom invocation which can be seen at

If you're building a template that is not yet used on any pages, or if you want to see what a very specific combination of parameters will look like you can fill out the 'Invocation' tab exactly how you would embed a template on an article page.

For example, you would type:

{{Infobox Character
|name = EXAMPLE
|image = O-Ren Ishii.jpg
|caption = 
|full_name = THIS IS A TEST
|alias = Experiment

and the preview will display how the Infobox will look if this wikitext were on an actual article page.


I'm done! I want to save my changes

This feature does not publish any changes to either Template pages or CSS. You will have to copy & paste it into the appropriate location when you're done.

I want to preview an Infobox that ends in /Draft

If you are previewing a template that ends with /Draft — such as the preview will search for uses of instead and still display a valid preview.

I want to edit MediaWiki:Common.css or another CSS page

The feature only imports MediaWiki:Wikia.css to the 'Custom CSS' tab but automatically loads all CSS into the preview area. You can still use the 'Custom CSS' tab to write CSS but copy & paste it to whichever CSS page you want.

My preview area is blank!

The preview may appear blank if:

  • The template you provided is not used on any articles at the domain you provided.
  • The 'Infobox Markup' tab is empty
  • The 'Infobox Markup' tab has severely malformed markup

Further help and feedback

Community content is available under CC-BY-SA unless otherwise noted.