LISTSERV Maestro 11.1-3 Help Table Of Contents

Public Subscriber Website Customization - Edit Email Draft

See the Public Subscriber Website Customization Overview for a general discussion of the subscriber page and notification email customization.

The editor for an email draft consists of two parts: The main editor part on the left and a panel on the right that is subdivided into sections that give access to further settings and to ready-made elements that you may want to add to your draft. All mandatory (and some of the optional) items are already included in the system default.

Editing the Base Email Template

The base email template provides suitable defaults for (and allows you to customize) the color theme, the default font and the email header/footer "frame" content.

Colors

To define your own custom color theme, use the Colors Section described below.

Base Font

To change the base font for all notification emails, use the Base Font Section described below.

Email Template Content

To create a template that is used by all notification emails (which for example allows you to define a common header and footer for all emails), simply use the WYSIWYG design-mode editor to write the desired content and include the special {{maestro:body}} placeholder at the location where the actual email body is supposed to be included.

If you need more control about the specific HTML code, switch the editor to code mode and supply your desired changes to the HTML source code directly. Again, remember to include the {{maestro:body}} placeholder at the location in the HTML code where later the actual email body is supposed to be included.

Expert Mode: Custom CSS and Full HTML

The standard WYSIWYG editor for the base email template allows you only to edit the part of the HTML email that goes inside of the <body> tag. For example, you cannot edit the <head> section of the HTML email.

If you want to be able to edit the full HTML email, then you can forgo the WYSIWYG editor for the base email template by using the editor in expert mode. To do so, simply switch the WYSIWYG editor into code mode and then supply a full HTML email definition (starting and ending with <html> and </html>). When you save this content, the editor will automatically recognize that you want to edit the full HTML code and will switch to expert mode, giving you full control over the complete HTML code.

Replacement of the {{maestro:body}} Placeholder

When the base email template is later used to render one of the notification emails, then as described above, the {{maestro:body}} is replaced with the actual email body. This replacement follows the following rules:

  • If the placeholder is embedded into a HTML paragraph (i.e. with surrounding <p> tags) without any other non-whitespace content in the same paragraph, then the whole surrounding paragraph (including the opening and closing <p> tags) is replaced with the email body.

  • If the placeholder is not embedded into a HTML paragraph or if the surrounding paragraph contains other non-whitespace content, then only the placeholder itself is replaced with the email body. The paragraph or other surrounding content is retained.

Editing a Specific Notification Email

HTML Preview And HTML Source Code

The main area of the editor allows you to show a visual preview of the currently selected email. This preview automatically integrates the current draft version of the base email template and is shown dynamically with the code that you are currently editing as replacement for the {{maestro:body}} placeholder token of the base email template draft.

To edit the content of the email, click the [Code] button in the editor toolbar and supply your desired changes to the HTML source code. While you are editing, you can toggle between preview and source code by using the [Preview] and [Code] buttons in the editor toolbar.

Switching to the HTML preview version of what you see in the editor while in code mode performs preliminary placeholder validation, which means that you may also see validation errors in the case your current edits damaged any of the available placeholders. The validation logic applied here is once again applied when you save your changes to finally create a new draft. This makes sure that only valid customizations are saved.

Alternative Text Preview And Alternative Text Source

By default, the alternative text of notification emails is generated automatically from the HTML version. To view a preview of the alternative text, click the "Text" tab on the left-hand side of the screen. With the text tab shown, you have the option to switch between alternative text that is generated automatically and a custom version that was adjusted with manual editing.

Editing a List Welcome Email

List welcome emails differ from other notification emails in two regards: By default, new subscribers of a list do not receive a welcome message, which means that the default for a list welcome email is empty (a text is shown instead to clarify this). However, when you start editing the draft for a welcome email, LISTSERV Maestro provides a non-empty default content for you to base your manual edits on. The second (and significant) difference between welcome emails and other subscriber notifications is that Maestro sends list welcome messages in the form of personally tracked mail jobs. The reason for this approach is that a list welcome message is the first message that a new list subscriber receives after having confirmed the subscription, and as such is very different from the double opt-in confirmation messages, which by definition talk to users who are only in the process of becoming actual list subscribers. With the list welcome messages being personally tracked, they constitute a good starting point for automatic follow-up messages of any kind, depending on the kind of interaction that you plan to establish with your list subscribers.

List Welcome Email Jobs

As a consequence of the approach described above, each time you decide to deploy a list welcome email, Maestro automatically creates a mail job with the correct settings and uses this mail job each time a user confirms the list subscription. You will find this mail job easily when you open the "Mail Jobs" section of Maestro after you have deployed your layout and have included a new version of a list welcome email.

Note: You will notice that Maestro does not delete the mail jobs associated with earlier deployed versions of welcome emails. This is by design and allows you to view a history of the various welcome email versions and do standard Maestro reporting on these mail jobs in exactly the same way you would do this for other, non-welcome email jobs.

The Colors Section

Instead of having to define colors for the various HTML tags throughout the (large) collection of website pages, LISTSERV Maestro lets you customize the foreground and background colors for various purposes through a point-and-click color picker user interface that you reach by opening the associated section from the panel on the right-hand side of the screen.

  • Surrounding Area: This is the surrounding area of the content, covering the whole browser screen. Allows the definition of standard text color, link color and background color.
  • Main Area: The inner body section of the layout. The system default uses this section as width-limited container for the subscriber pages (which is why the {{maestro:body}} placeholder is placed here) and centers it inside the outer area, to avoid that longer text is shown with long lines that make reading difficult. Allows the definition of standard text color, link color and background color.
  • Emphasized Section: An area of the page that is highlighted to emphasize it in relation to the remaining content, used for example to highlight the "Welcome" message box on the subscriber area page. Allows the definition of standard text color, link color and background color.
  • Headings: The color for heading-type sections. Two variants are used, one takes this color as text color and may show it it on top of any of the background colors. The other variant is inverted, i.e. uses this color as background color and uses the main area background color as foreground color.
  • Buttons: The text and background color of buttons.
  • Errors: The text color for error messages.

Copying Colors from the Base Page Template / Base Email Template

If you are editing the base page template or the base email template, then you can use this button to copy the colors from the base page template (when editing the base email template) or the base email template (when editing the base page template). This replaces all your current colors with the colors that are currently defined in the draft version of the base email template or base page template. If the base email template or base page template is not customized, then the system default colors are used as source.

The Base Font Section

This section of the panel allows you to pick the desired base font for the whole collection of subscriber pages (when editing the base page template) or the collection of notification emails (when editing the base email template). You can select both the base font and its size.

Overriding the Base Font for Individual Text Parts

The base font applies to those parts of the subscriber pages or notification emails that do not specify a different font. You can always override the base font for any specific text parts. When working with the base page template or base email template, you can do so with the font drop-down in the design mode editor's toolbar. Or if you are in code mode, or working with an individual page or email (which is always in code mode) you can specify an override font by using standard CSS styles, most easily with the "Insert Font Family" button in the code mode editor's toolbar.

Note, that if you want to use a web font as an override for a given text part, the following restrictions apply:

  • When editing the base page template or base email template:

    • You can freely use any of the web fonts for the override that are defined in your Editor Fonts, for example by picking a font from the design mode editor's font drop-down or with the code mode editor's "Insert Font Family" toolbar button. The necessary import of the font definition will then be included automatically by LISTSERV Maestro, you do not have to do this yourself.

    • If you want to use a web font for the override that is not defined in your editor fonts, then you have to add a matching font import (either with a <link> tag or an @import CSS) manually. But frankly, you should probably just add the font to your editor fonts instead.

  • When editing an individual page, message or notification email:

    • You can freely use all web fonts for the override that you have already used on the corresponding base page or email template. To make this easier, the font selection of the editor's "Insert Font Family" toolbar button only includes those web fonts (with the standard fonts) that are indeed already in use on the corresponding base page or email template.

    • If you want to use a web font for the override that is not already used on the corresponding page or email template, then you have to add a matching font import (either with a <link> tag or an @import CSS) manually, even for a font that is already among your editor fonts (but not currently used on the corresponding base page or email template).

The Placeholders Section

The placeholders section defines the placeholders which can (or in some cases must) be used for the customization.

  • Placeholder Hierarchy

    The parent-child structure shown in the section indicates whether a given placeholder can be used anywhere on the page or if the placeholder is only valid and available when used as child of its matching parent placeholder, as defined by the hierarchical tree structure.

  • Optional Placeholders

    An optional placeholder can be included on the page, but does not have to be included. If such a placeholder is omitted, all its children (if any) must be omitted, too.

  • Mandatory Placeholders

    A mandatory placeholder must be included on the page. If such a placeholder is omitted, LISTSERV Maestro will not accept the customization (i.e. a validation error message is shown when you try to save your draft).

    Mandatory placeholders are also additionally marked by using a bold font for their name.

If the placeholder itself is clicked, the placeholder is selected. A selected placeholder is shown inside of a box, with an additional short description of the placeholder and what it is for. Therefore, if it's not certain what a particular placeholder does exactly, or why it is required or not, simply select the placeholder to see this description.
With the description visible, click a second time and the placeholder tag for the placeholder is automatically inserted into the page code at the current cursor position.

If a placeholder is to be used on the page, it must be written using the special placeholder tag syntax. The syntax is slightly different depending on if the placeholder is one with a body or not:

  • Without Body: The placeholder tag consists of a single tag and looks like this:

    {{maestro:NAME}}, where "NAME" must be replaced with the placeholder name, as shown in the tree. Note: Placeholder names are case sensitive!

  • With Body: The placeholder tag consists of an opening and closing tag, with the placeholder body in between, like this:

    {{maestro:NAME}}...placeholder body goes here... {{/maestro:NAME}}, where in both the opening and closing tag "NAME" must be replaced with the placeholder name, as shown in the tree.

    The body, which is only outlined in the example above, can be any further HTML code and may also contain linebreaks to stretch over several lines or paragraphs. It is also inside of this body that the placeholder tags of the placeholder's children must appear. For example, with a tree definition like this:

    {{maestro:validationErrorsPresent}}
    {{maestro:validationErrors}}

    then the page must contain a placeholder structure similar to the following:

    {{maestro:validationErrorsPresent}}
        ...this is the validationErrorsPresent placeholder's body, which contains the child placeholder:
        {{maestro:validationErrors}}
        ...here the body continues, up to the closing tag:
    {{/maestro:validationErrorsPresent}}

Some placeholders may additionally contain attributes in their placeholder name, which is then written as follows:

{{maestro:NAME ATTRIBUTE="VALUE"}}

where "NAME" is to be replaced as shown above, and "ATTRIBUTE" and "VALUE" are to be replaced with the attribute name and value, respectively.

A placeholder may also contain several attributes, like this:

{{maestro:NAME ATTRIBUTE1="VALUE1" ATTRIBUTE2="VALUE2" ATTRIBUTE3="VALUE3"}}

If an attribute is not specified, a suitable default is assumed.

Placeholders with attributes:

(Placeholder types not listed above do not allow any attributes.)

Text, Number, Email, or Password Profile Field Placeholder:

Attribute Name Mandatory Attribute Description
size No Defines the size of the edit field.
Default: "60" (for text, email, password) or "10" (for number)
emptyvalueplaceholdertext No Defines the value of the "placeholder" input field attribute value, i.e. the text that is shown inside the input field while its value has not yet been supplied.
Default: Depends on the input field
autocomplete No Defines the value of the "autocomplete" input field attribute value. For more information on how to use the browser's autocompletion functionality, see here.
Default: Depends on the input field
styleclass No Defines the name of the CSS style class (or classes) that shall be assigned to the edit field.
Default: No style class.
styleId No Defines the HTML DOM element id of the HTML input element assigned to the edit field.
Default: Depends on the input field

Button Placeholder:

Attribute Name Mandatory Attribute Description
text Yes The value of this attribute defines the text label for the button.

Clickable Link Placeholder:

Attribute Name Mandatory Attribute Description
text Yes The value of this attribute defines the text that shall constitute the clickable link.

Quick Login Option Placeholder:

(Only available on the login page.)

Attribute Name Mandatory Attribute Description
styleclass No Defines the name of the CSS style class (or classes) that shall be assigned to the checkbox.
Default: No style class.

Expert Customization of CSS Styles

If you limit your customization work to picking theme colors, selecting a default font and adding some additional header/footer text to the base page template (or email), then you will not need to code a single bit of HTML or CSS. In some cases, however, you may be in the situation where you need to reproduce the layout and/or styling of a complex corporate website, for example because you link from the corporate website to the public subscriber website pages and you want this to be as seamless as possible. With expert customization, you can indeed go as far as making the subscriber website pages look exactly like your corporate website. Certainly such an endeavor requires a deeper knowledge about your corporate website's layout and the peculiarities of its CSS coding.

To accompany the expert knowledge you have about your own corporate website and its HTML/CSS coding, this is what you need to know about how LISTSERV Maestro makes use of CSS classes and style declarations:

The <head> section of each subscriber website page includes links two style sheet files that govern most of the subscriber page styling:

Additionally, further CSS styles are defined in the "Base Page Template" template, where you can see and edit these styles if you switch the template's editor to code mode.

If you plan to use your corporate website layout, you will have to remove, replace or rewrite some or all of these default CSS declarations.

The simplest way to do this is to supply your own CSS styles in either the "Base Page Template" or "Base Email Template" template when editing the template in code mode. You can edit the styles that are already present in these templates and/or you can override the styles that are pulled in from the linked style sheet files (see above) by re-declaring the styles with your own settings.

Additionally, you can of course also customize individual pages and remove the usages of the default CSS classes (that reference the styles from the default style sheet files) from the pages and instead introduce your own classes, for which you then supply the proper style definitions either on the customized page directly, or in the corresponding template.

© 2002-2023 L-Soft Sweden AB. All rights reserved.