Webmail Skinning Guide

Transcription

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
.loginScreen_shell
Description/Notes
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)
Main Theme Colour
CSS Classes
.topNav
Description/Notes
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
.bttn_toolbar_primary_shell.blue
are updated (filters targeting different browsers)
(as above)
Toolbar, Dropdown Menu & Message Header
CSS Classes
.bttn_shell.blue
.msgHeader_table
Description/Notes
Change the Top & Bottom colour values to create a new gradient, make sure all background declarations are
updated (filters targeting different browsers)
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
Footers & Tab-Panels
CSS Classes
.dataTable_listRow_selected
.contacts_foot_shell
.popupWin_tabbedPanel_head
Description/Notes
(as above)
Change the background value to amend this solid-colour panel
Collapsible Panel Borders & Loading Panel
Image File / Dimensions (px)
splitter_collapsed_bg_vertical.gif
(42x1)
CSS Classes
.resizer-west-closed
.resizer-east-closed
splitter_collapsed_bg_horizontal.gif
(1x42)
.resizer-north-closed,
.resizer-south-closed
.loadPanel_shell
Description/Notes
2 images in 1, contains default/rollover states. Rollover image
on the right. To change the colour of this panel, update the
background image.
(as above)
Change the Top & Bottom colour values to create a new
gradient, make sure all background declarations are updated
(filters targeting different browsers)
Popup Window Panels
CSS Classes
.popupWin_shad_body
Description/Notes
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), colorstop(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+ */
_background:#258DC9; /* IE 6 */
.options_tabbedPanel_head
Change the background value to amend this solid-colour panel
Options
CSS Classes
.options_footer
Description/Notes
iPhone/iPad Mode
CSS Classes
.itopNav
Description/Notes
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+ */
_background:#258DC9; /* IE 6 */
.itopNav_bttn_left
are updated (filters targeting different browsers).

Webmail Skinning Guide

Transcription

Similar documents

SandFlex - Surface Innovation

modern designs - Resene Paints

`Tyci Tavoli series of tables` product card

One day, Clever Cat went shopping for a new cushion. But

Editor`s fave - Pip Miller PR

modern drama - Alykhan Velji Designs

GOLDWELL TURNS UP THE HEAT IN HAIR COLOUR WITH THE

Fountas Pinnell Information Brochure

Now!

Playtime Paris – more European finds!