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, reason, addable layout, and auto coloring.

How to install[]

Module[]

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

return require('Dev:Cbox')

CSS[]

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

Unlike Mbox, non-spacing class code to add sharing design. For more about, see #Design.

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

.cbox {
    border-width:1px;
    border-style:solid;
    overflow:hidden;
}
.cbox:not(.reason) {
    text-align:center;
}
.cbox .header {
    font-weight:bold;
    font-variant:small-caps;
}
.cbox .reason {
    text-align:left;
    overflow:auto;
    margin:0 1em;
    padding:0 10px;
}
 
.cbox.auto {
    width:auto;
    margin:auto;
}

Template[]

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

{{#invoke:Cbox|main}}

Now the template you created will accept parameters documented below.

These parameters can also be passed directly to the #invoke 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 #Examples.

Root Parameters[]

Parameter name	Description	Required?	Default
`layout`	Set layout of `.cbox` element.	Yes	—
`class`	Additional classes to the root `.cbox` element.	No	—
`round`	Roundness of the corner. Please only integer.	No	Stylesheet default
`fontsize`	Specify the size of the main font, and increase the font size of the heading a little.	No	—
`style`	Additional inline styles to the root `.cbox` element.	No	—
`headerstyle`	Additional inline styles to the `.cbox .header` element.	No	—
`textstyle`	Additional inline styles to the `.cbox .description` element.	No	—
`reasonstyle`	Additional inline styles to the `.cbox .reason` element.	No	—
`imagestyle`	Additional inline styles to the `.cbox .image` element.	No	—
`image`	An image to be added to the left of all text content.	No	—
`imagesize`	The size of the image (automatically multi-way adjusts). If only integer, automatically adjusts to square.	No	—

Data CSS Parameters[]

Parameter name	Description	Used layout	Required?
`header`	The header (bold text placed at the top). This is typically used to very briefly explain the subject of the cbox itself.	1,2,3,4	Yes
`above`	The header (bold text placed at the top). This is typically used to very briefly explain the subject of the cbox itself.	5,6	Sometime
`below`	The footer (bold text placed at the bottom). This is typically used to very briefly explain the subject of the cbox itself.	5,6	No
`text`	Non-bold text placed below the header, typically used to explain the subject of the cbox in further or additional detail.	All	Yes
`data`	Non-bold text placed below the main text, typically used to add additional links or context about the notice.	5,6	No
`reason`	Non-bold text placed below the main text, typically used to add additional links or context about the notice.	1,2,3,4	No

Technical notes

In 5 and 6, the value entered in Above is prioritized, and then the value of header is sechond.

Parameters with "#"[]

Other CSS-patamaters are spliced with "#". Right parameter is used for location and default is root .cbox element. Below are element that can use auto coloring. For more about, see #Design.

Parameter name	Description	Required?	Default
`color`	Set text color of `.cbox` element.	Yes	—
`background-color`	Set color of the `.cbox` element's background.	No	—
`color#header`	Set text color of `.cbox .header` element.	No	—
`background-color#header`	Set color of the `.cbox .header` element's background.	No	—
`color#text`	Set text color of `.cbox .description` element.	No	—
`background-color#text`	Set color of the `.cbox .description` element's background.	No	—
`color#reason`	Set text color of `.cbox .reason` element.	No	—
`background-color#reason`	Set color of the `.cbox .reason` element's background.	No	—
`color#image`	Set text color of `.cbox .image` element.	No	—
`background-color#image`	Set color of the `.cbox .image` element's background.	No	—

Design[]

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

.cbox {
    /* the border thickness of every entire box */
    border-width:1px;

    /* the border style of every entire box */
    border-style:solid;

    overflow:hidden;
}
.cbox:not(.reason) {
    /* this affects to every entire box except reason cell */
    text-align:center;
}
.cbox .header {
    /* this affects to every entire box's header */
    font-weight:bold;
    font-variant:small-caps;
}
.cbox .reason {
    /* this affects to every entire box's reason cell */
    text-align:left;
    overflow:auto;
    margin:0 1em;
    padding:0 10px;
}

.cbox.class {
    /* You can change "class" to any classes to share */;
    /* the background of the entire box */;
    background-color: ;

    /* the border color of the entire box */
    border-color: ;
}

Examples[]

Layouts[]

Layout 1[]

{{cbox
|header           = Header text here
|text             = Normal text here
|background-color = #ff6347
|layout           = 1
|image            = Wiki.png
|data             = Layout 1
}}

Produces:

Header text here
Normal text here
Layout 1

Layout 2[]

{{cbox
|header           = Header text here
|text             = Normal text here
|background-color = #008B8B
|layout           = 2
|image            = Wiki.png
|data             = Layout 2
}}

Produces:

Header text here
	Normal text here
Layout 2

Layout 3[]

{{cbox
|header           = Header text here
|text             = Normal text here
|background-color = #87CEFA
|layout           = 3
|image            = Wiki.png
|data             = Layout 3
}}

Produces:

Header text here
Normal text here
Layout 3

Layout 4[]

{{cbox
|header           = Header text here
|text             = Normal text here
|background-color = #F0E68C
|layout           = 4
|image            = Wiki.png
|data             = Layout 4
}}

Produces:

	Header text here
	Normal text here
Layout 4

Layout 5[]

{{cbox
|above            = Header text here
|text             = Normal text here
|background-color = #14191b
|layout           = 5
|image            = Wiki.png
|below            = Layout 5
|imagesize        = 120
}}

Produces:

Layout 5
Header text here
Normal text here

Layout 6[]

{{cbox
|above            = Header text here
|text             = Normal text here
|background-color = #f9e59d
|layout           = 6
|image            = Wiki.png
|below            = Layout 6
|imagesize        = 120
}}

Produces:

	Layout 6
	Header text here
	Normal text here

Restyled mboxes[]

Standard/default style[]

{{cbox
|header   = Header text here
|text     = Normal text here
|reason   = Something
|timestamp= {{#time: F j, Y|{{REVISIONTIMESTAMP}}}} at {{#time: g:i A|{{REVISIONTIMESTAMP}}}}
|image    = Wiki.png
|layout=1
}}

Produces:

Header text here
Normal text here
Reason of Something: Unknown This page was last edited on November 7, 2022 at 7:02 PM.

OSC's style[]

Reproducing w:c:objectshowfanonpedia:Template:Delete.

{{cbox
|round      = 30
|fontsize   = 8
|style      = width:600px; margin:1em auto; color:#000; background-color: #ffb8b8; border-collapse: separate; border-spacing: 0; overflow: hidden;
|headerstyle= background-color:#D62727;
|header     = [[Template:Delete|<span style="color:white;">Candidate for Deletion</span>]]
|quote      = STOP! {{PAGENAME}}'s not any better!
|name       = w:c:objectshowfanonpedia:Fries{{!}}Fries
|text       = This article is a [[:Category:Candidates for deletion|candidate for deletion]]. Staff will process the request shortly. If you disagree with its deletion, please explain why at [[Category talk:Candidates for deletion]], or improve the page and remove the '''{{delete}}''' tag.<br/>
Remember to check [[Special:WhatLinksHere/{{NAMESPACE}}:{{PAGENAME}}|what links here]] and the [{{SERVER}}{{localurl:{{NAMESPACE}}:{{PAGENAME}}|action=history}} page history] before deleting the page.
|reasonstyle= max-width:500px; height:70px; padding-left:1em; padding-right:1em; background-color: #ff9393; overflow:auto;
|reason     = Delete
|reasontext = {{{1|Unknown.}}}
|timestamp  = {{#time: F j, Y|{{REVISIONTIMESTAMP}}}} at {{#time: g:i A|{{REVISIONTIMESTAMP}}}}
|overflow   = hidden
|image      = Wiki.png
|imagesize  = 100px
|layout     = 6
}}

	Candidate for Deletion
	"STOP! Global Lua Modules/Cbox's not any better!" - Fries This article is a candidate for deletion. Staff will process the request shortly. If you disagree with its deletion, please explain why at Category talk:Candidates for deletion, or improve the page and remove the {{delete}} tag. Remember to check what links here and the page history before deleting the page.
	Reason of Delete: Unknown. This page was last edited on November 7, 2022 at 7:02 PM.

Haboo's style[]

Reproducing w:c:habbo:Template:Merge.

{{cbox
|class      = messagebox standard-talk plainlinks speedydelete
|round      = 10
|style      = padding:5px; width:80%; background-color:#b1e1ff; border-color:black; color:black; margin:1em auto; text-align:left;
|header     = <div style="font-size: larger;">This {{#switch:{{NAMESPACE}}
|=article
|User=user page
|File=file
|Template=template
|Category=category
|Forum=forum thread
|Update=Update page
|Talk
|User talk
|File talk
|Template talk
|Category talk
|Update talk=talk page
}} is a candidate or requested to be '''merged''' with '''{{{1}}}'''. Please discuss your opinions in the Comments section.</div>
|textstyle  = font-size: .75em
|text       = (Admins: before deletion, check [[Special:Whatlinkshere/{{SUBJECTPAGENAME}}{{!}}what links to this page]], the [{{fullurl:{{SUBJECTPAGENAME}}|action=history}} page history], and the [{{fullurl:Special:Log|page={{SUBJECTPAGENAMEE}}}} page log]. '''Make sure any broken links are corrected or removed''')
|imagelink  = {{fullurl:{{FULLPAGENAME}}|action=delete&wpReason={{urlencode:{{{1}}}}}}}
|image      = Wiki.png
|imagesize  = 400%
|layout     = 4
}}

	This article is a candidate or requested to be merged with {{{1}}}. Please discuss your opinions in the Comments section.
	(Admins: before deletion, check what links to this page, the page history, and the page log. Make sure any broken links are corrected or removed.)

Technical and miscellaneous[]

There is no category parameter too. In order to inject a category onto an article using a certain mbox implementation, simply add <includeonly>[[Category:{{{category}}}]]</includeonly>. If you wish to make the injection of the category optional, add <includeonly>{{#ifeq: {{{1|}}} | nocat | | [[Category:{{{category}}}]] }}</includeonly>.

Global Lua Modules/Cbox

Contents

Features[]

How to install[]

Module[]

CSS[]

Template[]

Parameters[]

Root Parameters[]

Data CSS Parameters[]

Parameters with "#"[]

Design[]

Examples[]

Layouts[]

Layout 1[]

Layout 2[]

Layout 3[]

Layout 4[]

Layout 5[]

Layout 6[]

Restyled mboxes[]

Standard/default style[]

OSC's style[]

Haboo's style[]

Technical and miscellaneous[]

See also[]