General Structure

The templates / Skins directory can be found at
/Templates

After Importing All skins you will see 8 folders

admin
Blue Skin
Default Skin
Nature Skin
Night Skin
Silver Skin
Snow Skin
Skin Files

admin directory has all skin files needed for admin interface

The name of the directory under /templates is the name of the skin, Default Skin is name of the skin as well as the name of folder

create a new folder and the name of the folder will be the name of the skin

the structure of skin folder is

SkinFolder
— Default.html
— Images
— css/css.css

Images folder will have all images
css folder will have css.css file

default.html is html file which holds look and feel of the application

 

TAGS

open default.html in any html editor and go to the source code mode you will notice tags like

[+SKIN_IMAGES_PATH+]
[+BODY_TAG+]

these tags are replaced by content at run time following are the tags which will be replaced at run time

  • [+TITLE+]
    Title of the page
  • [+CHARSET+] 
    Char set of the page like UTF-8
  • [+CSS+]
    Full path to current skin css file e.g: Templates/<SkinFolderName>/css/css.css
  • [+BODY TAG+]
    Html body like <body onload=init(); >
  • [+LOGOUT_LINK+]
    Log out link
  • [+USERNAME+]
    Currently logged in user name
  • [+HOME_LINK+]
    Link to index page of application
  • [+SKIN_IMAGES_PATH+]
    Path of the currently applied skin e.g: Templates/<SkinFolderName>
  • [+FLNAME+]
    First name of the currently logged in user
  • [+USED_SPACE+]
    Used space , this will be in units like 10 MB or 1024 KB
  • [+TOTAL_SPACE+]
    Total spaced allowed to the user, this will be in units like 10 MB or 1024 KB
  • [+SPACE_BAR+]
    Html for space bar
  • [+1_NAME+] and [+1_SIZE+]
    Name and number of emails in inbox folder
  • [+2_NAME+] [+2_SIZE+]
    Name and number of emails in sent mails folder
  • [+3_NAME+] [+3_SIZE+]
    Name and number of emails in Draft folder
  • [+4_NAME+] [+4_SIZE+]
    Name and number of emails in Trash folder
  • [+EMPTY_TRASH_LINK+]
    Link to empty the trash folder
  • [+MY_FOLDERS+]
    List of user defined folders
  • [+BUILD_LNG+]
    Html code of list box that contains all installed languages
  • [+BUILD_SKIN+]
    Html code of list box that contains all installed skins
  • [+MY_POPS+]
    List of all user added pop3 accounts
  • [+DATA+]
    Main content of the page
  • [+P_LNK+]
    Powered by link code, this should not be removed unless you have paid for powered by removal code

you can place these tags on the page you design 

 

CSS

Copy the css file from /Templates/Default Skin/css folder and copy it your css folder

The name of css file should not change

Some important Styles in css.css are

  • .mylfontfacesize
    All Textual data in the application uses this style
  • .button1
    This is style of buttons you see in the application, edit this to match your design
  • .mylbgcolor
    This style applies to inbox page where all emails are listed , the color will be of CELL background when mail is READ
  • .mylbgmenucolor
    This style applies to inbox page where all emails are listed , the color will be of CELL background when mail is READ and mouse is over the cell
  • .mylbgbodycolor
    This style applies to inbox page where all emails are listed , the color will be of CELL background when mail is UNREAD(new )and mouse is over the cell
  • .mylbgmenucolor
    This style applies to inbox page where all emails are listed , the color will be of CELL background when mail is UNREAD(new)
  • .mylbgmenucolor
    This is the color of table cell <td> this is important you should change that according to your design
  • .mylbgbodycolor
    This is the color of table Head <tr> this is important you should change that according to your design
  • .MYLTableHeaderText
    All Heading text uses this style

 

Testing your skin
rename the folder /templates/Default Skin to /templates/Default Skin.rename

create new folder /templates/Default Skin

and copy images and css sub folders to Default Skin and also copy default.html file

now login to mailyoulike client/user side you will see your skin changes

 

Creating skin file
once you are done with the skin , zip the skin folder with all its sub folder and files and send it to us , we will create a .xml file , and you can use that to import your skin into mailyoulike

when sending us the skin please keep the name of skin folder to what the name of the skin you want .

before sending us the skin files please test your skin.