Color Scheme

Selecting one of the 24 default color schemes provides a quick and easy way to customize the apperance of the LISTSERV web interface. Simply click on one of the color swatches, followed by the "Save" button to store your selection.

Archive Style

Select a style for the list archives. The Default option allows individuals to choose and toggle between the classic inbox-style view and the message forum-style view. Classic View ensures that the list archives are always rendered using the classic inbox-style view. Forum View ensures that the list archives are always rendered using the message-forum style view. Blog View ensures that the list archives are always rendered using the blog-style view. Note that Forum View and Blog View are only available under the new Single Index. To change your list archives from the old yearly/monthly/weekly format to the new single index, go to the LISTSERV Command Interface and issue the REINDEX BOTH LISTNAME command.

Icon Set

If you want to change the icons used for the web interface, select one of the options from the pulldown menu and click "Save". The two options include the default LISTSERV icon set and one inspired by material design guidelines. You can create custom icon sets by saving the new icons with a common prefix in the LISTSERV image folder.

Background Color

If you want customize or fine-tune the color of the navigation bar beyond the 24 default color schemes, simply use the color picker to select the color of your choice or type in the hex color code in the text box.

Background Image

To use an image as the background for the navigation bar, enter the full URL pointing to the location of the image in the text box and click "Save". Note that the background color will still be used "behind" the image if the image is smaller than the height of the navigation bar or the width of the browser window. See the Background Size, Background Position and Background Repeat attributes for stretching or repeating a background image across the entire navigation bar.

Background Size

Enter the width of the background image in pixels (px) or percent (%) using CSS syntax. Setting an image to 100% can be useful because it will automatically be resized to the width of the browser window, without the need for repeating. Enter auto if you want to use the image in its actual size or if you intend to use Background Repeat to repeat the image across the entire navigation bar.

Background Position

Use the pulldown menu to select the positioning of the background image within the navigation bar.

Background Repeat

Use the pulldown menu to choose if and how the background image should be repeated. If you have set the width of the background image to 100% or if the image is substantially larger than the browser window, you may not need to repeat the image at all. Otherwise, you can choose to repeat the image horizontally, vertically or both. When repeating images, make sure that Background Size is set to auto so that the image is used and repeated in its actual size.

Icon Color

Use the pulldown menu to select the icon and text color for the top navigation bar. The options are White and Black. If you are using a dark-colored navigation bar, the white option will provide better legibility. Alternatively, the black option might be more useful for light-colored navigation bars.

Height

Enter the height of the navigation bar in pixels in the text box. The default is 40px. You will likely not need to change this value unless you are using a background image or custom logo with a height of more than 40 pixels.

Custom Logo

If you want to use a custom logo in the navigation bar, enter the full URL pointing to the location of the image in the text box and click "Save". Note that you may need to change the height of the navigation bar if your logo is larger than 40 pixels vertically. Use default to use the standard LISTSERV logo in the navigation bar. Since the LISTSERV web interface is responsive and allows users to view the interface on mobile devices with viewports as small as 320px, the custom logo should not be more than 200px wide, minus any padding, to leave room for the navigation icons.

Custom Logo Padding

To insert padding around a custom logo in the navigation bar, enter the padding in pixels (px). The order of the numbers is top, right, bottom and left per CSS syntax. A value of 0px means that the logo will have no extra padding.

Font Family

Use the pulldown menu to select the font family for the navigation menu.

Text Size

Enter the font size that you want to use for the navigation menu. Values can be entered in points (pt), pixels (px) or ems (em) using CSS syntax. The first number is the font size used on larger screens while the second number is the font size used on small viewports like mobile phones.

Link Color

To change the link color in the navigation menu, use the color picker to select the color of your choice or type in the hex color code in the text box.

Category Background Color

To change the background color of user categories (administrator, owner and subscriber) in the navigation menu, use the color picker to select the color of your choice or type in the hex color code in the text box.

Background Color

To change the background color of the navigation menu, use the color picker to select the color of your choice or type in the hex color code in the text box.

Hover Color

To change the hover color of the navigation menu, use the color picker to select the color of your choice or type in the hex color code in the text box.

Divider Color

To change the color of the divider lines in the navigation menu, use the color picker to select the color of your choice or type in the hex color code in the text box.

Background Color

To change the background color, use the color picker to select the color of your choice or type in the hex color code in the text box.

Background Image

To use an image as the background, enter the full URL pointing to the location of the image in the text box and click "Save". Note that the background color will still be used "behind" the image if you choose to set the image opacity at less than 1.0 or if the image is smaller than the browser window.

Background Size

Enter the width of the background image in pixels (px) or percent (%) using CSS syntax. Setting an image to 100% can be useful because it will automatically be resized to the width of the browser window, without the need for repeating. Enter auto if you want to use the image in its actual size or if you intend to use Background Repeat to repeat the image across the entire screen. Enter cover if you want the image to cover the entirety of the screen.

Background Position

Use the pulldown menu to select the positioning of the background image.

Background Repeat

Use the pulldown menu to choose if and how the background image should be repeated. If you have set the width of the background image to 100% or if the image is substantially larger than the browser window, you may not need to repeat the image at all. Otherwise, you can choose to repeat the image horizontally, vertically or both. When repeating images, make sure that Background Size is set to auto so that the image is used and repeated in its actual size.

Background Opacity

Enter the opacity (transparency) of the background image using a number between 0.0 (completely transparent) and 1.0 (completely solid). A setting of less than 1.0 will cause the background color to come through "behind" the image. Using the opacity setting will allow you to lighten the background image, which can make any overlaying text easier to read.

Font Family

Use the pulldown menu to select the font family for the web interface. The font family applies to all text except the navigation menu, which can be set separately.

Header Size

Enter the font size that you want to use for all page and section headers. Values can be entered in points (pt), pixels (px) or ems (em) using CSS syntax. The first number is the font size used on larger screens while the second number is the font size used on small viewports like mobile phones.

Header Color

To change the color of all page and section headers, use the color picker to select the color of your choice or type in the hex color code in the text box.

Text Size

Enter the font size that you want to use for the body text. Values can be entered in points (pt), pixels (px) or ems (em) using CSS syntax. The first number is the font size used on larger screens while the second number is the font size used on small viewports like mobile phones.

Text Color

To change the color of the body text, use the color picker to select the color of your choice or type in the hex color code in the text box.

Link Color

To change the link color, use the color picker to select the color of your choice or type in the hex color code in the text box.

Background Color

To change the background color of the main content area, use the color picker to select the color of your choice or type in the hex color code in the text box. A value of transparent means that the main content area has no background color at all.

Border

To change the border thickness, style and color of the main content area, enter the border settings in the text box using CSS syntax (for example, 1px solid #DEDEDE). The first value defines the thickness of the border; the second the style of the border (solid, dotted or dashed); and the third the color of the border. A setting of 0px eliminates the border altogether.

Border Radius

To change the curvature of the corners around the main content area, enter the border radius in pixels (px). The order of the numbers is top-left, top-right, bottom-right and bottom-left corner. A border radius of 0px has no rounding.

Background Color

To change the background color of the list selector, use the color picker to select the color of your choice or type in the hex color code in the text box. A value of transparent means that the list selector has no background color at all.

Border

To change the border thickness, style and color of the list selector, enter the border settings in the text box using CSS syntax (for example, 1px solid #DEDEDE). The first value defines the thickness of the border; the second the style of the border (solid, dotted or dashed); and the third the color of the border. A setting of 0px eliminates the border altogether.

Border Radius

To change the curvature of the corners, enter the border radius in pixels (px). The order of the numbers is top-left, top-right, bottom-right and bottom-left corner. A border radius of 0px has no rounding.

Header Row Color

To change the background color of the report headers, use the color picker to select the color of your choice or type in the hex color code in the text box.

Header Row Text Color

To change the color of the text on the report headers, use the color picker to select the color of your choice or type in the hex color code in the text box.

Divider Row Color

To change the background color of divider rows in report tables, use the color picker to select the color of your choice or type in the hex color code in the text box.

Divider Row Text Color

To change the color of the text on the divider rows, use the color picker to select the color of your choice or type in the hex color code in the text box.

Odd Row Color

To change the background color of every odd row in report tables, use the color picker to select the color of your choice or type in the hex color code in the text box.

Even Row Color

To change the background color of every even row in report tables, use the color picker to select the color of your choice or type in the hex color code in the text box.

Border

To change the border thickness, style and color of report tables, enter the border settings in the text box using CSS syntax (for example, 1px solid #DEDEDE). The first value defines the thickness of the border; the second the style of the border (solid, dotted or dashed); and the third the color of the border. A setting of 0px eliminates the border altogether.

Background Color

To change the background color of the login and list subscription screens, use the color picker to select the color of your choice or type in the hex color code in the text box.

Background Image

To use a customized background image on the login and list subscription screens, enter the full URL pointing to the location of the image in the text box and click "Save". Use default to use a rotating set of standard LISTSERV background images. Use none if you don't want to use any background images at all.

Background Size

Enter the width of the background image in pixels (px) or percent (%) using CSS syntax. Setting an image to 100% can be useful because it will automatically be resized to the width of the browser window, without the need for repeating. Enter auto if you want to use the image in its actual size or if you intend to use Background Repeat to repeat the image across the entire screen. Enter cover if you want the image to cover the entirety of the screen.

Background Position

Use the pulldown menu to select the positioning of the background image.

Background Repeat

Use the pulldown menu to choose if and how the background image should be repeated. If you have set the width of the background image to 100% or if the image is substantially larger than the browser window, you may not need to repeat the image at all. Otherwise, you can choose to repeat the image horizontally, vertically or both. When repeating images, make sure that Background Size is set to auto so that the image is used and repeated in its actual size.

Background Opacity

Enter the opacity (transparency) of the background image using a number between 0.0 (completely transparent) and 1.0 (completely solid). A setting of less than 1.0 will cause the background color to come through "behind" the image. Using the opacity setting will allow you to lighten the background image, which can make any overlaying text easier to read.