Creating your own skin

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

WebMail skins folder structure

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

How skins are stored in WebMail:

• All skins are located in skins folder under WebMail directory.
• Each skin is a folder inside skins folder.
• The skin folder's name is a skin name (e.g. AfterLogic skin resides in skins\AfterLogic folder).
• Each skin folder contains styles.css file and related images.
• The system automatically scans skins folder to get skins list each time you enter WebMail's Administration panel.
• 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.

Unlike main WebMail skins, calendar skins are located in calendar/skins folder (not "skins"), filename of calendar styles is calendar_styles.css (not styles.css).

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. mail.png for "AfterLogic" skin looks like this:

AfterLogic skin sprites

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.

Barbie skin sprites

Rich text editor sprite file

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.

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.

WebMail layouts

There are two main buildings of workplaces. This workplaces may have same classes but differ at-a-glance. Assigning of different CSS properties is achieved by using parental #layout_3pane id.

Login Screen

.wm_login

Login panel, where a user should enter parameters of his account.

Inner styles:

.wm_login_header

Header class.

.wm_input

Input field of the login panel, where a user enters his account info.

wm_input_focus

Input field of the login panel, where a user enters his account info (in active position).

.wm_title

Input fields titles of the dialog login panel.

.wm_login_header

Dialog window caption appearance.

Tabsbar

.wm_accountslist

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

Inner styles:

.wm_accountslist_email
.wm_accountslist_settings
.wm_accountslist_settings
.wm_accountslist_logout

Items in accounts list.

.wm_accountslist_selection

Drop-down menu button in accounts list.

.wm_accountslist_selection_over

Position when targeted.

.wm_accountslist_selection_press

Position when pressed.

.wm_account_menu

Drop-down list of accounts.

.wm_accountslist_item

Item in accounts list (in drop-down list).

.wm_accountslist_item_over

Item highlighted (when the mouse pointer hovers over it).

Toolbar

.wm_toolbar

Top toolbar of WebMail which contains toolbar icons.

Inner styles:

.wm_toolbar_content

Toolbar area containing buttons alone.

.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

The style of "Mark as read", "Reply" buttons (and all buttons which have additional options but can be pressed directly).

.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_menu_separate

Some items separator in drop-down menu.

.wm_toolbar_search_item

Searching items class.

.wm_toolbar_search_item_over

Searching form appearance when targeted and pressed.

.wm_search_form

Pop-up searching form.

Folders list

.wm_folders_part

Folders list container.

Inner styles:

.wm_folders_hide_show

Hide/show switch container of folders area.

.wm_folders_hide

Hide icon

.wm_folders_show

Show icon

.wm_folders_content

Used only in barbie skin for background displaying.

.wm_folders

Individual folder in the list.

.wm_select_folder

Current folder

.wm_manage_folders

Folder settings link area.

.wm_manage_folders a

Folder settings link alone.

Message list

.wm_inbox_page_switcher

Page switcher.

Inner styles:

.wm_inbox_page_switcher_left

Left margin of the switcher.

.wm_inbox_page_switcher_right

Right margin of the switcher.

.wm_inbox_page_switcher_pages

All pages.

.wm_inbox_page_switcher_pages font

Current page.

.wm_inbox_page_switcher_pages ?

Other pages links.

.wm_inbox

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

Inner styles:

.wm_inbox_headers

Message list header.

.wm_inbox_headers_separate

Stripes which delimit headers items from each other.

.wm_inbox_lines

Message list items.

.wm_inbox_item

New messages (unread) 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_read_item_view

The message being viewed.

Message view pane

.wm_message_container

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

Inner styles:

.wm_message_headers

Message header field captions appearance such as "From", "To", "Subject" etc.

.wm_message

Message body.

.wm_message_attachments

List of attachments.

.wm_message_rfc822

Appearance of message rfc822 headers.

Lowtoolbar

.wm_lowtoolbar

Lower toolbar of system displayed under messages list.

Other classes

.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:

.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_new_message

The form of a new message creation.

Inner styles:

.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".

Contacts screen

.wm_contacts

Work area of contacts screen.

.wm_contacts_list

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:

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

Settings screen

.wm_settings

WebMail user settings.

Inner styles:

.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_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_switcher_select_item

Current selected 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.

Calendar screen

.main_block

Sets the main background color of calendar.

Inner styles:

#area_1_day

The look of "long" events area in "Day" view mode.

#area_2_day

The look of the bottom event part in "Day" view mode.

#area_1_week

The look of "long" events area in "Week" view mode.

#area_2_week

The look of the bottom event part in "Week" view mode.

#area_2_month

The look of events area in "Week" view mode.

.right

Sets the look of small calendar and calendar manager.

Inner styles:

calendar_header

The look of headers of small calendar and calendar manager.

calendar_manager

The look of calendar manager area.

mini_calendar_box .CalLink

The look of text in current month cells.

weekend

The look of cell marked as weekend.

select

The look of currently selected cell.

today

The look of today's cell.

today a

The look text in today's cell.

.work_area_week

Sets the look of calendar external working area in "Week" view mode.

Inner styles:

notworkday

The look of lines in the main calendar area marked as non-working hours.

rhead_notworkday

The look of line headers marked as non-working hours.

weekend_day

The look of columns in the main calendar area marked as weekend.

current_day

The look of column of the current day.

.work_area_month

Sets the look of calendar external working area in "Month" view mode.

Inner styles:

cell_weekend

The look of cell marked as weekend.

cell_weekend .header

The look of cell headers marked as weekend.

cell

The look of other cells in "Month" view mode.

cell .header

The look of other cells headers in "Month" view mode.

cell .header_inactiv

The look of cells headers of months neighboring with the current.

.time_tabs_outer

Class of inactive tabs for switching calendar view mode (day/week/month).

Inner styles:

time_tabs_outer div

Additional class of inactive tabs for switching calendar view mode (day/week/month).

.time_tabs_outer_activ

Class of active tabs for switching calendar view mode (day/week/month).

Inner styles:

time_tabs_outer_activ div

Additional class of active tabs for switching calendar view mode (day/week/month).

.toolbar_interval_switch

Class of calendar toolbar

Inner styles:

#time_title_1, #time_title_2, #time_title_3

Class determining the look of text of timeframe switcher.

calendar_arrow_left

Class determining the look of the button for moving the time frame to the left.

calendar_arrow_right

Class determining the look of the button for moving the time frame to the right.

.day_headers_inner_today

Sets the look of column header of the current day in the main calendar working area

Inner styles:

day_headers_inner_today div

Adds roundness for column header of the current day.