Webmail Skinning Guide - MailEnable · MailEnable Webmail Skinning Guide (for version 8.0 and...

Click here to load reader

  • date post

    18-Sep-2018
  • Category

    Documents

  • view

    216
  • download

    0

Embed Size (px)

Transcript of Webmail Skinning Guide - MailEnable · MailEnable Webmail Skinning Guide (for version 8.0 and...

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