Template:Layoutbox

Template documentation

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

edit

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

edit
{{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

edit

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

edit

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

CSS usage

edit
.layout-box-wrapper { }

JavaScript usage

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

JQuery usage

edit

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

edit

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.