Download - Webmail Skinning Guide - MailEnable · MailEnable Webmail Skinning Guide (for version 8.0 and above) For MailEnable version 8.0 and above. To develop a new skin for MailEnable Webmail,

Transcript

MailEnable Webmail Skinning Guide (for version 8.0 and above) For MailEnable version 8.0 and above. To develop a new skin for MailEnable Webmail, duplicate the “Pacific” folder (Version 8) under the skins directory, and use this as the base to develop the new skin.

Login Page

CSS Classes Description/Notes

.loginScreen_shell In “me.css” stylesheet, locate this class and change the Top & Bottom colour values to create a new gradient, but make sure you update these values for all background declarations (filters targeting different browsers), see below syntaxes.

background:linear-gradient(to bottom, #E7EEF4, #7197B3); /* W3C */

background:-moz-linear-gradient(top, #E7EEF4, #7197B3); /* FF3.6+ */

background:-webkit-linear-gradient(top, #E7EEF4, #7197B3); /* Chrome10+,Safari5.1+ */

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E7EEF4), to(#7197B3));/*Chrome,Safari4+ */

background:-ms-linear-gradient(top, #E7EEF4, #7197B3); /* IE10+ */

background:-o-linear-gradient(top, #E7EEF4, #7197B3); /* Opera 11.10+ */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E7EEF4', endColorstr='#7197B3',

GradientType=0) !important; /* IE7-9 */

_background:#7197B3; /* IE6 */

.loginPanel_top Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers)

MailEnable Webmail Skinning Guide (for version 8.0 and above)

Main Theme Colour

CSS Classes Description/Notes

.topNav Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers), see below syntaxes.

background:linear-gradient(to bottom, #258DC9, #1C6595); /* W3C */

background:-moz-linear-gradient(top, #258DC9, #1C6595); /* FF3.6+ */

background:-webkit-linear-gradient(top, #258DC9, #1C6595); /* Chrome10+,Safari5.1+ */

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#258DC9), to(#1C6595)); /*

Chrome,Safari4+ */

background:-ms-linear-gradient(top, #258DC9, #1C6595); /* IE10+ */

background:-o-linear-gradient(top, #258DC9, #1C6595); /* Opera 11.10+ */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#258DC9',

endColorstr='#1C6595', GradientType=0); /* IE7-9 */

_background:#258DC9; /* IE6 */

.dataTable_listRow_selected Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers)

.bttn_toolbar_primary_shell.blue (as above)

MailEnable Webmail Skinning Guide (for version 8.0 and above)

Toolbar, Dropdown Menu & Message Header

CSS Classes Description/Notes

.bttn_shell.blue Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers)

.msgHeader_table Change the color of this panel using RGB values. Note that there is an 80% transparency. Make sure all background declarations are updated (filters targeting different browsers)

background:rgb(230,230,230);

background:rgba(230,230,230,0.8);/* #E6E6E6 @ 80% */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccE6E6E6,endColorstr=#ccE6E6E6);

.dropDown_shell_left

.dropDown_shell_right Change the background value to amend this solid-colour menu

MailEnable Webmail Skinning Guide (for version 8.0 and above)

Footers & Tab-Panels

CSS Classes Description/Notes

.dataTable_listRow_selected Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers)

.contacts_foot_shell (as above)

.popupWin_tabbedPanel_head Change the background value to amend this solid-colour panel

MailEnable Webmail Skinning Guide (for version 8.0 and above)

Collapsible Panel Borders & Loading Panel

Image File / Dimensions (px) CSS Classes Description/Notes

splitter_collapsed_bg_vertical.gif (42x1)

.resizer-west-closed

.resizer-east-closed 2 images in 1, contains default/rollover states. Rollover image on the right. To change the colour of this panel, update the background image.

splitter_collapsed_bg_horizontal.gif (1x42)

.resizer-north-closed,

.resizer-south-closed (as above)

.loadPanel_shell Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers)

MailEnable Webmail Skinning Guide (for version 8.0 and above)

Popup Window Panels

CSS Classes Description/Notes

.popupWin_shad_body Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers), see below syntaxes.

background:linear-gradient(to bottom, #258DC8 0px, #1C6595 30px); /* W3C */

background:-moz-linear-gradient(top, #258DC8 0px, #1C6595 30px); /* FF3.6+ */

background:-webkit-linear-gradient(top, #258DC8 0px, #1C6595 30px); /* Chrome10+,Safari5.1+

*/

background:-webkit-gradient(linear, left top, left bottom, color-stop(0px,#258DC8), color-

stop(30px,#1C6595)); /* Chrome,Safari4+ */

background:-ms-linear-gradient(top, #258DC8 0px, #1C6595 30px); /* IE10+ */

background:-o-linear-gradient(top, #258DC8 0px, #1C6595 30px); /* Opera 11.10+ */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#258DC8',

endColorstr='#1C6595', GradientType=0); /* IE7-9 */

_background:#258DC9; /* IE 6 */

.options_tabbedPanel_head Change the background value to amend this solid-colour panel

MailEnable Webmail Skinning Guide (for version 8.0 and above)

Options

CSS Classes Description/Notes

.options_footer Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers)

MailEnable Webmail Skinning Guide (for version 8.0 and above)

iPhone/iPad Mode

CSS Classes Description/Notes

.itopNav Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers), see below syntaxes.

background:linear-gradient(to bottom, #258DC9, #1C6595); /* W3C */

background:-moz-linear-gradient(top, #258DC9, #1C6595); /* FF3.6+ */

background:-webkit-linear-gradient(top, #258DC9, #1C6595); /* Chrome10+,Safari5.1+ */

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#258DC9), to(#1C6595)); /*

Chrome,Safari4+ */

background:-ms-linear-gradient(top, #258DC9, #1C6595); /* IE10+ */

background:-o-linear-gradient(top, #258DC9, #1C6595); /* Opera 11.10+ */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#258DC9',

endColorstr='#1C6595', GradientType=0); /* IE7-9 */

_background:#258DC9; /* IE 6 */

.itopNav_bttn_left Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are updated (filters targeting different browsers).