Creating your own skin

* all illustrations are for "AfterLogic" WebMail skin of Pro version.

To create or modify WebMail skin, create new or modify existing style-sheet file "styles.css".

How skins are stored in WebMail:

Thus, to create new skin, just copy "skins\AfterLogic" folder with all contents to new skin name (for example, "skins\MySkin"), and then modify styles in "skins\MySkin\styless.css" file. You can use any CSS editor for this purpose (such as free TopStyle Lite editor) or any text editor (such as Notepad).

You may also modify images in "skins\MySkin" folder if you want to.

Finally, select new style in "skins" drop-down list in "Administration Panel\Webmail settings" dialog.

WebMail system uses several style groups to define the appearance of user interface. Each style group consists of a root style and a set of inner styles. All root styles with their inner styles are listed below.

wm_login

Login panel, where a user should enter parameters of his account (fig.1)

Inner styles:
Class name Description
wm_input Input field of the login panel, where a user enters his account info
wm_title Input fields titles of the dialog login panel.
wm_login_header Dialog window caption appearance.

wm_accountslist

Main header at the top of the WebMail screen where email account information, "Settings" and "Logout" links are displayed.

Inner styles:
Class name Description
wm_accountslist_email
wm_accountslist_contacts
wm_accountslist_settings
wm_accountslist_logout
Items in accounts list

wm_toolbar

Top toolbar of WebMail which contains toolbar icons.


Inner styles:
Class name Description
wm_toolbar_item Toolbar item with functional buttons appearance.
wm_toolbar_item_over Toolbar item with functional buttons appearance when user moves cursor over the item.
wm_toolbar_item_press The style of "Move to folder" button when pressed.
wm_tb_press The style of "Mark as read" and "Reply" buttons when pressed.
wm_popup_menu Drop-down menu of toolbar
wm_menu_item Items in drop-down menu of toolbar.
wm_menu_item_over Items when targeted in drop-down menu of toolbar.
wm_search_form Pop-up searching form
wm_toolbar_search_item_over Searching form appearance when targeted and pressed.

wm_inbox_page_switcher

Page switcher.

Inner styles:
Class name Description
wm_inbox_page_switcher_pages All pages.
wm_inbox_page_switcher_pages font Current page.

wm_mail_container

Container for a list of folders and list of messages.

wm_folders

Folders list.

Inner styles:
Class name Description
wm_folders_part Folders list container.

wm_inbox

Main list box where read, unread, selected and filtered messages are displayed.

Inner styles:
Class name Description
wm_inbox_headers Message list header.
wm_inbox_headers_separate Stripes which delimit headers items from each other.
wm_inbox_item New messages in the message list.
wm_inbox_item_select New messages in the message list which are selected.
wm_inbox_read_item Read messages in the message list.
wm_inbox_read_item_select Read messages in the message list, which are selected.
wm_inbox_deleted_item Deleted messages in the message list.
wm_inbox_deleted_item_select Deleted messages in the message list, which are selected.

wm_lowtoolbar

Lower toolbar of system displayed under messages list.

Inner styles:
Class name Description
.wm_lowtoolbar_space_info .wm_progressbar A part of progress bar which graphically indicates 100% of user mailbox quota.
.wm_lowtoolbar_space_info .wm_progressbar_used A part of progress bar which indicates used space of a current account.
.wm_lowtoolbar_space_info .wm_progressbar_all_used A part of progress bar which indicates used space of other accounts.

wm_progressbar

The part of the progress bar showing how much of the download mail operation is already complete (at the start of download, only 0% is complete).

Inner styles:
Class name Description
wm_progressbar A part of progress-bar where the progress of downloading mail will be performed.
wm_progressbar_used A part of the progress bar showing how much of the download mail operation was completed (at the start of download, whole 100% is to go).

wm_message_container

Email message layout displayed in View Message and Preview Pane mode.

Inner styles:
Class name Description
wm_view_message Message header field captions appearance such as "From", "To", "Subject" etc. in "view message" mode.
wm_message_headers Message header field captions appearance such as "From", "To", "Subject" etc. in "preview pane" mode.
wm_message_attachments List of attachments.
wm_message Message body.
wm_message_body_quotation Quoted strings appearance in message body.
wm_message_rfc822 Appearance of message rfc822 headers.

wm_new_message

The form of a new message creation.

Inner styles:
Class name Description
wm_attachment The list of attachments.

wm_html_editor

html-editor.

Inner styles:
Class name Description
wm_html_editor_toolbar The list of available tools for text editing.
wm_html_editor_cell Field of text entry.
wm_color_palette Drop-down menu "color palette".

wm_contacts

The list of contacts and contact groups.

All styles in use for wm_inbox are applied here as well.

wm_contacts_view_edit

The list of settings or contact properties.



Inner styles:
Class name Description
wm_contacts_card_line1, wm_contacts_card_line2,
wm_contacts_card_line3, wm_contacts_card_line4,
wm_contacts_card_line5, wm_contacts_card_content
The frame embracing the contact information.
wm_contacts_tab A title of contact information section in the mode of contacts editing.
wm_contacts_name Titles marked with large type in view contact information mode.

wm_settings

Mail account settings.

Inner styles:
Class name Description
wm_settings_nav Settings navigation panel.
wm_selected_settings_item Selected element at the settings navigation panel.
wm_settings_cont Settings container.
wm_settings_list Accounts list.
wm_settings_list_select Selected account in the accounts list.
wm_settings_accounts_info Area for tabs in "Email Accounts" options list.
wm_settings_switcher_indent Right indent in tabs sequence.
wm_settings_switcher_item Tabs in "Email Accounts" options list
wm_settings_switcher_select_item Current selected tab.
wm_settings_mf_headers Appearance style of the "Folder", "Msg's", "Size", "Synchronize" etc. headers in the "Manage Folders" tab.
wm_settings_mf_total Totals panel positioned lower than folders list in the "Manage Folders" tab.
wm_settings_manage_folders td Separating stripe in the folders list of the "Manage Folders" tab.

WebMail icons

All icons used in WebMail are placed in 2 base .png files: mail.png and editor.png. File mail.png contains icons for toolbar, folders, contacts and others. File editor.png contains icons for rich text editor and for displaying attachment's type while adding attachments to new message or viewing message with attachments. mail.png for "AfterLogic" skin looks like this:

All the icons are placed into a grid with 40x40 pixel cells.

Icons for toolbar are placed into the first and the second line. Most grid cells are empty as "AfterLogic" skin doesn't use many toolbar icons.

The third line contains folder icons.

The 4th line contains icons for popup menus in toolbar, messages list, message drag-n-drop, adding contact and others.

The 5th line contains icons for selecting account, settings menu, page switcher, error and info messages.