Wikia Developers Wiki


< ReferencePopups

867pages on
this wiki
Add New Page
Talk0 Share


This is a template for using custom Reference Popups in your pages. The template is somewhat complicated but should be easy enough to use. This template also has a sibling that you'll probably need as well: ReferencePopups/PopupContent.

Simple inline popups

Blah blah ... {{Popup
|text = Put the normal text you want to appear in the article here
|inline = 1 <!-- This is all normal text, not block elements like DIVs -->
|popup = This is the text that will appear in the popup
}} ... blah blah

Complex inline popup

... {{Popup | text = Normal article text | inline = 1 | load-from = #MyDetachedPopup1 }} ...

<!-- ... At the end of the section, before the next heading ... -->
|text = *Bullet list
*To be shown
*In the Popup
|name = MyDetachedPopup1

This second form is useful because it allows you to avoid confusing MediaWiki and causing it to merge all your paragraphs together into a single colossal, unreadable wall of text. If you put ---- or <div> inline with the Popup template then the result can be very bad so you should use the detached form to display popups that contain anything more complicated than plain text, spans and images.

The load-from and move-from parameters are CSS selectors, like you would use in MediaWiki:Wikia.css to style your wiki. Generally you will only use PopupContent with this, so the only thing to remember is that load-from must be the same as the name parameter on PopupContent with a hash (#) at the start.

Block popup

|text = <div style="float:right; clear:right; color:red; font-weight:bold">Random float right text</div>
|popup = *Bullet list
* in Popup
<span style="color:green">Text</span>

Block popups are basically identical to simple inline popups; only combining inline and block content at the same time is difficult.


Parameter Description
text The text and whatever that will be displayed normally on the page. You can use images for this, but please avoid combining images and non-floating text as the results can be confusing.
inline Switches between inline and block mode. Inline is normal paragraph text, blocks are things like DIVs which partition the page and start new paragraphs. Set this to anything other than blank to turn inline mode on.
popup The contents to be displayed inside the popup. In inline mode, as controlled by the above flag, you must avoid using block elements here like bullet lists, DIVs and such as that will destroy your page formatting. In block mode, you can use anything here and it will work fine.

If you want to use block elements in inline mode then you must use detached content via load-from or move-from.

class This option allows you to add extra CSS classes to the popup. Note that you should only use classes which are designed specifically for the popup as the results can be confusing, ugly or broken otherwise.
load-from Alternative to popup. This option takes a CSS selector specifying what part of the page should be used as the content of the popup. The popup will copy the targeted content into it.

NOTE: Copying will not include JavaScript behaviours. If you copy something which is intelligent, like a Tweet button, then the brains will be left behind causing it to break. You should use move-from on those things instead.

move-from Like load-from, this is an alternative to popup. Unlike load-from, this one moves the targeted item into the popup instead of copying it. Generally you will not want to do this, unless you are trying to move something like a Tweet button into a popup without breaking it.


Unless you want to create your own custom template, you should copy this entire page onto your wiki as a template. ("Template:Popup" is recommended)

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.