Global Lua Modules/Cbox — dev

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>.

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