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.

screenshot of banner template Banner examples

The following parameters can be set in visual editing mode:

No description.

File

Default is grey (#efefef). Replace with any hex value, (e.g. #ffffe6)

Default
empty
Example
empty
StringNumberno description
start, center
empty
Allows to customize the margin of the title (Unknown

Template parameters

Parameter Description Type Status
Image nameBanner image (optional) banner-image

Image name, without the File: prefix

Default
empty
Example
empty
myimage.png
Auto value
empty
Unknown optionalsuggested
Image width image-width

Width in pixels. Default setting is 200

Default
empty
200
Example
empty
Auto value
empty
Number optional suggested
Image alignment imagealign

no description

Default
left
Example
left, right
Auto value
empty
Unknown suggested
Heading banner-title

Text Box heading

Default
empty
Example
empty
Auto value
empty
String suggested
Heading size titlesize

no description

Default
1.6em
Example
2em, 15px
Auto value
empty
Unknown suggested
Heading color titlecolor

Color of the heading.

Default
#000000
Example
#ffffff
Auto value
empty
Unknown suggested
Text banner-text

1-3 lines of text

Default
empty
Example
empty
Auto value
empty
Content optionalsuggested
Background colorText size boxbgcolortextsize

no description

Default
1.3em
Example
12px, 1em
Auto value
empty
Unknown optional Padding of the container box boxpadding

Sets the padding for the box in pixels. Default is 20.

Default
empty
Example
empty
suggested
Text color textcolor

no description

Default
#000000
Example
#000000
Auto value
empty
Unknown optionalsuggested
Content padding (optional) contentpadding

Text padding independent from box paddingPadding around text. Default is 010px.

Default
empty
Example
empty
20px
Auto value
empty
Number optionalsuggested
Vertical alignment Padding of the container box content(optional) boxalignitems boxpadding

Sets the padding for the box in pixels. Default is 0.

Default
empty
Example
10px
Auto value
StringNumber suggested
Background color (optional) Title margin titlemargin boxbgcolor

Default is grey (#efefef). Replace with any hex value, (e.g,. 0px 0px 0px 0px#ffffe6)

Default
empty
#efefef
Example
empty
Auto value
empty
String 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="Banner/styles.css" /><div class="bannerbox" style="align-items:{{{boxalignitems|start}}}; background:{{{boxbgcolor|#efefef}}}; padding:{{{boxpadding|20}}}px">
+
{{#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}}}|left|{{{image-width|200}}}x{{{image-width|200}}}px|link=]]</div>|}}<div class="banner-content" style="padding:{{{contentpadding|0}}}px;">{{#if:{{{banner-title|}}}|<div class="banner-title"><h1 style="margin:{{{titlemargin|margin:12px 0 0 0; }}}>{{{banner-title}}}</h1></div>|}}{{#if:{{{banner-text|}}}|<div class="banner-text">{{{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.
 
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>
 
<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": "wiki-file-name",
+
"en": "Image name, without the File: prefix",
"label": "Image name"
+
"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": "Text heading"
+
"en": "Heading",
 +
"de": "Überschrift",
 +
"de-formal": "Überschrift"
 +
},
 +
"description": "Box heading"
 
},
 
},
"banner-text": {
+
"titlesize": {
"label": "Text",
+
"label": {
"description": "1-3 lines of text",
+
"en": "Heading size",
"type": "content"
+
"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
 
},
 
},
"boxbgcolor": {
+
"titlecolor": {
"label": "Background color",
+
"label": {
"description": "Default is grey (#efefef). Replace with any hex value, (e.g. #ffffe6)",
+
"en": "Heading color",
"type": "string"
+
"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
 
},
 
},
"boxpadding": {
+
"banner-text": {
"label": "Padding of the container box",
+
"label": {
"description": "Sets the padding for the box in pixels. Default is 20.",
+
"en": "Text",
"type": "number"
+
"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
 
},
 
},
"contentpadding": {
+
"textcolor":{
"label": "Content padding",
+
"label": {
"description": "Text padding independent from box padding. Default is 0.",
+
"en": "Text color",
"type": "number"
+
"de": "Textfarbe",
 +
"de-formal": "Textfarbe"
 +
},
 +
"example": {
 +
"en": "#000000",
 +
"de": "#000000",
 +
"de-formal": "#000000" },
 +
"default": {
 +
"en": "#000000",
 +
"de": "#000000",
 +
"de-formal": "#000000" },
 +
"suggested": true
 
},
 
},
"image-width": {
+
"textsize": {
"label": "Image width",
+
"label": {
"description": "Width in pixels. Default setting is 200",
+
"en": "Text size",
"type": "number"
+
"de": "Textgröße",
},
+
"de-formal": "Textgröße"
"boxalignitems": {
+
},
"label": "Vertical alignment of the box content",
+
"example": {
"example": "start, center",
+
"en": "12px, 1em",
"type": "string"
+
"de": "12px, 1em",
},
+
"de-formal": "12px, 1em"
"titlemargin": {
+
},
"label": "Title margin",
+
"default": {
"description": "Allows to customize the margin of the title (e.g,. 0px 0px 0px 0px)"
+
"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",
"boxbgcolor",
+
"textsize",
 +
"textcolor",
 +
"contentpadding",
 
"boxpadding",
 
"boxpadding",
"contentpadding",
+
"boxbgcolor"
"boxalignitems",
+
]
"titlemargin"
 
],
 
"description": "The following parameters can be set in visual editing mode:"
 
 
}
 
}
 
</templatedata>
 
</templatedata>
 
</noinclude>
 
</noinclude>

Attachments

Discussions