Manual:Extension/Forms and Templates download/Banner: Difference between pages

Revision as of 11:03, 12 April 2022

This template creates a page banner that you can include on portal pages, for example. You can see an example here in the Helpdesk on the page Community.

Importing the template

The import file is included in the archive file HW-banner.zip. Unpack the zip file first.

On the page Special:Import follow these steps:

Select file and choose HW-banner.xml.
Enter an Interwiki prefix. Since this field is required, simply add hw (for hallowelt).
Keep the selection Import to default locations.
Click Upload file...

The template is now available in your wiki.

Pages included in the import

The xml import creates the following files in your wiki:

Template:Banner
Template:Banner/styles.css

Creating a banner

From the Visual Editor Insert > Template menu, add the template "Banner".
File:Template Banner step4.png
Inserting the template through VisualEditor
Click on the inserted template to view the available parameters for formatting the look of the banner.

File:Template Banner step5.png

Available banner settings

Important!The settings only take effect after you save the page if you have just inserted the banner template on your page.

All settings for the banner are optional. This means that a box can be generated without image, heading, or text.

Example settings

Banner settings


	Element	Value	Description
1	Banner image	QM:Flower_white.jpg	Image name (with namespace prefix, if it exists, but without the File: prefix). The banner image is optional.
	Image width	200	Number. The width will automatically be used as pixel-value. Default value: 200
	Image alignment	left, right	Shows the imag to the left or right. Default value: left.
2	Heading	Meine Überschrift	Heading text
	Heading size	1.6em	Size can also be entered as 16px or any other css size value. Default value: 1.6em.
	Heading color	#444444	Color as hex value.
3	Text	Das ist der Inhalt.	Text of the box.
	Text size	1.2em	see Heading size
	Text color	#444444	see Heading color
4	Content padding	20px	Distance of the title/text area to the box and the image. Default value:10px.
5	Padding of the container box	10px	Padding of the box itself. Default value: 0.
6	Background color	#efefef	Color as hex value . Default value #efefef (a light grey)

Technical Reference: Forms

To submit feedback about this documentation, visit our community forum.

@@ Line 1: / Line 1: @@
-The '''Forms''' extension allows formatting a wiki page or a user dialog as a form. It is also used in conjunction with the [[Reference:Workflows|Workflows]] extension where it provides input forms for workflow data.
+<div class="downloadarea">
+<span class="getButton">[[Media:HW-banner.zip|Download]]</span>
-==Introduction==
+[[File:banner-example.png|450x450px|link=Special:FilePath/banner-example.png]]
-To create a checklist as a form,  for example, the following steps are necessary:
+</div>This template creates a page banner that you can include on portal pages, for example. You can see an example here in the Helpdesk on the page [[Community]].
+==Importing the template==
+The import file is included in the archive file ''HW-banner.zip''. Unpack the zip file first.
-# '''Create and save the checklist form''' via the ''Special:Form_editor'' special page. The form serves as a template for all checklists that are created with it.
+On the page ''Special:Import'' follow these steps:
-# '''Create and save checklist instances''' via the special page ''Special:Create_form_instance''.
+#'''Select file''' and choose ''HW-banner.xml''.
+#'''Enter''' an Interwiki prefix. Since this field is required, simply add ''hw'' (for hallowelt).
+#'''Keep''' the selection ''Import to default locations''.
+#'''Click'''  ''Upload file...''
-Optionally, the styling of the form can be adjusted.
+The  template is now available in your wiki.
+==Pages included in the import==
+The xml import creates the following files in your wiki:
-As an example, we are creating a small checklist for an event where food-related hygiene information has to be tracked.
+*Template:Banner
-[[File:checklist-event-screenshot.png|alt=Event checklist example|center|thumb|550x550px|Event checklist example]]
+*Template:Banner/styles.css
-==Create a checklist form==
+==Creating a banner==
-# '''Define''' the main properties of the form:
+#From the Visual Editor ''Insert > Template'' menu, add the template "Banner". <br />[[File:Template Banner step4.png|thumb|link=https://en.wiki.bluespice.com/wiki/File:Template_Banner_step4.png|center|519x519px|Inserting the template through VisualEditor]]
-## Open the Special:Form editor page.
+#Click on the inserted template to view the available parameters for formatting the look of the banner.<br />
-## Enter a name for the new form, e.g. EventChecklistHygiene. This name is used as a unique identifier for the database. Therefore, do not use any special characters (apart from the hyphen "-").
-## Enter a title, e.g. Event Checklist. This is displayed as the display title instead of the form name if you activate the Display title checkbox.
-# Add a form section:
-## Under Form Elements > Other, select the Section Heading element and, holding down the left mouse button, drag it into the interactive form editor field below.
-## Click the section heading radio button. The editing dialog opens.
-## Enter a field name. This is saved as a field ID in the database and should therefore not contain any special characters.
-## Enter the title for the heading. This is used as the display title in the form.
-# Create the form fields for the Event section. Here we add a text box as an example.
-## While holding down the left mouse button, drag the Text element under the section heading.
-## Click the text box radio button.
-## Enter a name. This is used as the database ID for this field and should therefore not contain any special characters.
-## Enter a label. This is displayed as the label for the text field.
-## Add more form elements.
-# Now define which form fields should be used to generate the page name of the form instances created with this form. As an example, we define the page name for the checklists as subpages to the form name with the values from the event name and date fields (both fields must exist in the form: EventChecklistHygiene/{{ech-event-name}}<nowiki>-{{ech-date} } </nowiki>
-## Mark event name and date as required so that these values always exist.
-## In the form properties, switch to the Target view.
-## Select "Json in a wiki page" as the target type.
-## Enter the desired title: EventChecklistHygiene/{{ech-event name}}-{{ech-date}}
-## Then click Submit at the bottom of the page to save the form. The form is now stored in the main namespace as EventChecklistHygiene.form.   To continue editing the form, switch to the editing mode of the page (1).
-==Create a checklist instance==
+[[File:Template Banner step5.png|thumb|center|450x450px|Available banner settings|link=Special:FilePath/Template_Banner_step5.png]]
-To use the form, create your first checklist.
-# '''Open''' the page  ''Special:Create_form_instance''.
+{{Messagebox|boxtype=important|Note text=The settings only take effect after you save the page if you have just inserted the banner template on your page.}}
-# '''Choose''' the form ''EventChecklistHygiene''.
-# '''Fill out''' the form fields.
-# '''Click''' ''Submit''.
-The checklist is now saved in the wiki and can be edited further.
-#
-==Adjust the styling==
+All settings for the banner are optional. This means that a box can  be generated without image, heading, or text.
-===Common.css===
+==Example settings==
-To style individual elements in the form, go to the styling tab in the options dialog. There, you can enter a css class name. The styling is then defined on the ''MediaWiki:Common.css'' page (admin rights are required).
+[[File:hw-banner-vorlage.png|center|thumb|650x650px|Banner settings|link=Special:FilePath/hw-banner-vorlage.png]]
+{| class="wikitable" style="width:950px;"
-To style the section heading:
+|+ style="box-sizing: inherit; padding-top: 8px; padding-bottom: 8px; color: rgb(119, 119, 119); text-align: left; font-weight: bold;" |
+! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
-# '''Open''' the styling tab in the options menu of the Event heading field.
+! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Element
-# '''Add''' a new CSS class and enter a selector name (''CSS Classes'' field), e.g. ''frm-sectionhd''.
+! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Value
-# '''Paste''' the following style declarations into the ''MediaWiki:Common.css'' page, e.g.:<syntaxhighlight lang="css">
+! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Description
-border-bottom: 1px solid #a6a6a7;  background:#f1f3f9; padding:6px;margin:30px 0;
+|- style="box-sizing: inherit;"
-</syntaxhighlight>
+| rowspan="3" style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |1
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Banner image
-If you do not have permission to view this page, you can enter style information directly for each element in the form via inline styling.
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |QM:Flower_white.jpg
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Image name (with namespace prefix, if it exists, but without the  ''File:'' prefix). The banner  image is optional.
-===Inline styling===
+|- style="box-sizing: inherit;"
-Without access to ''MediaWiki:Common.css'', the style information can be entered directly in the form. However, with many recurring style declarations this is not efficient in contrast to the definition of CSS classes in ''MediaWiki:Common.css''.
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Image width
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |200
-As an example, let's apply the previous section heading example directly as inline styling. To do this, open the options menu of the ''ech-event'' form element again. Enter the following statement in the ''Styling'' field and save the change:<syntaxhighlight lang="css">
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Number. The width will automatically be used as pixel-value. Default value: ''200''
-border-bottom: 1px solid #a6a6a7;  background:#f1f3f9; padding:6px;margin:30px 0;
+|- style="box-sizing: inherit;"
-</syntaxhighlight>
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Image alignment
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |left, right
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Shows the imag to the left or right. Default value: ''left''.
+|- style="box-sizing: inherit;"
+| rowspan="3" style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |2
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Meine Überschrift
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading text
+|- style="box-sizing: inherit;"
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading size
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |1.6em
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Size can also be entered as 16px or any other css size value. Default value: ''1.6em''.
+|- style="box-sizing: inherit;"
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading color
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |#444444
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Color as [https://www.w3schools.com/colors/colors_picker.asp hex value].
+|- style="box-sizing: inherit;"
+| rowspan="3" style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |3
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Das ist der Inhalt.
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text of the  box.
+|- style="box-sizing: inherit;"
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text size
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |1.2em
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |''see Heading size''
+|- style="box-sizing: inherit;"
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text color
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |#444444
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |''see Heading color''
+|- style="box-sizing: inherit;"
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |4
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Content padding
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |20px
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Distance of the title/text area to the box and the image. Default value:''10px.''
+|- style="box-sizing: inherit;"
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |5
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Padding of the container box
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |10px
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Padding of the box itself. Default value: ''0.''
+|- style="box-sizing: inherit;"
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |6
+| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Background color
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |#efefef
+| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |<span>Color as</span> [https://www.w3schools.com/colors/colors_picker.asp hex value] <span>. Default value</span> ''#efefef'' (a light grey)
+|}
+<br />
+__NOTOC__