Announcement

Collapse
No announcement yet.

creating skins for Webmail

Collapse
This is a sticky topic.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    creating skins for Webmail

    How do I go about creating a new skin for the Webmail interface?

    #2
    Skins are a bit tricky to modify, the basic things you need to create a new skin in /var/opt/axigen/webmail (the default location) are:
    • a "skins/<skin_name>" subdirectory containing images, icons and css's (consult the "default" skin for reference)
    • a "skins/<skin_name>" subdirectory containing images, icons and css's (consult the "default" skin for reference)
      - private/skins/<skin_name>.header.hsp
      - private/skins/<skin_name>.content.hsp
      - private/skins/<skin_name>.tree.hsp
      - private/skins/<skin_name>.footer.hsp
    • in private/template/conf.hsp you should add the following line:
      <% PUSH (skin_list, "<skin_name>") %>
      before the last line:
      <% skin=config.skin %>
      in order to enlist the new skin.
    Last edited by dumol; May 17th, 2006, 02:57 PM.

    Comment


      #3
      Procedure for Axigen 2.0 :

      The basic things you need to create a new skin in /var/opt/axigen/webmail (the default location) are:

      * a "private/standard/images/<skin_name>" subdirectory containing images, icons (consult the "default" skin for reference)
      * a "private/standard/css/<skin_name>" subdirectory containing stylesheets (consult the "default" skin for reference)
      * in private/index.hsp you should add the following line:

      <% colorSchemes = PUSH("<skin_name>") %>

      before the following line:

      <% colorSchemes = PUSH("webreflection") %>

      in order to enlist the new skin.

      Comment


        #4
        Because you asked this question I've decided to write a short
        reply on this subject.

        Let's see how short can I be :-)

        I'm assuming that you already have axigen up and running on your system.
        If not, you should read this article first.

        Webmail
        --------------

        In the directory where you have installed axigen(probably /var/opt/axigen)
        you have a webmail folder.

        All the files in this folder and the images directory refers to the login
        page(login screen), all the webmail files are in the private directory.
        There is a way to change the login screen too, but this is not the purpose
        of this post. We'll might talk about this some other time.

        First step (HSP level)
        The first thing you'll need to do when creating a skin for webmail is to edit
        the index.hsp file in the private folder.

        AXIGEN Webmail was written using a proprietary language called HSP.
        If you want to read more about HSP you can find a
        PDF manual on our website.

        In this file you should see the next lines:
        <% ARRAY colorSchemes %>
        <% colorSchemes = PUSH("default") %>
        <% colorSchemes = PUSH("coolwater") %>
        <% colorSchemes = PUSH("webreflection") %>

        where the skins are defined.

        All you have to do is to add your own skin.
        Let's say we name the skin new skin, you'll have to add this line:
        <% colorSchemes = PUSH("new skin") %>

        After you save this file you'll have to restart the server.

        When it starts you can access the webmail using your username and password to login.
        In the Settings > Webmail Data ... in the skins select you'll have an
        option with the name of the skin we've just created: "new skin".

        PLEASE BE AWARE THAT NOW IT'S NOT A GOOD TIME TO CHOOSE "new skin" AS YOU
        SKIN.
        But we'll get there. Just another two steps and we're there.

        Second step (folder structure)
        You'll have to make a directory called just the same as your skin, in our
        case "new skin".

        So let's make this directory in two places:
        1. in the directory webmail/private/standard/css
        2. in the directory webmail/private/standard/images

        Now the fast way to have the new skin started is to copy all the css files
        from webmail/private/standard/css/default to the new directory we've just
        created webmail/private/standard/css.

        Do the same procedure for the all the images files. Copy all of them from
        webmail/private/standard/images/default to webmail/private/standard/images.

        What we've just did is a clone of the default skin.

        Now in the the Settings > Webmail Data in the skins select you can chose the
        "new skin" option and you're webmail will refresh.
        The "new skin" we'll look just the same as the default skin.

        There you have, you got a clone!

        Third step (CSS and images level)
        From this step you'll have to exercise your design and CSS abilities to make
        the "new skin" just the way you like it.

        Rules:
        The most important thing is to have all the css files from default
        directory.

        You'll have to use the class names defined in the css files.

        After you change a CSS class or replace an image you'll have to clear your browser
        cache to make sure it reloads the new content and refresh the page(F5).

        Also you'll have to be aware that this css files might change with version.
        Of course will add new css files as new features(pages) will appear.

        If you'll develop the new skin with Firefox I'll suggest you use an
        extension that will help you in the process of developing.

        I'm talking about FireBug made by Joe Hewitt.

        You can find the extension on Firefox Add-ons website or you can get all the goodies that Joe Hewitt included in the FireBug Beta from here. But be aware that is still in beta.

        After you install this tool you can use the Inspector option and move over
        elements in the page to see what class you'll have to change or what is the name of the image you'll
        like to replace.

        If you make something nice please be sure to let us know.

        I'll hope this will help you and next time I'll try to keep it short.

        Regards

        Comment


          #5
          Originally posted by vali View Post
          There is a way to change the login screen too, but this is not the purpose
          of this post. We'll might talk about this some other time.
          Can we talk about this now? Maybe another how to. I've tried to change the login screen, but it is very persistant in staying configured on the "standard" login screen.

          Thanks

          Edit: I fixed it, the server need a reboot
          Last edited by meofcourse; October 29th, 2007, 09:45 PM. Reason: Update

          Comment


            #6
            Vali- you certainly know about web mail skin development. I was hoping you had some advice for skins and facebook app development. Any suggestions will make my life much easier. Thanks.

            Comment


              #7
              creating a new skin for the Webmail interface?

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

              Regards,
              Sabareesh

              Comment

              Working...
              X

              This is the legacy Axigen forum, which is no longer active.

              To create new topics & posts, please visit the new Axigen community.

              Axigen Community