LISTSERV Maestro 9.0-6

Fluid Design Widget Tags in Code Mode

All fluid design widgets have a special custom tag representation when viewed in code mode. These custom tags are similar to standard HTML tags, but work only in the context of a LISTSERV Maestro mail job HTML content.

These custom tags and their allowed properties are described in the sections below:

Content Box Widget Custom Tag
Image/Video Box Widget Custom Tag
Combined Image/Video & Content Box Widget Custom Tag
Two Column Layout Widget Custom Tag
Editable Template Block Widget Custom Tag (only in a template)

Content Box Widget - Custom Tag

<widget-contentBox attributes>
	...
</widget-contentBox>

The actual content of the content box goes between the opening and closing tags.

Allowed attributes:

align: Defines if the content box shall be left, center or right aligned.

Possible values: left, center, right

Note: The center value is only applicable for widgets that use the surround="false" layout.
contentbox-style: Defines the styling of the content box.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the content box.
- border: Defines the border around the content box.
- color: Defines the text color of the content box.
- padding: Defines the padding inside of the content box (between the box and its content).
- outer-padding: Defines the padding outside of the content box (between the box and its surroundings or parent).
surround: Defines if the content box shall have the "Surrounding content flows around the content box" layout or not.

Possible values: true or false
widgetbox-style: Defines the styling of the surrounding widget box. Only applicable for widgets that use the surround="false" layout.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the widget box.
- border: Defines the border around the widget box.
width: Defines the fluid width of the content box.

Possible values: The width must be specified as a pair of values, separated by a semicolon. The first value must be a pixel value (with the "px" suffix) and the second value must be a percentage value (with the "%" suffix). Together they define the fluid width of the content box, which is either the given pixel width, or the given percentage of the parent width, whichever is smaller.
For example: 300px; 50%

Examples:

<widget-contentBox
		align="left"
		contentbox-style="color:#004aff; padding:1px 0 1px 0;"
		surround="true" width="300px; 50%">
	Content goes here...
</widget-contentBox>

<widget-contentBox
		align="left"
		contentbox-style="color:#ff00ae; background-color:#00fff6; border:11px dotted #fffb95;
						  padding:3px 2px 4px 1px; outer-padding:7px 6px 8px 5px;"
		surround="false"
		widgetbox-style="background-color:#00ff69; border:4px dashed #f7b368;"
		width="400px; 100%">
	Content goes here...
</widget-contentBox>

Image/Video Box Widget Custom Tag

Image box without image caption:

<widget-imageBox attributes/>

Or image box with image caption:

<widget-imageBox attributes>
	...
</widget-imageBox>

Video box without image caption:

<widget-videoBox attributes/>

Or video box with image caption:

<widget-videoBox attributes>
	...
</widget-videoBox>

In the caption cases, the image caption content goes between the opening and closing tags.

Allowed attributes:

align: Defines if the image/video box shall be left, center or right aligned.

Possible values: left, center, right

Note: The center value is only applicable for widgets that use the surround="false" layout.
alt: Defines the alt text attribute of the image.

Possible values: Text
image-style (image box only) or video-style (video box only): Defines the styling of the image/video box.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- border: Defines the border around the image/video box.
- padding: Defines the padding outside of the image/video box (between the box and its surroundings or parent).
- padding-caption: Defines the padding between the image/video box and the caption (only applicable for widgets that have a caption).
link: Defines a clickable link. If specified, then the image will act as a clickable link that sends the user to the given URL.

Possible values: URL
src: Defines the actual image or video that is to be displayed. This value cannot be specified by typing it into the source code manually, but can only be inserted by clicking the corresponding widget option in the panel on the right, or the "Image" button in the toolbar. The former inserts the whole widget code, the latter inserts a standard <img> tag, that can then be edited into this widget tag instead.

In the editor, the value of the src attribute is not shown as normal text, but as a special visual placeholder that can be clicked to change the actual image or video.

Possible values: Image or video
surround: Defines if the image/video box shall have the "Surrounding content flows around the content box" layout or not.

Possible values: true or false
title: Defines the title attribute of the image.

Possible values: Text
widgetbox-style: Defines the styling of the surrounding widget box. Only applicable for widgets that use the surround="false" layout.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the widget box.
- border: Defines the border around the widget box.
width: Defines the fluid width of the image/video box.

Possible values: The width must be specified as a pair of values, separated by a semicolon. The first value must be a pixel value (with the "px" suffix) and the second value must be a percentage value (with the "%" suffix). Together they define the fluid width of the image/video box, which is either the given pixel width, or the given percentage of the parent width, whichever is smaller.
For example: 300px; 50%

Examples:

<widget-imageBox
		align="right"
		src="[IMAGE]"
		surround="true"
		width="200px; 50%"/>

<widget-videoBox
		align="left"
		alt="alt text goes here"
		video-style="border:5px dashed #05ff00; padding:3px 2px 4px 1px; padding-caption:1px;"
		link="https://www.lsoft.com"
		src="[VIDEO]"
		surround="false"
		title="title goes here"
		widgetbox-style="background-color:#0063ff; border:11px dotted #ff0053;"
		width="120px; 100%">
	Caption goes here...
</widget-videoBox>

Combined Image/Video & Content Box Widget Custom Tag

Combined image & content box without image caption:

<widget-imageContentBox attributes>
	<widget-imageContentBox-image attributes/>
	<widget-imageContentBox-content attributes>
		...
	</widget-imageContentBox-content>
</widget-imageContentBox>

Or combined image & content box with image caption:

<widget-imageContentBox attributes>
	<widget-imageContentBox-image attributes>
		...
	</widget-imageContentBox-image>
	<widget-imageContentBox-content attributes>
		...
	</widget-imageContentBox-content>
</widget-imageContentBox>

Combined video & content box without image caption:

<widget-videoContentBox attributes>
	<widget-videoContentBox-video attributes/>
	<widget-videoContentBox-content attributes>
		...
	</widget-videoContentBox-content>
</widget-videoContentBox>

Or combined video & content box with image caption:

<widget-videoContentBox attributes>
	<widget-videoContentBox-video attributes>
		...
	</widget-videoContentBox-video>
	<widget-videoContentBox-content attributes>
		...
	</widget-videoContentBox-content>
</widget-videoContentBox>

The order and nesting of the outer <widget-imageContentBox> tags and the inner <widget-imageContentBox-image> and <widget-imageContentBox-content> tags is important and must be specified as shown above. (And similar for the video box.) Also there must not be any code outside of the two nested inner tags (i.e. other code is allowed only in the places denoted with ... in the samples above).

The actual content for the content box part goes between the opening and closing <widget-imageContentBox-content> inner tags. For the version with an additional image caption, the caption content goes between the opening and closing <widget-imageContentBox-image> inner tags. (And similar for the video box.)

Allowed attributes for the outer <widget-imageContentBox> or <widget-videoContentBox> tag:

widgetbox-style: Defines the styling of the surrounding widget box.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the widget box.
- border: Defines the border around the widget box.
- padding: Defines the padding inside of the widget box (between the box and its content).

Allowed attributes for the inner <widget-imageContentBox-image> or <widget-videoContentBox-video> tag:

align: Defines if the image/video box shall be left or right aligned in the widget.

Possible values: left or right
alt: Defines the alt text attribute of the image.

Possible values: Text
image-style (image box only) or video-style (video box only): Defines the styling of the image/video box.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- border: Defines the border around the image/video box.
- padding: Defines the padding outside of the image/video box (between the image box and its surroundings or parent).
- padding-caption: Defines the padding between the image/video box and the caption (only applicable for widgets that have a caption).
link: Defines a clickable link. If specified, then the image will act as a clickable link that sends the user to the given URL.

Possible values: URL
src: Defines the actual image or video that is to be displayed. This value cannot be specified by typing it into the source code manually, but can only be inserted by clicking the corresponding widget option in the panel on the right, or the "Image" button in the toolbar. The former inserts the whole widget code, the latter inserts a standard <img> tag, that can then be edited into this widget tag instead.

In the editor, the value of the src attribute is not shown as normal text, but as a special visual placeholder that can be clicked to change the actual image or video.

Possible values: Image or video
title: Defines the title attribute of the image.

Possible values: Text
width: Defines the fluid width of the image/video box.

Possible values: The width must be specified as a pair of values, separated by a semicolon. The first value must be a pixel value (with the "px" suffix) and the second value must be a percentage value (with the "%" suffix). Together they define the fluid width of the image/video box, which is either the given pixel width, or the given percentage of the parent width, whichever is smaller.
For example: 300px; 50%

Allowed attributes for the inner <widget-imageContentBox-content> or <widget-videoContentBox-content> tag:

contentbox-style: Defines the styling of the content part of the widget.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- color: Defines the text color of the content.
surround: Defines if the content shall flow around the image/video box or not.

Possible values: true or false

Examples:

<widget-imageContentBox>
	<widget-imageContentBox-image
			align="left"
			src="[IMAGE]"
			width="200px; 33%"/>
	<widget-imageContentBox-content
			surround="true">
		Content goes here...
	</widget-imageContentBox-content>
</widget-imageContentBox>

<widget-videoContentBox
		widgetbox-style="background-color:#fff4aa; border:16px dashed #00fff6; padding:13px 12px 14px 11px;">
	<widget-videoContentBox-video
			align="right"
			alt="alt text goes here"
			video-style="border:5px solid #05ff00; padding:3px 2px 4px 1px; padding-caption:6px;"
			link="https://www.lsoft.com"
			src="[VIDEO]"
			title="title goes here"
			width="212px; 33%">
		Caption goes here...
	</widget-videoContentBox-video>
	<widget-videoContentBox-content
			contentbox-style="color:#0026ff;"
			surround="false">
		Content goes here...
	</widget-videoContentBox-content>
</widget-videoContentBox>

Two Column Layout Widget Custom Tag

Without image caption:

<widget-twoColumnlayout attributes>
	<widget-twoColumnlayout-left attributes>
		...
	</widget-twoColumnlayout-left>
	<widget-twoColumnlayout-right attributes>
		...
	</widget-twoColumnlayout-right>
</widget-imageContentBox>

The order and nesting of the outer <widget-twoColumnlayout> tags and the inner <widget-twoColumnlayout-left> and <widget-twoColumnlayout-right> tags is important and must be specified as shown above. Also there must not be any code outside of the two nested inner tags (i.e. other code is allowed only in the places denoted with ... in the sample above).

The actual content for the left content box part goes between the opening and closing <widget-twoColumnlayout-left> inner tags and that for the right content box goes between the opening and closing <widget-twoColumnlayout-right> inner tags.

Allowed attributes for the outer <widget-twoColumnlayout> tag:

col-padding: Defines the padding between the two content boxes. I.e. the horizontal padding between the left/right boxes (in left/right layout) or the vertical padding between the top/bottom boxes (in top/bottom layout).

Possible values: Number with "px" suffix.
layout: Defines the distribution of the two content box columns, when shown in left/right layout, by specifying the ratio that is to be used to distribute the available width between the left and right columns.
Possible values: Two numbers, separated by a colon, e.g. 1:1 or 5:7.

Note: The entered layout ratio may be reduced by LISTSERV Maestro. See the widget description for more information.
transform: Defines how the content boxes transform from the default top/bottom layout to the two-column left/right layout, i.e. if the top box or the bottom box shall transform into the left column.
Possible values: top-left or bottom-left
widgetbox-style: Defines the styling of the surrounding widget box.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the widget box.
- border: Defines the border around the widget box.
- padding: Defines the padding inside of the widget box (between the outer box and the two content boxes).

Allowed attributes for the inner <widget-imageContentBox-left> and <widget-imageContentBox-right> tags:

contentbox-style: Defines the styling of the left or right content box (respectively).

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the content box.
- border: Defines the border around the content box.
- color: Defines the text color of the content box.
- padding: Defines the padding inside of the content box (between the box and its content).

Examples:

<widget-twoColumnLayout
		col-padding="10px"
		layout="1:1"
		transform="bottom-left">
	<widget-twoColumnLayout-left
			contentbox-style="padding:1px 0 1px 0;">
		Left/Bottom content goes here
	</widget-twoColumnLayout-left>
	<widget-twoColumnLayout-right
			contentbox-style="padding:1px 0 1px 0;">
		Right/Top content goes here
	</widget-twoColumnLayout-right>
</widget-twoColumnLayout>

<widget-twoColumnLayout
		col-padding="10px"
		layout="1:2"
		transform="top-left"
		widgetbox-style="background-color:#fff4aa; border:15px dashed #7b4269;
						 padding:12px 11px 12px 11px;">
	<widget-twoColumnLayout-left
			contentbox-style="color:#0026ff; background-color:#fffb95;
							  border:5px dotted #004aff; padding:3px 2px 4px 1px;">
		Left/Top content goes here
	</widget-twoColumnLayout-left>
	<widget-twoColumnLayout-right
			contentbox-style="color:#7b4269; background-color:#79ff00;
							  border:5px dashed #00ff69; padding:3px 3px 3px 3px;">
		Right/Bottom content goes here
	</widget-twoColumnLayout-right>
</widget-twoColumnLayout>

Editable Template Block Widget - Custom Tag

<template-editableBlock attributes>
	...
</template-editableBlock>

The (editable) sample content for the editable block goes between the opening and closing tags.

Note, that this widget is only allowed while editing the code of a standard template. It is not allowed in a click-and-fill template and it is also not allowed when editing the code of a mail job.

Allowed attributes:

class: Sets one or more style class attributes for the editable block, similar to the standard HTML class attribute.

Possible values: List of class names.
cloneable: Defines if this editable block shall be cloneable or not.

Possible values: true or false
deletable: Defines if this editable block shall be deletable or not.

Possible values: true or false
style: Defines the styling of the editable block.

Possible values: A list of styles, separated by semicolons, similar to the standard HTML style="..." attribute. The following styles are allowed:
- background-color: Defines the background color of the editable block.
- border: Defines the border around the editable block.
- color: Defines the text color of the editable block.
- padding: Defines the padding inside of the editable block (between the block and its content).

Examples:

<template-editableBlock
		cloneable="false"
		deletable="false">
	Editable sample content goes here...
</template-editableBlock>

<template-editableBlock
		class="myclass"
		cloneable="true"
		deletable="true"
		style="color:#7b4269; background-color:#fff4aa; border:5px solid #00ff69;
			   padding:3px 2px 4px 1px;">
	Editable sample content goes here...
</template-editableBlock>

LISTSERV Maestro 9.0-6 Help

Fluid Design Widget Tags in Code Mode

Content Box Widget - Custom Tag

Image/Video Box Widget Custom Tag

Combined Image/Video & Content Box Widget Custom Tag

Two Column Layout Widget Custom Tag

Editable Template Block Widget - Custom Tag