Template:Iconbox begin

From Mumble Wiki
Jump to: navigation, search
Icons oxygen 48x48 actions view-pim-notes.png

Parameters

  • type= error|information|warning|tag|tip|download
    Default is note.
    tip and note have a "tip|note" label in the first line; to replace it use label=foo. Use nolabel=true to disable it.
  • shadow= yes|no
    Default is no
  • border-style=
    CSS definition of border-style property.
    Default is solid
    To disable set it to none.
  • width= anything css understands (px, %, em)
    Default is nothing which sets width to 100% of the parent.
  • display=
    CSS definition of display property.
    Default is <not defined>.
  • margin=
    Default is margin-top: 1.5em.
  • nolabel= true|false
    Default is false

You also need Template:Iconbox end.

Types and examples

Default

Default if no type was given is note but without a possibilty to set a label.

 {{Iconbox begin}}Default{{Iconbox end}}
Icons oxygen 48x48 actions view-pim-notes.png
Default

Warning

 {{Box|type=warning|border-style=none|shadow=yes}}Warning{{Iconbox end}}
Icons oxygen 48x48 status task-attention.png
Warning

Information

 {{Iconbox begin|type=information|display=inline-block}}Information{{Iconbox end}}
Icons oxygen 48x48 status dialog-information.png
Information text foo

Error

 {{Iconbox begin|type=error|width=60%}}Here is really much. There is really much text here. There is really much text here. There is really much text here.
There is really much text here. There is really much text here. There is really much text here. There is really much text here. There is really much text here.
There is really much text here. <br />To show you that the this box contains of a left div for<br />the icon and a right div for the content.{{Iconbox end}}
Icons oxygen 48x48 status task-reject.png
Here is really much. There is really much text here. There is really much text here. There is really much text here. There is really much text here. There is really much text here. There is really much text here. There is really much text here. There is really much text here. There is really much text here.
To show you that the this box contains of a left div for
the icon and a right div for the content.

Tag

 {{Iconbox begin|type=tag|shadow=yes|width=30%}}Tag{{Iconbox end}}
Icons oxygen 48x48 status mail-tagged.png
Tag

Note

 {{Iconbox begin|type=note|border-style=dotted}}Note{{Iconbox end}}
Icons oxygen 48x48 actions view-pim-notes.png
Note:
Note text foo bar

Tip

 {{Iconbox begin|type=tip|width=20em}}Tip{{Iconbox end}}
Icons oxygen 48x48 apps ktip.png
Tip:
Tip
 {{Iconbox begin|type=tip|width=20em|label=TESTBAL}}Tip{{Iconbox end}}
Icons oxygen 48x48 apps ktip.png
TESTBAL
Tip
 {{Iconbox begin|type=tip|width=20em|nolabel=true}}Tip{{Iconbox end}}
Icons oxygen 48x48 apps ktip.png
Tip

Download

 {{Iconbox begin|type=download}}Download{{Iconbox end}}
Icons oxygen 48x48 devices drive-harddisk.png
Download

Side by side

 {{Iconbox begin|type=download|display=inline-block}}Download{{Iconbox end}}
{{Iconbox begin|type=error|border-style=dotted|display=inline-block|margin=0 5em 0 5em}}Error<br />''margin=0 5em 0 5em''{{Iconbox end}}
{{Iconbox begin|type=information|width=150px|display=inline-block}}Information{{Iconbox end}}
Icons oxygen 48x48 devices drive-harddisk.png
Download
Icons oxygen 48x48 status task-reject.png
Error
margin=0 5em 0 5em
Icons oxygen 48x48 status dialog-information.png
Information

Minimal width

To not have the width of 100% use also display:inline-block;.

Icons oxygen 48x48 devices drive-harddisk.png
Download text example foo