Template:Box - Revision history

Blu256: Changed icon size to 36px

2022-04-21T13:48:32Z

Changed icon size to 36px

Blu256: Do not add link to box icon

2022-04-21T13:32:39Z

Do not add link to box icon

Blu256: Visual improvements

2022-04-21T13:31:06Z

Visual improvements

Blu256: Added note about specific templates preference

2022-01-22T14:22:47Z

Added note about specific templates preference

Blu256: Use bold text for emphasis

2022-01-22T14:21:57Z

Use bold text for emphasis

Blu256: Added vertical margin

2022-01-20T16:42:50Z

Added vertical margin

Blu256: Remove HTML line break

2022-01-18T10:43:27Z

Remove HTML line break

Blu256: Updated template

2022-01-06T14:11:20Z

Updated template

Blu256: Added 1px black outline

2022-01-06T14:01:40Z

Added 1px black outline

Blu256: Improved example

2021-11-03T14:52:09Z

Improved example

@@ Line 56: / Line 56: @@
  |highlight=#4C8ACE
 }}
-</noinclude><includeonly><div style="background: {{{background|gainsboro}}}; display: flex; border: solid 1px black; min-height: 48px; margin: 5px 0;">
+</noinclude><includeonly><div style="background: {{{background|gainsboro}}}; display: flex; border: solid 1px black; min-height: 36px; margin: 5px 0;">
-<div style="padding: 8px 5px; background: linear-gradient(to right, {{{highlight|gray}}}, {{{background|gainsboro}}});">[[File:{{{icon|Gear.png}}}|link=|48px]]</div><div style="padding: 2px 5px; flex-grow: 1;"><div style="font-size:1.15em; font-weight: bold; border-bottom: dotted 1px #000000;">{{{caption}}}</div>{{{text}}}</div></div></includeonly>
+<div style="padding: 8px 5px; background: linear-gradient(to right, {{{highlight|gray}}}, {{{background|gainsboro}}});">[[File:{{{icon|Gear.png}}}|link=|36px]]</div><div style="padding: 2px 5px; flex-grow: 1;"><div style="font-size:1.15em; font-weight: bold; border-bottom: dotted 1px #000000;">{{{caption}}}</div>{{{text}}}</div></div></includeonly>

@@ Line 57: / Line 57: @@
 }}
 </noinclude><includeonly><div style="background: {{{background|gainsboro}}}; display: flex; border: solid 1px black; min-height: 48px; margin: 5px 0;">
-<div style="padding: 8px 5px; background: linear-gradient(to right, {{{highlight|gray}}}, {{{background|gainsboro}}});">[[File:{{{icon|Gear.png}}}|48px]]</div><div style="padding: 2px 5px; flex-grow: 1;"><div style="font-size:1.15em; font-weight: bold; border-bottom: dotted 1px #000000;">{{{caption}}}</div>{{{text}}}</div></div></includeonly>
+<div style="padding: 8px 5px; background: linear-gradient(to right, {{{highlight|gray}}}, {{{background|gainsboro}}});">[[File:{{{icon|Gear.png}}}|link=|48px]]</div><div style="padding: 2px 5px; flex-grow: 1;"><div style="font-size:1.15em; font-weight: bold; border-bottom: dotted 1px #000000;">{{{caption}}}</div>{{{text}}}</div></div></includeonly>

@@ Line 56: / Line 56: @@
  |highlight=#4C8ACE
 }}
-</noinclude><includeonly><div style='background-color: {{{background|gainsboro}}}; outline: solid 1px black; border: solid 2px {{{highlight|gray}}}; border-left: solid 5px {{{highlight|gray}}}; padding: 2px 5px; min-height: 48px; margin: 5px 0;'>
+</noinclude><includeonly><div style="background: {{{background|gainsboro}}}; display: flex; border: solid 1px black; min-height: 48px; margin: 5px 0;">
-[[File:{{{icon|Gear.png}}}|left|48px]]<div style='font-size:1.15em; font-weight: bold;'>{{{caption}}}</div>{{{text}}}</div></includeonly>
+<div style="padding: 8px 5px; background: linear-gradient(to right, {{{highlight|gray}}}, {{{background|gainsboro}}});">[[File:{{{icon|Gear.png}}}|48px]]</div><div style="padding: 2px 5px; flex-grow: 1;"><div style="font-size:1.15em; font-weight: bold; border-bottom: dotted 1px #000000;">{{{caption}}}</div>{{{text}}}</div></div></includeonly>

@@ Line 6: / Line 6: @@
 * [[Template:WarningBox]], for displaying '''warnings''' and '''important notes''';
 * [[Template:SafeBox]], for displaying '''validating information''' (e.g. see [[Template:Applicable to TDE]]).
+These more specific templates should be preferred when possible to directly using this template.

@@ Line 3: / Line 3: @@
 More specific box templates include:
-* [[Template:TipBox]], for displaying tips and miscellaneous information;
+* [[Template:TipBox]], for displaying '''notices''', '''tips''' and '''miscellaneous information''';
-* [[Template:WarningBox]], for displaying warnings and important notes;
+* [[Template:WarningBox]], for displaying '''warnings''' and '''important notes''';
-* [[Template:SafeBox]], for displaying validating information (e.g. see [[Template:Applicable to TDE]]).
+* [[Template:SafeBox]], for displaying '''validating information''' (e.g. see [[Template:Applicable to TDE]]).

@@ Line 33: / Line 33: @@
  |text=This is a box.
 }}
 ----
@@ Line 54: / Line 55: @@
 }}
 </noinclude><includeonly><div style='background-color: {{{background|gainsboro}}}; outline: solid 1px black; border: solid 2px {{{highlight|gray}}}; border-left: solid 5px {{{highlight|gray}}}; padding: 2px 5px; min-height: 48px;'>
-[[File:{{{icon|Gear.png}}}|left|48px]]<div style='font-size:1.15em; font-weight: bold;'>{{{caption}}}</div>{{{text}}}</div><br/></includeonly>
+[[File:{{{icon|Gear.png}}}|left|48px]]<div style='font-size:1.15em; font-weight: bold;'>{{{caption}}}</div>{{{text}}}</div></includeonly>

@@ Line 2: / Line 2: @@
 '''Template:Box''' is a general-purpose template meant to display Wikipedia-style boxes with information such as warnings about the content of a page.
+More specific box templates include:
-See the [[Template:Outdated]] template for an example of its usage.
+* [[Template:TipBox]], for displaying tips and miscellaneous information;
+* [[Template:WarningBox]], for displaying warnings and important notes;
+* [[Template:SafeBox]], for displaying validating information (e.g. see [[Template:Applicable to TDE]]).
+== Usage ==
 To use this template, use <code><nowiki>{{Box|caption=...|text=...|icon=...|background=...|highlight=...}}</nowiki></code> on the target page.
 * <code>caption</code> ''(optional)'' is the box caption;
 * <code>text</code> ''(required)'' is the box contents;
-* <code>icon</code> ''(optional)'' is the icon displayed by the text ("Messagebox_info.png" by default);
+* <code>icon</code> ''(optional)'' is the icon displayed by the text (default: [[:File:Gear.png]]);
-* <code>background</code> ''(optional)'' is the background color (#D9D1FF by default);
+* <code>background</code> ''(optional)'' is the background color (default: <tt>gainsboro</tt>);
-* <code>highlight</code> ''(optional)'' is the highlight color (#4A80FF by default).
+* <code>highlight</code> ''(optional)'' is the highlight color (default: <tt>gray</tt>).
 Using this template on a page results in a box being placed.
-==Example==
+== Examples ==
+<syntaxhighlight lang="html+handlebars">
+{{Box
+ |caption=Hello, TDE Wiki!
+ |text=This is a box.
+}}
+</syntaxhighlight>
+{{Box
+ |caption=Hello, TDE Wiki!
+ |text=This is a box.
+}}
+----
 <syntaxhighlight lang="html+handlebars">
@@ Line 32: / Line 53: @@
  |highlight=#4C8ACE
 }}
-</noinclude><includeonly><div style='background-color: {{{background|#D9D1FF}}}; outline: 1px solid #000000; border: solid 2px {{{highlight|#4A80FF}}}; border-left: solid 5px {{{highlight|#4A80FF}}}; padding: 2px 5px; min-height: 48px;'>
+</noinclude><includeonly><div style='background-color: {{{background|gainsboro}}}; outline: solid 1px black; border: solid 2px {{{highlight|gray}}}; border-left: solid 5px {{{highlight|gray}}}; padding: 2px 5px; min-height: 48px;'>
-[[File:{{{icon|Messagebox_info.png}}}|left|48px]]<div style='font-size:1.15em; font-weight: bold;'>{{{caption}}}</div>{{{text}}}</div><br/></includeonly>
+[[File:{{{icon|Gear.png}}}|left|48px]]<div style='font-size:1.15em; font-weight: bold;'>{{{caption}}}</div>{{{text}}}</div><br/></includeonly>

@@ Line 19: / Line 19: @@
  |caption=Welcome to the Trinity Desktop Project Wiki!
  |text=The Trinity Desktop Environment (TDE) project is a feature rich desktop environment for Unix-like operating systems with a primary goal of retaining a traditional, efficient and productive user interface.
- |icon=CrystalSVGFolderIcon128.png
+ |icon=TDE Logo.png
- |background=#BFFFC2
+ |background=#ABCBF0
- |highlight=#4DFF00
+ |highlight=#4C8ACE
 }}
 </syntaxhighlight>
@@ Line 28: / Line 28: @@
  |caption=Welcome to the Trinity Desktop Project Wiki!
  |text=The Trinity Desktop Environment (TDE) project is a feature rich desktop environment for Unix-like operating systems with a primary goal of retaining a traditional, efficient and productive user interface.
- |icon=CrystalSVGFolderIcon128.png
+ |icon=TDE Logo.png
- |background=#BFFFC2
+ |background=#ABCBF0
- |highlight=#4DFF00
+ |highlight=#4C8ACE
 }}
 </noinclude><includeonly><div style='background-color: {{{background|#D9D1FF}}}; border: solid 2px {{{highlight|#4A80FF}}}; border-left: solid 5px {{{highlight|#4A80FF}}}; padding: 2px 5px; min-height: 48px;'>