LISTSERV Maestro 9.0-6

Public Subscriber Website Customization - Edit Email Draft

This screen assists you while working on the customization of a subscriber page or email by showing a slightly different layout of the area on the top of the screen.

Customization Workflow Phases

Phase 1: System Default - No Customization

Without customization, the page or email is provided to subscribers in the system default. In this state, the upper area shows the text Production Version Preview. This is the initial state of any element that is not customized and is therefore provided to subscribers as system default.

Phase 2: Editing/Saving a Draft

To begin customizing, click the [Edit Draft] button. This opens the customization editor. Saving your draft returns you to the preview screen, which now looks slightly different: To reflect the presence of a draft version that is not yet deployed (and is thus different from what subscribers see), the upper area shows the text Draft Version Preview.

This state of the customization can exist indefinitely to allow you to work on a draft for longer periods of time without affecting what your subscribers currently see. LISTSERV Maestro considers your draft version to be a normal part of the system data and includes it in its automatic backup, similar to other system data. While you are refining your draft (i.e. clicking the [Edit Draft] button, making changes and saving the new draft), click the icon in the upper right area of the preview screen to see the difference between your draft and the current public version.

Phase 3: Deploying a Draft

The decision if and when to deploy a draft customization should be considered carefully. As described above, a draft can exist safely in parallel to a current public production version. You can make use of this for example to discuss details of the draft with colleagues, outside contractors or other 3rd parties. Eventually, however, you will reach confidence that the draft is actually supposed to replace the current public production version. In LISTSERV Maestro, this means that you now have decided to Deploy your draft. See here for details about how to deploy one or many drafts.

Phase 4: Editing/Saving a New Draft

After having deployed a previous draft, the screen reflects this and now looks similar to "Phase 1" above. You can now continue editing your draft (and save it repeatedly because LISTSERV Maestro stores the draft separately from the deployed public version). At any time during your edit session(s), you may want to either undo your edits or to simply check how far your edits differ visually from the currently deployed public version:

Reverting your draft edits: If you want to undo all or parts of the edits you made to your draft (even before saving them), click the icon in the upper right area of the screen. The Select Revert Source screen appears. By employing previews of the currently deployed public version and the system default version, you can pick the desired version to revert to visually.
Comparing your draft to the public version: To do this, click the icon in the upper right area of the screen. The Compare screen appears and allows you to compare your draft with the version that you previously deployed to the public.

Editing the Master Email

The master email 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 Panel described below.

Base Font

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

Header/Footer Content

To include special additional content at the top and/or the bottom of each email, simply use the WYSIWYG design-mode editor to write the desired content. If you need more control about the specific HTML code to place at the top and/or the bottom, switch the editor to source code mode and supply your desired changes to the HTML source code directly.

Master Email: Standard Mode vs. Expert Mode

Standard Mode: Define Colors & Fonts Visually

Using the colors and default font panels of the master page in standard mode is a visual method that frees you from having to edit complicated HTML and CSS declarations in a style sheet. LISTSERV Maestro uses the selections you make in the two panels to dynamically create the CSS declarations in such a way that all emails are sent with the selected colors and font.

Expert Mode: Custom CSS and Full HTML

Expert Mode, in comparison, is different: Once you switch to expert mode, the current selections in the two panels are translated to fixed CSS code that you are now free to edit. You will see verbatim font family, font size, text/link color and background color declarations in the source code editor, and LISTSERV Maestro from this moment on no longer creates these declarations dynamically but instead uses the CSS declarations that you supply in the editor. Additionally, since you will very probably also want to edit all HTML and CSS manually in source code mode, LISTSERV Maestro shows a read-only preview tab instead of the design mode editor tab next to the source code tab, which now also reveals the full HTML page source code, starting with <html> and ending with </html>, thus giving you full control of the page code.

Note that your customized master page code (defined in Standard Mode or Expert Mode) still undergoes the same replacement of the {{maestro:body}} placeholder token with any of the given page-specific layouts, regardless of the question whether the specific page is customized or is shown with the system default. This allows you to combine a Standard/Expert mode master email freely with customized or system-default specific emails for the various notification purposes.

Editing a Specific Email

Main Editor Section: 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 master email and is shown dynamically with the code that you are currently editing as replacement for the {{maestro:body}} placeholder token of the master email 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.

Main Editor Section: 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.

Panel Section: Widgets And Placeholders

The panel next to the main editor is subdivided in sections and gives access 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. Click on any of the items listed in the panel to view more information.

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 LISTSERV 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, LISTSERV 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 LISTSERV Maestro after you have deployed your layout and have included a new version of a list welcome email.

Note: You will notice that LISTSERV 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 LISTSERV Maestro reporting on these mail jobs in exactly the same way you would do this for other, non-welcome email jobs.

The Colors Panel

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 Master Page / Master Email

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

The Base Font Panel

This section of the panel allows you to pick the desired default font for the whole collection of subscriber pages. This selection only defines the default font for the subscriber page sections that do not supply a specific font, either by picking from the design mode editor's toolbar area or by supplying custom HTML style values in the source code editor for any of the pages.

The Placeholders Panel

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

Placeholder Hierarchy
The parent-child structure shown in the panel 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:

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:

Text, Number, Email, or Password Profile Field Placeholder
Button Placeholder (has mandatory attributes)
Clickable Link Placeholder (has mandatory attributes)
Quick Login Option Placeholder

(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 master page (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 to have to copy 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 your users to notice as small a difference 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 deepest 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:

In the <head> section of each subscriber website page, there is a CSS link to a dynamically created CSS file. This file contains declarations for the text/link and background colors, the default font and its sizing on default wide desktop screens and on narrower mobile device screens. While your master page is in standard mode (and the color and font picker panels are available), your color and font selection is reflected dynamically in this file.

Additionally, this part of LISTSERV Maestro's CSS code provides some default visual highlighting of the various input elements to yield an easy-to-use web form layout for the signup pages that are used by your subscribers.

If you plan to use your corporate website layout, you may want to remove and/or rewrite some or all of the declarations you find here. Switching the master page draft to expert mode allows you to do exactly this, because this exposes the otherwise dynamically included CSS declarations in the editor, allowing you to take control of the code.
In the same <head> section, there is an additional CSS link to a file with the most important styling declarations for the default layouts.
The style sheet file links combined yield the declarations which, together with the default HTML provided for the subscriber pages, result in the default responsive and user-friendly website layout of LISTSERV Maestro.
While the style declarations provided by LISTSERV Maestro for the subscriber website contain some declarations for standard tag name selectors, the vast majority of declarations is based on custom classes with the special name prefix lsoft_lma_. To learn about the standard declarations, click the following links:
LISTSERV Maestro Dynamic Font/Color Styles (This is a standard version with defaults, the actual declaration settings are created dynamically. Link opens in a new window)

LISTSERV Maestro Static Standard Styles (Link opens in a new window)

To save the changes, click the [Save Draft] button to return to the preview screen.

LISTSERV Maestro 9.0-6 Help