Global Lua Modules/Cbox

Cbox is a module for creating message boxes with rounded corner. <!--

Features

 * Highly customizable with classes, inline styles, and provided CSS selectors.
 * Optional features such as an image, left border, right-side text (for e.g. shortcuts), and a dismiss function.

Module
First thing is the module itself. You don't need to copy the code. Just create a module titled Module:Mbox (or any other—just remember to adjust  calls) and put this in the code

CSS
Next, add the following to your Common.css or Wikia.css.

There are two types of CSS rules for Mbox. The first type is the structural/functionality CSS which should not be changed, lest it break the Mbox. The second type is the design of the Mbox, which should be modified to fit your community's needs. For the design-related selectors you should use, see.

The following CSS represents the base, and can be found at MediaWiki:Global Lua Modules/Mbox.css.

Template
The module is designed to be used as a regular template. To do that just create a template (ex: Template:Mbox) with following content:

Now the template you created will accept parameters documented below.

These parameters can also be passed directly to the  and will act as defaults. Their values will be overridden by same ones passed to the template.

Parameters
For examples of how to use these parameters, see.

Design
Some communities may wish to customize the appearance of the mboxes. The most common styling options are provided below:


 * Technical notes
 * The mbox module uses the BEM selector convention for readability and to make future additions to the HTML structure easier.
 * Additional inline styles to the root  element can be achieved via the   parameter in the template.

Basic mbox
Produces:

Using types
To use types, CSS variables must be added, such as:

If added:

Produces:

Image
Produces:

Aside
Produces:

Bit of everything
Produces:

Standard/default style
Produces:

Wookieepedia style
Reproducing w:c:starwars:Template:Citation.

 .mbox { background-color: #7bb0d8; border: none; border-radius: 10px; } .mbox__close { color: #0c8787; font-weight: normal; font-size: 13px; } .mbox__close:after { content: '[hide]'; } .mw-collapsed + .mbox__close { transform: none; padding: 2px 7px; } .mw-collapsed + .mbox__close:after { content: '[show]'; }
 * CSS:

Final Fantasy Wiki style
Reproducing w:c:finalfantasy:Template:Rename.

 .mbox { background-color: #0000a8; border: 4px ridge #c0c0c0; border-radius: 10px; color: #fff; } -->
 * CSS:

Technical and miscellaneous

 * There is no  parameter too. In order to inject a category onto an article using a certain mbox implementation, simply add  . If you wish to make the injection of the category optional, add.