Template:Notice/doc: Difference between revisions

From Project Gorgon
Jump to navigation Jump to search
Trimoon (talk | contribs)
m Changed default to blue, Ambox's notice is blue also see Template:Ambox#CSS
Trimoon (talk | contribs)
m Rewrite and adding new parameters
Line 1: Line 1:
{{SPW|is not on|name=Notice}}
{{SPW|is not on|name=Notice}}
;Description
<dl>
:A simple notice box.
<dt>Description:</dt>
;Dependencies
<dd>A simple notice box.</dd>
* Uses [[:File:Gtk-ok.png]].
 
;Syntax
<dt>Dependencies:</dt>
:Type <code>{{t|Notice|parameters}}</code> somewhere.
<dd>
;Parameters
*Uses [[:File:Gtk-ok.png]] as default image.
* '''type=''' - Notice box header text (default: Header text)
*Uses {{t|SPW}}, {{t|t}} and {{t|para}} for this documentation.
* '''info=''' - Notice box additional info (default: Explanation)
</dd>
* '''image=''' - ''Optional'' Notice box symbol image (default: <code>[[[[:File:Gtk-ok.png]]|50px]]</code>)
 
* '''border=''' - ''Optional'' Notice box border bar color (default see below)
<dt>Syntax:</dt>
*:Border options
<dd>Type <code>{{t|Notice|parameters}}</code> somewhere.</dd>
*:* red - <span style="background-color:#b22222;">&nbsp; &nbsp;</span>: <code>10px solid #b22222</code>
 
*:* orange - <span style="background-color:#f28500;">&nbsp; &nbsp;</span>: <code>10px solid #f28500</code>
<dt>Parameters:</dt>
*:* yellow - <span style="background-color:#f4c430;">&nbsp; &nbsp;</span>: <code>10px solid #f4c430</code>
<dd>
*:* purple - <span style="background-color:#9932cc;">&nbsp; &nbsp;</span>: <code>10px solid #9932cc</code>
*<i>Recommended</i>: {{para|type}}
*:* blue - <span style="background-color:#1e90ff;">&nbsp; &nbsp;</span>: <code>10px solid #1e90ff</code> ''(default)''
*:Notice box header text.
*:* green - <span style="background-color:#228b22;">&nbsp; &nbsp;</span>: <code>10px solid #228b22</code>
*:Default: {{para|type|<var>Header text</var>}}
*:* gray - <span style="background-color:#bba;">&nbsp; &nbsp;</span>: <code>10px solid #bba</code>
*<i>Recommended</i>: {{para|info}}
* '''style=''' - ''Optional'' Completely override the inline-CSS used for the Notice box, defaults to:
*:Notice box additional info.
*:Default: {{para|type|<var>Explanation</var>}}
*<i>Optional</i>: {{para|image}}
*:Notice box symbol image.
*:Provide the image-filename with extension, or use {{para|image|no}} to completely remove/inhibit the image part.
*:Default: {{para|image|<var>Gtk-ok.png</var>}}
*<i>Optional</i>: {{para|imageSize}}
*:Notice box symbol image-size.
*:Provide the image-size including the unit, eg: <code>px</code>, part.
*:Default: {{para|imageSize|<var>50px</var>}}
*<i>Optional</i>: {{para|border}}
*:Notice box left-border-bar definition.
*:Use {{para|border|<var>definition</var>}}, where <var>definition</var> is a valid custom definition for the [http://www.w3schools.com/cssref/pr_border-left.asp CSS property <code>border-left</code>].
*:Or use {{para|border|preset}}, where <var>preset</var> is one of the predefined names below<nowiki>:</nowiki>
*:*<span style="background-color:#b22222;">&nbsp; &nbsp;</span> red &rArr; <code>10px solid #b22222</code>
*:*<span style="background-color:#f28500;">&nbsp; &nbsp;</span> orange &rArr; <code>10px solid #f28500</code>
*:*<span style="background-color:#f4c430;">&nbsp; &nbsp;</span> yellow &rArr; <code>10px solid #f4c430</code>
*:*<span style="background-color:#9932cc;">&nbsp; &nbsp;</span> purple &rArr; <code>10px solid #9932cc</code>
*:*<span style="background-color:#1e90ff;">&nbsp; &nbsp;</span> blue &rArr; <code>10px solid #1e90ff</code>
*:*<span style="background-color:#228b22;">&nbsp; &nbsp;</span> green &rArr; <code>10px solid #228b22</code>
*:*<span style="background-color:#bba;">&nbsp; &nbsp;</span> gray &rArr; <code>10px solid #bba</code>
*:Default: {{para|border|blue}}
*:<i>You don't need to provide the <code>;</code> at the end to properly terminate the definition(s) because it will be appended automatically for proper functionality.</i>
*<i>Optional</i>: {{para|style|<var>inline-CSS;</var>}}
*:Completely override the inline-CSS used in the [http://www.w3schools.com/tags/att_global_style.asp style-attribute] of the table that generates the Notice box.
*:Where <code><var>inline-CSS;</var></code> defaults to:
*:<code>font-size:{{{styleFontSize}}}; width:{{{styleWidth}}}; margin:{{{styleMargin}}}; border:{{{styleBorder}}}; border-collapse:{{{styleBorderCollapse}}}; background-color:{{{styleBackgroundColor}}}; border-left:{{{border}}}</code>
*:<code>font-size:{{{styleFontSize}}}; width:{{{styleWidth}}}; margin:{{{styleMargin}}}; border:{{{styleBorder}}}; border-collapse:{{{styleBorderCollapse}}}; background-color:{{{styleBackgroundColor}}}; border-left:{{{border}}}</code>
*Partially override the inline-CSS used for the Notice box. ''(Optional)''
*:To override parts of the default shown above you can use: <i>(defaults shown as value)</i>
*:*'''styleFontSize=''' (default: <code>95%</code>)
*:*{{para|styleFontSize|95%}}
*:*'''styleWidth=''' (default: <code>80%</code>)
*:*{{para|styleWidth|80%}}
*:*'''styleMargin=''' (default: <code>0 auto</code>)
*:*{{para|styleMargin|0 auto}}
*:*'''styleBorder=''' (default: <code>1px #aaa solid</code>)
*:*{{para|styleBorder|1px #aaa solid}}
*:*'''styleBorderCollapse=''' (default: <code>collapse</code>)
*:*{{para|styleBorderCollapse|collapse}}
*:*'''styleBackgroundColor=''' (default: <code>#eee</code>)
*:*{{para|styleBackgroundColor|#eee}}
;Sample output
</dd>
:<code><nowiki>{{Notice|type=Notice box|info=Does not use the {{t|Ambox}} template and could be considered a simpler alternative, since it doesn't have a CSS dependency.}}</nowiki></code>
 
::gives...
<dt>Sample output:</dt>
:{{Notice|type=Notice box|info=Does not use the {{t|Ambox}} template and could be considered a simpler alternative, since it doesn't have a CSS dependency.}}
<dd>
  <code><nowiki>{{Notice|type=Notice box|info=Does not use the {{t|Ambox}} template and could be considered a simpler alternative, since it doesn't have a CSS dependency.}}</nowiki></code>
</dd>
<dd>gives...</dd>
<dd>
  {{Notice|type=Notice box|info=Does not use the {{t|Ambox}} template and could be considered a simpler alternative, since it doesn't have a CSS dependency.}}
</dd>


{{clear}}
<dt>See also:</dt>
;See also
<dd>
* {{t|Ambox}}<includeonly>
*{{t|Ambox}}<includeonly>
</dd>
</dl>
[[Category:Wikia Help templates]]
[[Category:Wikia Help templates]]
</includeonly><noinclude>
</includeonly><noinclude>
[[Category:Template documentation]]
[[Category:Template documentation]]
</noinclude>
</noinclude>

Revision as of 12:24, 24 April 2016

Description:
A simple notice box.
Dependencies:
Syntax:
Type {{Notice|parameters}} somewhere.
Parameters:
  • Recommended: |type=
    Notice box header text.
    Default: |type=Header text
  • Recommended: |info=
    Notice box additional info.
    Default: |type=Explanation
  • Optional: |image=
    Notice box symbol image.
    Provide the image-filename with extension, or use |image=no to completely remove/inhibit the image part.
    Default: |image=Gtk-ok.png
  • Optional: |imageSize=
    Notice box symbol image-size.
    Provide the image-size including the unit, eg: px, part.
    Default: |imageSize=50px
  • Optional: |border=
    Notice box left-border-bar definition.
    Use |border=definition, where definition is a valid custom definition for the CSS property border-left.
    Or use |border=preset, where preset is one of the predefined names below:
    •     red ⇒ 10px solid #b22222
    •     orange ⇒ 10px solid #f28500
    •     yellow ⇒ 10px solid #f4c430
    •     purple ⇒ 10px solid #9932cc
    •     blue ⇒ 10px solid #1e90ff
    •     green ⇒ 10px solid #228b22
    •     gray ⇒ 10px solid #bba
    Default: |border=blue
    You don't need to provide the ; at the end to properly terminate the definition(s) because it will be appended automatically for proper functionality.
  • Optional: |style=inline-CSS;
    Completely override the inline-CSS used in the style-attribute of the table that generates the Notice box.
    Where inline-CSS; defaults to:
    font-size:{{{styleFontSize}}}; width:{{{styleWidth}}}; margin:{{{styleMargin}}}; border:{{{styleBorder}}}; border-collapse:{{{styleBorderCollapse}}}; background-color:{{{styleBackgroundColor}}}; border-left:{{{border}}}
    To override parts of the default shown above you can use: (defaults shown as value)
    • |styleFontSize=95%
    • |styleWidth=80%
    • |styleMargin=0 auto
    • |styleBorder=1px #aaa solid
    • |styleBorderCollapse=collapse
    • |styleBackgroundColor=#eee
Sample output:
{{Notice|type=Notice box|info=Does not use the {{t|Ambox}} template and could be considered a simpler alternative, since it doesn't have a CSS dependency.}}
gives...
Notice box
Does not use the {{Ambox}} template and could be considered a simpler alternative, since it doesn't have a CSS dependency.
See also: