Template:Divbox/doc: Difference between revisions

Latest revision as of 06:10, 20 August 2023

	This is a documentation subpage for Template:Divbox. It contains usage information, categories and other content that is not part of the original template page.

This template uses TemplateStyles:

Template:Divbox/styles.css

This template can be used to create simple, flexible coloured text background.

Please note that this is intended to be a decorative template and not for use on article pages, therefore it will not display on articles.

Purpose

Boxes may not always be appropriate; they can be obtrusive.

{{Divbox}} provides a straightforward method of presenting any text within a box. Colors are selected using a private style keyword, which sets both box border and background, already chosen to work together, in a visual sense.

The keyword none puts your content inside an invisible box. This is available to offer the identical box model for your content, without a visible box.

This template may be used within another template; or as part of another page.

Usage

Template general syntax is as follows:

{{divbox|1=style|2=title|3=content|radius=}}

Parameters

1 (Style): Mandatory. Use any of the following:

amber	black	bloodred	blue
brown	forest	gold	gray
green	navy	none	orange
plain	purple	lilac	red
white	yellow	fawn	tt
simar	greenv	grayh	email
double	wordperfect	ivory	lavender

You can forgo "1=", as long as this is the first unnamed parameter in the list.
2 (Title): Optional. Plain text; appears strong and centered at top. You can forgo "2=", as long as this is the second unnamed parameter in the list.
3 (Content): Mandatory. Any text, including markup, that is to form the body of the message. You can forgo "3=", as long as this is the third unnamed parameter in the list, and the content does not contain an equals sign (=).
radius: Radius of the rounded edges, along with a valid unit, such as px, pt or em. The parameter works on styles that innately have both sharp or round edges, overriding their default edge roundness. You can forgo this entire parameter and its value; but if used, you cannot omit "radius=", which is case sensitive. However, like any named parameter, it may appear in any position (i.e. it does not need to be the last parameter).

Examples

What you see	What you type
gray: Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`{{divbox\|gray\|Lorem ipsum\|Lorem ipsum dolor...}}`
red: Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`{{divbox\|radius=5px\|red\|Lorem ipsum\|Lorem ipsum dolor...}}`
navy: Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`{{divbox\|radius=10px\|navy\|Lorem ipsum\|Lorem ipsum dolor...}}`
amber: Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`{{divbox\|radius=15px\|amber\|Lorem ipsum\|Lorem ipsum dolor...}}`
Without a border or background: Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`{{divbox\|none\|Lorem ipsum\|Lorem ipsum dolor...}}`
Without title Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`{{divbox\|navy\|\|Lorem ipsum dolor...}}`
Content contains '=': Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`{{divbox\|lavender\|Lorem ipsum\|3=Lorem <span style="color:#F00;">ipsum</span> dolor...}}`

@@ Line 107: / Line 107: @@
 |<code><nowiki>{{divbox|lavender|Lorem ipsum|3=Lorem <span style="color:#F00;">ipsum</span> dolor...}}</nowiki></code>
 |}
-== Making new divbox styles ==
-I'd rather hope you were able to find joy within the existing set of styles, but if not, you can create new ones. Follow these instructions to be sure your new style will "play nice" with &#123;&#123;[[template:divbox|divbox]]&#125;&#125;. Note that this requires some understanding of [[wikipedia:Cascading Style Sheets|CSS]].
-# Experiment in a drawing program, such as [[Wikipedia:GraphicConverter|GraphicConverter]] or [[Wikipedia:Adobe Photoshop|Adobe Photoshop]], and decide what colors you want for your new box style. You need to find out the HTML color codes for each color.
-# Open an existing box style template, such as &#123;&#123;[[template:divbox/style/red|divbox/style/red]]&#125;&#125;. Copy out the code.
-# Create a new box style template page. It '''must''' be located in main Template namespace and '''must''' be named <code>Template:divbox/style/XXXXX</code>, where "XXXXX" is your new style name.
-# Paste in the "borrowed" code and replace the color codes with your new, chosen colors. Save the new template.
-# Return to ''this'' page and add your new style to ''this'' documentation. Remember, a job's not over until the paperwork is done!
-Note that you ''may'' even change the division box margins and paddings. '''This is not recommended.''' There are a couple of good reasons for specifying these values, and in these units. Most users who "roll their own" make choices with unintended consequences; {divbox} is meant to help you avoid these pitfalls.
 <includeonly>{{sandbox other||{{testcases other||