Public Subscriber Website Customization - Edit Page Draft
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 Panel described below.
Base Font
To change the base font for the whole subscriber website, use the Base Font Panel described below.
Header/Footer Content
To include special additional content at the top and/or the bottom of each page, 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 Page: 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 pages are shown 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 page freely with customized or system-default specific pages.
Editing a Page
Main Editor Section: Preview And Source Code
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.
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.
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.
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:
{{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:
- 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.