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 saves changes to templates or CSS — it is a stand-alone feature. Have fun!
How do I access the tool?
Either visit http://infoboxpreview.appspot.com/ in your browser or (coming soon) click the "Open Infobox Preview" button inside the Template editor.
What do the different buttons do?
XML
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 http://scrubs.wikia.com/wiki/Template:Character you should fill in 'scrubs.wikia.com' 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.
CSS
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.
Preview
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, http://scrubs.wikia.com/wiki/Template:Character will look at http://scrubs.wikia.com/wiki/Doug_Murphy 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.
Clicking 'Share' will generate a snapshot of the current state of your Preview — the Wikia domain and Infobox 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
CSS tree
This tab can be populated by clicking the 'CSS' button at the tool 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 http://www.w3schools.com/css/
Invocation
An example custom invocation which can be seen at http://infoboxpreview.appspot.com/?snapshotId=-K3bhjfXNDZBULEN3om1
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.
FAQ
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 http://scrubs.wikia.com/wiki/Template:Episode/Draft the preview will search for uses of http://scrubs.wikia.com/wiki/Template:Episode 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
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article