Difference between revisions of "Template:Bannerbox"
(Created page with " <includeonly><templatestyles src="Banner/styles.css" /><div class="bannerbox" style="align-items:{{{boxalignitems|start}}}; background:{{{boxbgcolor|#efefef}}}; padding:{{{bo...") (Tag: 2017 source edit) |
(Tag: 2017 source edit) |
This template creates an intro banner on a page. The banner should contain an image (optional), a title and 2-3 lines of text.
The template files (Template:Banner and Template:Banner/styles.css can be downloaded as part of the template package.
The following parameters can be set in visual editing mode:
No description.
| Parameter | Description | Type | Status | ||||
|---|---|---|---|---|---|---|---|
| Image nameBanner image (optional) | banner-image |
Image name, without the File: prefix
|
FileUnknown | optionalsuggested | |||
| Image width | image-width |
Width in pixels. Default setting is 200
|
Number | optional | suggested | ||
| Image alignment |
imagealign
|
no description
|
Unknown | suggested | |||
| Heading | banner-title |
Text Box heading
|
String | suggested | |||
| Heading size |
titlesize
|
no description
|
Unknown | suggested | |||
| Heading color |
titlecolor
|
Color of the heading.
|
Unknown | suggested | |||
| Text | banner-text |
1-3 lines of text
|
Content | optionalsuggested | |||
| Background colorText size |
boxbgcolortextsize
|
no description
|
StringUnknown | optional | Padding of the container box |
boxpadding
|
Sets the padding for the box in pixels. Default is 20. |
| Text color |
textcolor
|
no description
|
NumberUnknown | optionalsuggested | |||
| Content padding (optional) | contentpadding |
Text padding independent from box paddingPadding around text. Default is 010px.
|
Number | optionalsuggested | |||
| Vertical alignment Padding of the container box content(optional) |
boxalignitems
|
no description
boxpadding
|
Sets the padding for the box in pixels. Default is 0.
|
|
|
StringNumber | suggested |
| Background color (optional) | Title margin |
titlemargin
|
Allows to customize the margin of the title (
boxbgcolor
|
Default is grey (#efefef). Replace with any hex value, (e.g,. 0px 0px 0px 0px#ffffe6)
|
UnknownString | optionalsuggested | |
<includeonly><templatestyles src="BannerBannerbox/styles.css" /><div class="bannerbox" style="align-items:{{{boxalignitems|startstart;{{#ifeq:{{{imagealign|}}}; background:{{{boxbgcolor|#efefef|right|flex-direction:row-reverse;|flex-dirction:row;}}{{#if:{{{boxbgcolor|}}}; |background:{{{boxbgcolor}}};|}}padding:{{{boxpadding|200px}}}px;"> {{#if:{{{banner-image|}}}|<div class="banner-image">[[File:{{{banner-image}}}|left|{{{image-width|200}}}x{{{image-width|200}}}px|{{!}}{{#if:{{{image-width|}}}|{{{image-width}}}x{{{image-width}}}px|200x200px}}{{!}}link=]]</div>|}}<div class="banner-content" {{#if:{{{contentpadding|}}}|style="padding:{{{contentpadding|0}}}px;""|}}>{{#if:{{{banner-title|}}}|<div class="banner-title"><h1 style="margin{{#if:{{{titlemargin|margin:12px 0 0 0; }}}titlesize|}}}|font-size:{{{titlesize}}};|font-size:1.6em;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</h1></div>|}}{{#if:{{{banner-text|}}}|<div class="banner-text" style="{{#if:{{{textcolor|}}}|color:{{{textcolor}}};|}}{{#if:{{{textsize|}}}|font-size:{{{textsize}}};|}}">{{{banner-text}}}</div>|}}</div></div></includeonly><noinclude> This template creates an intro banner on a page. The banner should contain an image (optional), a title and 2-3 lines of text. The template files (''Template:Banner'' and ''Template:Banner/styles.css'' can be downloaded as part of the [[Manual:Template/Template package|template package]]. [[File:template-download-Banner.PNG|550x550px|center|alt=screenshot of banner template|thumb|Banner examples]] <templatedata> { "params": { "banner-image": { "description": "<templatedata> { "params": { "boxbgcolor": { "label": { "en": "Background color (optional)", "de": "Hintergrundfarbe der Box (optional)", "de-formal": "Hintergrundfarbe der Box (optional)" }, "description": { "en": "Default is grey (#efefef). Replace with any hex value, (e.g. #ffffe6)", "de": "Standard ist grau (#efefef). Kann mit beliebigem Hex-Wert ersetzt werden (z.B. #ffffe6)", "de-formal": "Standard ist grau (#efefef). Kann mit beliebigem Hex-Wert ersetzt werden (z.B. #ffffe6)" }, "type": "string", "suggested": true, "default": { "en": "#efefef", "de": "#efefef", "de-formal": "#efefef" } }, "boxpadding": { "label": { "en": "Padding of the container box (optional)", "de": "Abstand des Inhalts zur Box", "de-formal": "Abstand des Inhalts zur Box" }, "description": { "en": "Sets the padding for the box in pixels. Default is 0.", "de": "Setzt den Abstand in Pixeln, Standard ist 0", "de-formal": "Setzt den Abstand in Pixeln, Standard ist 0" }, "type": "number", "example": { "en": "10px", "de": "10px", "de-formal": "10px" }, "suggested": true, "autovalue": "" }, "contentpadding": { "label": { "en": "Content padding (optional)", "de": "Textabstand", "de-formal": "Textabstand" }, "description": { "en": "Padding around text. Default is 10px.", "de": "Abstand um den Text. Standard ist 10px.", "de-formal": "Abstand um den Text. Standard ist 10px." }, "type": "number", "example": { "en": "20px", "de": "20px", "de-formal": "20px" }, "suggested": true }, "banner-image": { "description": { "en": "Image name, without the File: prefix", "type": "wiki-file-name", "label": "Image name" }, "banner-title": { "type": "string", "suggested": true, "label": "Heading", "description": "Text heading" }, "banner-text": { "label": "Text", "description": "1-3 lines of text", "type": "content" }, "boxbgcolor": { "label": "Background color", "description": "Default is grey (#efefef). Replace with any hex value, (e.g. #ffffe6)", "type": "string" }, "boxpadding": { "label": "Padding of the container box", "description": "Sets the padding for the box in pixels. Default is 20.", "type": "number" }, "contentpadding": { "label": "Content padding", "description": "Text padding independent from box padding. Default is 0.", "type": "number" }, "image-width": { "label": "Image width", "description": "Width in pixels. Default setting is 200", "type": "number" }, "boxalignitems": { "label": "Vertical alignment of the box content", "example": "start, center", "type": "string" }, "titlemargin": { "label": "Title margin", "description": "Allows to customize the margin of the title (e.g,. 0px 0px 0px 0px)" "de": "Bildname, ohne das Datei-Präfix", "de-formal": "Bildname, ohne das Datei-Präfix" }, "label": { "en": "Banner image (optional)", "de": "Bannergrafik (optional", "de-formal": "Bannergrafik (optional" }, "example": { "en": "myimage.png", "de": "meinbild.png", "de-formal": "meinbild.png" }, "suggested": true }, "image-width": { "label": { "en": "Image width", "de": "Bildbreite", "de-formal": "Bildbreite" }, "description": { "en": "Width in pixels. Default setting is 200", "de": "Breite in Pixel. Standard ist 200", "de-formal": "Breite in Pixel. Standard ist 200" }, "type": "number", "suggested": true, "default": { "en": "200", "de": "200", "de-formal": "200" } }, "imagealign": { "label": { "en": "Image alignment", "de": "Bildposition", "de-formal": "Bildposition" }, "example": { "en": "left, right", "de": "left, right", "de-formal": "left, right" }, "default": { "en": "left", "de": "left", "de-formal": "left" }, "suggested": true }, "banner-title": { "type": "string", "suggested": true, "label": { "en": "Heading", "de": "Überschrift", "de-formal": "Überschrift" }, "description": "Box heading" }, "titlesize": { "label": { "en": "Heading size", "de": "Größe der Überschrift", "de-formal": "Größe der Überschrift" }, "example": { "en": "2em, 15px", "de": "2em, 15px", "de-formal": "2em, 15px" }, "default": { "en": "1.6em", "de": "1.6em", "de-formal": "1.6em" }, "suggested": true }, "titlecolor": { "label": { "en": "Heading color", "de": "Farbe der Überschrift", "de-formal": "Farbe der Überschrift" }, "description": "Color of the heading. ", "example": { "en": "#ffffff", "de": "#ffffff", "de-formal": "#ffffff" }, "default": { "en": "#000000", "de": "#000000", "de-formal": "#000000" }, "suggested": true }, "banner-text": { "label": { "en": "Text", "de": "Text", "de-formal": "Text" }, "description": { "en": "1-3 lines of text", "de": "1-3 Zeilen Text", "de-formal": "1-3 Zeilen Text" }, "type": "content", "suggested": true }, "textcolor":{ "label": { "en": "Text color", "de": "Textfarbe", "de-formal": "Textfarbe" }, "example": { "en": "#000000", "de": "#000000", "de-formal": "#000000" }, "default": { "en": "#000000", "de": "#000000", "de-formal": "#000000" }, "suggested": true }, "textsize": { "label": { "en": "Text size", "de": "Textgröße", "de-formal": "Textgröße" }, "example": { "en": "12px, 1em", "de": "12px, 1em", "de-formal": "12px, 1em" }, "default": { "en": "1.3em", "de": "1.3em", "de-formal": "1.3em" }, "suggested": true } }, "paramOrder": [ "banner-image", "image-width", "banner-titleimagealign", "banner-text", "boxbgcolor", "boxpadding", "contentpadding", "boxalignitems", "titlemargin" ], "description": "The following parameters can be set in visual editing mode:" title", "titlesize", "titlecolor", "banner-text", "textsize", "textcolor", "contentpadding", "boxpadding", "boxbgcolor" ] } </templatedata> </noinclude>
| Line 1: | Line 1: | ||
| − | + | <includeonly><templatestyles src="Bannerbox/styles.css" /><div class="bannerbox" style="align-items:start;{{#ifeq:{{{imagealign|}}}|right|flex-direction:row-reverse;|flex-dirction:row;}}{{#if:{{{boxbgcolor|}}}|background:{{{boxbgcolor}}};|}}padding:{{{boxpadding|0px}}};"> | |
| − | <includeonly><templatestyles src=" | + | {{#if:{{{banner-image|}}}|<div class="banner-image">[[File:{{{banner-image}}}{{!}}{{#if:{{{image-width|}}}|{{{image-width}}}x{{{image-width}}}px|200x200px}}{{!}}link=]]</div>|}}<div class="banner-content" {{#if:{{{contentpadding|}}}|style="padding:{{{contentpadding}}}px"|}}>{{#if:{{{banner-title|}}}|<div class="banner-title"><h1 style="{{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:1.6em;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</h1></div>|}}{{#if:{{{banner-text|}}}|<div class="banner-text" style="{{#if:{{{textcolor|}}}|color:{{{textcolor}}};|}}{{#if:{{{textsize|}}}|font-size:{{{textsize}}};|}}">{{{banner-text}}}</div>|}}</div></div></includeonly><noinclude> |
| − | {{#if:{{{banner-image|}}}|<div class="banner-image">[[File:{{{banner-image}}}| | ||
This template creates an intro banner on a page. The banner should contain an image (optional), a title and 2-3 lines of text. | This template creates an intro banner on a page. The banner should contain an image (optional), a title and 2-3 lines of text. | ||
| − | |||
| − | |||
| − | |||
| − | |||
<templatedata> | <templatedata> | ||
{ | { | ||
"params": { | "params": { | ||
| + | "boxbgcolor": { | ||
| + | "label": { | ||
| + | "en": "Background color (optional)", | ||
| + | "de": "Hintergrundfarbe der Box (optional)", | ||
| + | "de-formal": "Hintergrundfarbe der Box (optional)" | ||
| + | }, | ||
| + | "description": { | ||
| + | "en": "Default is grey (#efefef). Replace with any hex value, (e.g. #ffffe6)", | ||
| + | "de": "Standard ist grau (#efefef). Kann mit beliebigem Hex-Wert ersetzt werden (z.B. #ffffe6)", | ||
| + | "de-formal": "Standard ist grau (#efefef). Kann mit beliebigem Hex-Wert ersetzt werden (z.B. #ffffe6)" | ||
| + | }, | ||
| + | "type": "string", | ||
| + | "suggested": true, | ||
| + | "default": { | ||
| + | "en": "#efefef", | ||
| + | "de": "#efefef", | ||
| + | "de-formal": "#efefef" | ||
| + | } | ||
| + | }, | ||
| + | "boxpadding": { | ||
| + | "label": { | ||
| + | "en": "Padding of the container box (optional)", | ||
| + | "de": "Abstand des Inhalts zur Box", | ||
| + | "de-formal": "Abstand des Inhalts zur Box" | ||
| + | }, | ||
| + | "description": { | ||
| + | "en": "Sets the padding for the box in pixels. Default is 0.", | ||
| + | "de": "Setzt den Abstand in Pixeln, Standard ist 0", | ||
| + | "de-formal": "Setzt den Abstand in Pixeln, Standard ist 0" | ||
| + | }, | ||
| + | "type": "number", | ||
| + | "example": { | ||
| + | "en": "10px", | ||
| + | "de": "10px", | ||
| + | "de-formal": "10px" | ||
| + | }, | ||
| + | "suggested": true, | ||
| + | "autovalue": "" | ||
| + | }, | ||
| + | "contentpadding": { | ||
| + | "label": { | ||
| + | "en": "Content padding (optional)", | ||
| + | "de": "Textabstand", | ||
| + | "de-formal": "Textabstand" | ||
| + | }, | ||
| + | "description": { | ||
| + | "en": "Padding around text. Default is 10px.", | ||
| + | "de": "Abstand um den Text. Standard ist 10px.", | ||
| + | "de-formal": "Abstand um den Text. Standard ist 10px." | ||
| + | }, | ||
| + | "type": "number", | ||
| + | "example": { | ||
| + | "en": "20px", | ||
| + | "de": "20px", | ||
| + | "de-formal": "20px" | ||
| + | }, | ||
| + | "suggested": true | ||
| + | }, | ||
"banner-image": { | "banner-image": { | ||
| − | "description": "Image name, without the File: prefix", | + | "description": { |
| − | "type": " | + | "en": "Image name, without the File: prefix", |
| − | "label": "Image | + | "de": "Bildname, ohne das Datei-Präfix", |
| + | "de-formal": "Bildname, ohne das Datei-Präfix" | ||
| + | }, | ||
| + | "label": { | ||
| + | "en": "Banner image (optional)", | ||
| + | "de": "Bannergrafik (optional", | ||
| + | "de-formal": "Bannergrafik (optional" | ||
| + | }, | ||
| + | "example": { | ||
| + | "en": "myimage.png", | ||
| + | "de": "meinbild.png", | ||
| + | "de-formal": "meinbild.png" | ||
| + | }, | ||
| + | "suggested": true | ||
| + | }, | ||
| + | "image-width": { | ||
| + | "label": { | ||
| + | "en": "Image width", | ||
| + | "de": "Bildbreite", | ||
| + | "de-formal": "Bildbreite" | ||
| + | }, | ||
| + | "description": { | ||
| + | "en": "Width in pixels. Default setting is 200", | ||
| + | "de": "Breite in Pixel. Standard ist 200", | ||
| + | "de-formal": "Breite in Pixel. Standard ist 200" | ||
| + | }, | ||
| + | "type": "number", | ||
| + | "suggested": true, | ||
| + | "default": { | ||
| + | "en": "200", | ||
| + | "de": "200", | ||
| + | "de-formal": "200" | ||
| + | } | ||
| + | }, | ||
| + | "imagealign": { | ||
| + | "label": { | ||
| + | "en": "Image alignment", | ||
| + | "de": "Bildposition", | ||
| + | "de-formal": "Bildposition" | ||
| + | }, | ||
| + | "example": { | ||
| + | "en": "left, right", | ||
| + | "de": "left, right", | ||
| + | "de-formal": "left, right" | ||
| + | }, | ||
| + | "default": { | ||
| + | "en": "left", | ||
| + | "de": "left", | ||
| + | "de-formal": "left" | ||
| + | }, | ||
| + | "suggested": true | ||
}, | }, | ||
"banner-title": { | "banner-title": { | ||
"type": "string", | "type": "string", | ||
"suggested": true, | "suggested": true, | ||
| − | "label": "Heading", | + | "label": { |
| − | "description": " | + | "en": "Heading", |
| + | "de": "Überschrift", | ||
| + | "de-formal": "Überschrift" | ||
| + | }, | ||
| + | "description": "Box heading" | ||
}, | }, | ||
| − | " | + | "titlesize": { |
| − | "label": " | + | "label": { |
| − | " | + | "en": "Heading size", |
| − | " | + | "de": "Größe der Überschrift", |
| + | "de-formal": "Größe der Überschrift" | ||
| + | }, | ||
| + | "example": { | ||
| + | "en": "2em, 15px", | ||
| + | "de": "2em, 15px", | ||
| + | "de-formal": "2em, 15px" | ||
| + | }, | ||
| + | "default": { | ||
| + | "en": "1.6em", | ||
| + | "de": "1.6em", | ||
| + | "de-formal": "1.6em" | ||
| + | }, | ||
| + | "suggested": true | ||
}, | }, | ||
| − | " | + | "titlecolor": { |
| − | "label": " | + | "label": { |
| − | "description": " | + | "en": "Heading color", |
| − | " | + | "de": "Farbe der Überschrift", |
| + | "de-formal": "Farbe der Überschrift" | ||
| + | }, | ||
| + | "description": "Color of the heading. ", | ||
| + | "example": { | ||
| + | "en": "#ffffff", | ||
| + | "de": "#ffffff", | ||
| + | "de-formal": "#ffffff" | ||
| + | }, | ||
| + | "default": { | ||
| + | "en": "#000000", | ||
| + | "de": "#000000", | ||
| + | "de-formal": "#000000" | ||
| + | }, | ||
| + | "suggested": true | ||
}, | }, | ||
| − | " | + | "banner-text": { |
| − | "label": " | + | "label": { |
| − | "description": " | + | "en": "Text", |
| − | "type": " | + | "de": "Text", |
| + | "de-formal": "Text" | ||
| + | }, | ||
| + | "description": { | ||
| + | "en": "1-3 lines of text", | ||
| + | "de": "1-3 Zeilen Text", | ||
| + | "de-formal": "1-3 Zeilen Text" | ||
| + | }, | ||
| + | "type": "content", | ||
| + | "suggested": true | ||
}, | }, | ||
| − | " | + | "textcolor":{ |
| − | "label": " | + | "label": { |
| − | " | + | "en": "Text color", |
| − | " | + | "de": "Textfarbe", |
| + | "de-formal": "Textfarbe" | ||
| + | }, | ||
| + | "example": { | ||
| + | "en": "#000000", | ||
| + | "de": "#000000", | ||
| + | "de-formal": "#000000" }, | ||
| + | "default": { | ||
| + | "en": "#000000", | ||
| + | "de": "#000000", | ||
| + | "de-formal": "#000000" }, | ||
| + | "suggested": true | ||
}, | }, | ||
| − | " | + | "textsize": { |
| − | "label": " | + | "label": { |
| − | + | "en": "Text size", | |
| − | + | "de": "Textgröße", | |
| − | + | "de-formal": "Textgröße" | |
| − | + | }, | |
| − | + | "example": { | |
| − | + | "en": "12px, 1em", | |
| − | + | "de": "12px, 1em", | |
| − | + | "de-formal": "12px, 1em" | |
| − | + | }, | |
| − | + | "default": { | |
| − | + | "en": "1.3em", | |
| + | "de": "1.3em", | ||
| + | "de-formal": "1.3em" | ||
| + | }, | ||
| + | "suggested": true | ||
} | } | ||
}, | }, | ||
| Line 59: | Line 217: | ||
"banner-image", | "banner-image", | ||
"image-width", | "image-width", | ||
| + | "imagealign", | ||
"banner-title", | "banner-title", | ||
| + | "titlesize", | ||
| + | "titlecolor", | ||
"banner-text", | "banner-text", | ||
| − | " | + | "textsize", |
| + | "textcolor", | ||
| + | "contentpadding", | ||
"boxpadding", | "boxpadding", | ||
| − | " | + | "boxbgcolor" |
| − | + | ] | |
| − | |||
| − | ] | ||
| − | |||
} | } | ||
</templatedata> | </templatedata> | ||
</noinclude> | </noinclude> | ||