Template:Color box/doc: Difference between revisions

(2 intermediate revisions by one other user not shown)

Line 4:

; Dependencies

:; Used by

:: {{T|Example}}

:: {{T|Important note box}}

:: {{T|Note box}}

; Syntax

Line 13:

Line 15:

::; border : Sets the border color of the box. The default is set to a shade of {{Co|#888888|gray}}. Colors can be given either by color name<ref>https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]</ref> (e.g. {{Co|red|red}} or {{Co|green|green}}) or values<ref>https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]</ref> (like {{Co|#0000FF|#FF0000}}).

::; width : Sets the width of the box. It's recommended to set this as a percentage (of the paragraph width), so <code>50%</code> will produce a text box half as wide as the surrounding paragraph. If omitted, the text box will be as wide as the surrounding paragraph. When width is set to less than <code>100%</code>, the box will be centered.

::; color : Sets the background color of the box. The default is set to ~~black~~. For valid values see border

::; color : Sets the background color of the box. The default is set to transparent. For valid values see border

::; align : Sets the position of the text within the box. The default is set to left. Values are: left, center, right or justify.

::; text : Sets the text color of the box. The default is set to ~~{{Co|white|white}}~~. For valid values see border.

::; text : Sets the text color of the box. The default is set to inherit. For valid values see border.

::; italics : Set italics= no to override the default of the contents of the box being in italics. Otherwise omit.

; Usage notes

: ~~The background color should be darker than~~ the ~~border. Depending on how light the background color is, either white or black text is easier to read. Given that the default skin~~ for ~~the UniWiki has~~ light ~~text on a~~ dark ~~background, a text box with a light background will stand out much more than one with a darker background (but will also make a page look more cluttered, especially if it is used repeatedly)~~.

: Make sure the colors used work both for light and dark mode.

; Examples

Line 26:

Line 28:

: {{code|<nowiki>{{Color box|color= #144f1d|border= #2f8f2f|A more colorful box!}}</nowiki>: gives ...}}

: {{code|<nowiki>{{Color box|color= #144f1d|border= #2f8f2f|text= yellow|A more colorful box!}}</nowiki>: gives ...}}

{{Color box|color= #144f1d|border= #2f8f2f|A more colorful box!}}

{{Color box|color= #144f1d|border= #2f8f2f|text= yellow|A more colorful box!}}

: {{Code|<nowiki>{{Color box|color= #110033|border= #6600bb|width=50%|A smaller, purple box}}</nowiki>: gives ...}}

: {{Code|<nowiki>{{Color box|color= #110033|border= #6600bb|text= LightSkyBlue|width=50%|A smaller, purple box}}</nowiki>: gives ...}}

{{Color box|color= #110033|border= #6600bb|width=50%|A smaller, purple box}}

{{Color box|color= #110033|border= #6600bb|text= LightSkyBlue|width=50%|A smaller, purple box}}

@@ Line 4: / Line 4: @@
 ; Dependencies
 :; Used by
+:: {{T|Example}}
 :: {{T|Important note box}}
+:: {{T|Note box}}
 ; Syntax
@@ Line 13: / Line 15: @@
 ::; border : Sets the border color of the box. The default is set to a shade of {{Co|#888888|gray}}. Colors can be given either by color name<ref>https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]</ref> (e.g. {{Co|red|red}} or {{Co|green|green}}) or values<ref>https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]</ref> (like {{Co|#0000FF|#FF0000}}).
 ::; width : Sets the width of the box.  It's recommended to set this as a percentage (of the paragraph width), so <code>50%</code> will produce a text box half as wide as the surrounding paragraph. If omitted, the text box will be as wide as the surrounding paragraph. When width is set to less than <code>100%</code>, the box will be centered.
-::; color : Sets the background color of the box. The default is set to black. For valid values see border
+::; color : Sets the background color of the box. The default is set to transparent. For valid values see border
 ::; align : Sets the position of the text within the box. The default is set to left. Values are: left, center, right or justify.
-::; text : Sets the text color of the box. The default is set to {{Co|white|white}}. For valid values see border.
+::; text : Sets the text color of the box. The default is set to inherit. For valid values see border.
 ::; italics : Set italics= no to override the default of the contents of the box being in italics. Otherwise omit.
 ; Usage notes
-: The background color should be darker than the border. Depending on how light the background color is, either white or black text is easier to read. Given that the default skin for the UniWiki has light text on a dark background, a text box with a light background will stand out much more than one with a darker background (but will also make a page look more cluttered, especially if it is used repeatedly).
+: Make sure the colors used work both for light and dark mode.
 ; Examples
@@ Line 26: / Line 28: @@
-: {{code|<nowiki>{{Color box|color= #144f1d|border= #2f8f2f|A more colorful box!}}</nowiki>: gives ...}}
+: {{code|<nowiki>{{Color box|color= #144f1d|border= #2f8f2f|text= yellow|A more colorful box!}}</nowiki>: gives ...}}
-{{Color box|color= #144f1d|border= #2f8f2f|A more colorful box!}}
+{{Color box|color= #144f1d|border= #2f8f2f|text= yellow|A more colorful box!}}
-: {{Code|<nowiki>{{Color box|color= #110033|border= #6600bb|width=50%|A smaller, purple box}}</nowiki>: gives ...}}
+: {{Code|<nowiki>{{Color box|color= #110033|border= #6600bb|text= LightSkyBlue|width=50%|A smaller, purple box}}</nowiki>: gives ...}}
-{{Color box|color= #110033|border= #6600bb|width=50%|A smaller, purple box}}
+{{Color box|color= #110033|border= #6600bb|text= LightSkyBlue|width=50%|A smaller, purple box}}