- Products
- Purchase
Order Online Maintenance Renewal Resellers - Support
Helpdesk Online Documentation Web Forum - Our Clients
- About
About us Services Contact
WebMail Pro 
MailBee.NET Objects 
MailBee.NET Queue 
MailBee Objects 
MailSuite Pro for Linux
MailSuite Pro for Windows From AfterLogic Wiki
* all illustrations are for AfterLogic WebMail skin of Pro version.
Contents |
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.
Last edit: 2011/3/21