Template:Layoutbox

Template documentation

This template employs intricate features of the template syntax.

Please do not attempt to alter it unless you are certain that you understand the setup and are prepared to repair/revert any consequent collateral damage if the results are unexpected. You are encouraged to familiarise yourself with its setup and parser functions before editing the template. If your edit causes unexpected problems, please undo it quickly, as this template may appear on a large number of pages. Remember that you can conduct experiments, and should test all improvements, in either the or your user space before changing anything here.

This template uses TemplateStyles:

Template:Layoutbox/styles.css

This is a layout template designed to aptly and swiftly construct layout boxes without requiring extensive knowledge of HTML or wikitext syntax. It can be used in most namespaces and can be styled according to the user's preferences if the need arises.

Usage

All parameters, except for either {{{footer}}}, {{{header}}} or {{{text}}} are optional.

{{Layoutbox
  | class           = <!-- Adds a class to the layout box -->
  | id              = <!-- Adds a ID to the layout box -->
  
  | footer          = <!-- Footer content -->
  | header          = <!-- Header content -->
  | text            = <!-- Text content -->
  
  | style           = <!-- Styling for the content box, footer, header and wrapper -->
  | content-style   = <!-- Styling for the content box -->
  | footer-style    = <!-- Styling for the footer -->
  | header-style    = <!-- Styling for the header -->
  | wrapper-style   = <!-- Styling for the wrapper -->
}}

Preview

{{Layoutbox
 | footer = Lorem ipsum
 | header = Lorem ipsum
 | text   = <div style="padding:.5em;">Lorem ipsum, sit dolor amet.</div>
}}

Lorem ipsum

Lorem ipsum, sit dolor amet.

Lorem ipsum

Layout color types

Layout boxes can have their background and border colors changed based on what class you specify within the {{{class}}} parameter.

destructive: produces red backgrounds and red border colors

{{Layoutbox
 | class  = destructive
 | footer = Lorem ipsum
 | header = Lorem ipsum
 | text   = <div style="padding:.5em;">Lorem ipsum, sit dolor amet.</div>
}}

Lorem ipsum

Lorem ipsum, sit dolor amet.

Lorem ipsum

hesitative: produces yellow backgrounds and yellow border colors

{{Layoutbox
 | class  = hesitative
 | footer = Lorem ipsum
 | header = Lorem ipsum
 | text   = <div style="padding:.5em;">Lorem ipsum, sit dolor amet.</div>
}}

Lorem ipsum

Lorem ipsum, sit dolor amet.

Lorem ipsum

successive: produces green backgrounds and green border colors

{{Layoutbox
 | class  = successive
 | footer = Lorem ipsum
 | header = Lorem ipsum
 | text   = <div style="padding:.5em;">Lorem ipsum, sit dolor amet.</div>
}}

Lorem ipsum

Lorem ipsum, sit dolor amet.

Lorem ipsum

progressive: produces blue backgrounds and blue border colors

{{Layoutbox
 | class  = progressive
 | footer = Lorem ipsum
 | header = Lorem ipsum
 | text   = <div style="padding:.5em;">Lorem ipsum, sit dolor amet.</div>
}}

Lorem ipsum

Lorem ipsum, sit dolor amet.

Lorem ipsum

Targeting the layout box

This template includes the .layout-box-wrapper class on the wrapper element, which you can then target via CSS or JS.

CSS usage

.layout-box-wrapper { }

JavaScript usage

document.querySelector(".layout-box-wrapper");

JQuery usage

Since JQuery is included with MediaWiki by default, you can in turn use it in lieu of vanilla JavaScript.

$('.layout-box-wrapper')

Porting to other wikis

This template uses Module:Unsubst, which means that module functionality and Module:Unsubst are required on another wiki. You can, if you want, choose to omit the invocation of Module:Unsubst however, therefore eliminating the need for modules altogether.

This template also makes use of mw:Extension:TemplateStyles, so that is also required. However, other than that and the need for modules, you can port this template to other wikis relatively hassle free.