LISTSERV Maestro 11.1-2 Help Table Of Contents

Public Subscriber Website Customization - Edit Page Draft

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

The editor for a page 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 Master Page

The master page plays the most important role of a LISTSERV Maestro public subscriber website. It provides suitable defaults for (and allows you to customize) the color theme, the default font and the 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 the whole subscriber website, use the Base Font Section described below.

Page Template Content

To create a template that is used by all subscriber pages (which for example allows you to define a common header and footer for all pages), 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 page 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 page body is supposed to be included.

Expert Mode: Custom CSS and Full HTML

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

If you want to be able to edit the full HTML page, then you can forgo the WYSIWYG editor for the master page by using the editor in expert mode. To do so, simply switch the WYSIWYG editor into code mode and then supply a full HTML page 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 master page is later used to render one of the subscriber pages, then as described above, the {{maestro:body}} is replaced with the actual page 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 page 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 page body. The paragraph or other surrounding content is retained.

Editing a Specific Subscriber Page

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

To edit the content for the page, 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.

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 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 Section

This section of the panel allows you to pick the desired base font for the whole collection of subscriber pages (when editing the master page) or the collection of notification emails (when editing the master email). 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 master page or master email, 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 master page or master email:

    • 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 master page or email. 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 master page or email.

    • If you want to use a web font for the override that is not already used on the corresponding master page or email, 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 master page or email).

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 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 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 "Master Page" 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 "Master Page" or "Master Email" 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 master template.

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