Adding Custom Icons

Last modified: 28 Dec 2007

To provide multiple design support, H-Sphere uses the design_config.xml file, which can be found in the /hsphere/local/home/cpanel/shiva/psoft/hsphere/ directory. Its structure is explained in the Design XML Configuration guide.

The current document provides an example of how to customize this file to add your own custom icons. For this, you need to:

1. Create custom design_config file in custom location that will be merged with the default XML configuration file. Your design_config.xml should include only differences in relation to the original H-Sphere one.
2. As H-Sphere supports several icon sets, create an icon for each icon set and include information about this icon location into your custom design_config.xml. To do this:
   
   1. Declare the url and the image id that will be used for your icon:

              <design_config>
              <icons>
              <icon id="custom_mail_icon" url_param="template_name=email/custom_email.html"
                      rtype="" platform=""
                      label="quick.your_custom_mail_web_app"
                      tip="quick.your_custom_mail_web_app" help=""/>
              </icons>
              </design_config>
        

      Where:
      -The email/custom_email.html is the hsphere page (custom template) from which a customer will be redirected to your url.
      -The quick.your_custom_mail_web_app label should be described in the customized hsphere_lang.properties file.
      
   2. Specify the place where the icon will be displayed. It can be included into the Quick Access page for the Admin Account or end user Quick Access page:

              <design_config>
              ...
              ...
              <skill_icon_sets account_type="user">
                  <skill_set id="advanced" label="icon_skill_set.advanced_user_l">
                      <icon_group id="mail" label="icongroups.mail">
                          <icon id="custom_mail_icon"/>
                      </icon_group>
                  </skill_set>
              <skill_set id="standard" label="icon_skill_set.standard_user_l">
                  <icon_group id="mail" label="icongroups.mail">
                      <icon id="custom_mail_icon"/>
                  </icon_group>
              </skill_set>
              </skill_icon_sets>
              </design_config>
        

      So, your icon will be included into standard and advanced Quick Access of the Mail section.

   3. Describe which image will be used for each icon set. Use the custom image directory to store your new icons /hsphere/local/home/cpanel/shiva/custom/images:

      
          <design_config>
              ...
              ...
              <icon_image_sets base_dir="/CUSTOM_IMAGES">
      
                  <icon_image_set id="default" label="iconsets.default" dir="">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="46"
          height="49"/>
                  </icon_image_set>
      
                  <icon_image_set id="blue_haze" label="iconsets.blue_haze" dir="blue_haze">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="46"
          height="49"/>
                  </icon_image_set>
      
                  <icon_image_set id="cocoa" label="iconsets.cocoa" dir="pebble">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="46"
          height="49"/>
                  </icon_image_set>
      
                  <icon_image_set id="marsh" label="iconsets.marsh" dir="marsh">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="46"
          height="49"/>
                  </icon_image_set>
      
                   <icon_image_set id="wooden" label="quick.iconsets.wooden"
          dir="ICONS/wooden">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="48"
          height="48"/>
                  </icon_image_set>
      
                  <icon_image_set id="square_set" label="quick.iconsets.square_set"
          dir="ICONS/square_set">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="48"
          height="48"/>
                  </icon_image_set>
      
                  <icon_image_set id="cartoon_set" label="quick.iconsets.cartoon_set"
          dir="ICONS/cartoon_set">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="48"
          height="48"/>
                  </icon_image_set>
      
                  <icon_image_set id="bubble_set" label="quick.iconsets.bubble_set"
          dir="ICONS/bubble_set">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="48"
          height="48"/>
                  </icon_image_set>
      
                  <icon_image_set id="xcp1_set" label="quick.iconsets.xcp1_set"
          dir="ICONS/xcp1">
                  <image id="custom_mail_icon" file="custom_mail_icon.png" width="48"
          height="48"/>
                  </icon_image_set>
      
                  <icon_image_set id="xcpl_set" label="quick.iconsets.xcpl_set"
          dir="ICONS/xcp1">
                  <image id="custom_mail_icon" file="custom_mail_icon.gif" width="48"
          height="48"/>
                  </icon_image_set>
      
              </icon_image_sets>
          </design_config>
      

3. Create images for each icon set and place them into the corresponding directories. The base directory for your images is /hsphere/local/home/cpanel/shiva/custom/images