Design-Box – Shortcode

Oft möchte man gewisse Hinweise in besonderen Farben hinterlegen. Dafür gibt es den „Design-Box“ Shortcode welcher im Aussehen an die Allert Classen von Bootstap angelehnt sind. Auch bei diesem Shortcode wurde wieder auf Einfachheit und Geschwindigkeit wert gelegt ohne aber die Funktionalität zu sehr zu beschränken.

Aufbau des Shortcodes:

[showcode][designbox typ=““ size=““ title=““ icon=““ noicon=““ image=““]Text in der Designbox[/designbox][/showcode]

[designbox typ=“info“ noicon=“1″ title=“Parameter und Optionen der Designbox“]

„title“: mögliche Werte [beliebig]
Wird der Parameter nicht angegeben wird kein Titel in der Designbox ausgegeben

„typ“: mögliche Werte [ok,warning,error,info,grau]
Wird der Parameter nicht angegeben wird der typ=“ok“ verwendet. Beispiele mit den Farben der Typen findest Du weiter unten.

„size“: mögliche Werte [normal,small,big]
Wird der Parameter nicht angegeben wird size=“normal“ verwendet. Die Größe richtet sich hierbei nach deinem Theme.

„icon“: mögliche Werte [jedes FontAwson v4.7 ICON]
Wenn „icon“ nicht angegeben wird, wird das Standard Icon von „typ“ verwendet. Wird es angegeben wird immer dieses ICON verwendet.
Du kannst jedes beliebige FontAweson v4.7 ICON verwenden. Die Übersicht der ICONS findest Du hier

„noicon“: mögliche Werte [0,1]
Mit diesem Flag wird das ICON deaktiviert und es wird nur der Text ausgegeben!

„image“: mögliche Werte [beliebiger URL zu einem Bild]
Mit diesem Flag wird das ICON deaktiviert und statt dessen das als Parameter übergeben Bild verwendet. Achte bitte drauf, dass das Bild nicht zu Groß gewählt wird, denn es wird mit maximal 100 Pixel Breite angezeigt. (Um unnötige Ladezeit zu verhindern)
[/designbox]

 

Hier einige Beispiele des „Designbox-ShortCode“

[designbox typ=“ok“ size=“big“ title=“Beispiel – OK BOX big“]Parameter: typ=“ok“ size=“big“ title=“Beispiel – OK BOX big“[/designbox]

[designbox typ=“ok“ title=“Beispiel – OK BOX normal“]Parameter: typ=“ok“ title=“Beispiel – OK BOX normal“[/designbox]

[designbox typ=“ok“ size=“small“ title=“Beispiel – OK BOX small“]Parameter: typ=“ok“ size=“small“ title=“Beispiel – OK BOX small“[/designbox]

[designbox typ=“ok“ size=“small“ noicon=“1″ title=“Beispiel – OK BOX small ohne ICON“]Parameter: typ=“ok“ size=“small“ noicon=“1″ title=“Beispiel – OK BOX small ohne ICON“[/designbox]

[designbox typ=“ok“ size=“small“ noicon=“1″ title=“Beispiel nur mit Titel und ohne Text und ICON“][/designbox]

[designbox typ=“ok“ size=“small“ noicon=“1″ title=““]Parameter: typ=“ok“ size=“small“ noicon=“1″ title=““ Beispiel – ohne ICON und Titel[/designbox]

[designbox typ=“ok“ icon=“fa-area-chart“ title=“Beispiel – OK BOX individuelles ICON“]Parameter:  typ=“ok“ icon=“fa-area-chart“ title=“Beispiel – OK BOX individuelles ICON“
Du kannst jedes beliebige FontAweson v4.7 ICON verwenden. Die Übersicht der ICONS findest Du hier[/designbox]

[designbox typ=“ok“ size=“big“ image=“http://wpentwicklung.jetzt.at/wp-content/uploads/2018/03/Misc_icon_Red_Atom_1896-150×150.png“ title=“Beispiel – OK BOX individuelles Bild“]Parameter:  typ=“ok“ size=“big“ image=“https:/plugin.erotikwebmaster.info/wp-content/uploads/sites/2/2018/03/Misc_icon_Red_Atom_1896-150×150-1.png“ title=“Beispiel – OK BOX individuelles Bild“
Das Bild hat dabei eine maximale Größe von 100px[/designbox]

[designbox typ=“warning“ title=“Beispiel – warning BOX“]Parameter:  typ=“warning“[/designbox]

[designbox typ=“error“ title=“Beispiel – error BOX“]Parameter:  typ=“error“[/designbox]

[designbox typ=“info“ title=“Beispiel – info BOX“]Parameter:  typ=“info“[/designbox]

[designbox typ=“grau“ title=“Beispiel – frage BOX“]Parameter:  typ=“grau“[/designbox]

[designbox typ=“ok“ icon=“fa-hand-o-right“  title=“Beispiel mit Formatierung im Inhalt“]

Parameter:  typ=“ok“ icon=“fa-hand-o-right“

Text in der Designbox. Text in der Designbox. Text in der Designbox.

  • Punkt 1
  • Punkt 2
  • Punkt 3

[/designbox]