Skin And Icon Set Customization

H-Sphere interface design has a broader meaning than just configuration of certain color schemes and the corresponding icon sets, what is called the skin. It also determines the set of skins available for this design, specifies the sets of icons in the Quick Access page and enables to override the standard settings with the custom ones.

To provide multiple design support, H-Sphere uses the 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 shows you how to customize this file to add your own designs, color schemes, colors and images. For this, you need to:

1. Design XML Customization

A designer should have access to the H-Sphere server as the "cpanel" user. To implement customization correctly, all template files and directories should have cpanel:cpanel ownership.

There are the following ways of customizing design XML configuration:

1. Merging custom XML configuration
   (HS 2.4 and up)

   Instead of creating a package, create a custom XML configuration file to be merged with the default XML configuration and a custom package XML if installed.

2. Overrriding default XML configuration with custom XML configuration
   (deprecated in 2.4)

   You create the custom design configuration file and perform modifications there:

   1. Login to cpanel user under root:
      

      su -
      su - cpanel

   2. copy the standard file to a certain custom directory (it may be /hsphere/local/home/cpanel/shiva/custom/xml):
      
   3. in ~cpanel/shiva/psoft_config/hsphere.properties, change the DESIGN_SCHEME_CONFIG variable to point to this new file:
      

2. Implementation of Custom Design Templates

Custom design templates are created in the ~cpanel/shiva/custom/templates custom template directory. In order to implement these custom designs, the symlinks to them should be put into the Apache DocumentRoot directory which is set by default to the ~cpanel/shiva/shiva-templates standard templates directory.

However, on the subsequent H-Sphere update all symlinks in ~cpanel/shiva/shiva-templates would be lost, and custom designs would not be displayed correctly.

To avoid this, we suggest to use another directory as DocumentRoot and to create there the symlinks to ALL design directories, for both custom designs and the H-Sphere built-in designs.

1. Create the /hsphere/local/home/cpanel/shiva/web directory.

2. Create the symlinks to the design directories using the ln -s command.

You should have something similar to this:

bash-2.05a$ pwd
/hsphere/local/home/cpanel/shiva/web
bash-2.05a$ ls -la

...

lrwxrwxrwx 1 cpanel cpanel 55 common -> /hsphere/local/home/cpanel/shiva/shiva-templates/common
lrwxrwxrwx 1 cpanel cpanel 46 counter -> /hsphere/shared/SiteStudio/public_html/counter
lrwxrwxrwx 1 cpanel cpanel 47 custom-images -> /hsphere/local/home/cpanel/shiva/custom/images/
lrwxrwxrwx 1 cpanel cpanel 50 custom-templates -> /hsphere/local/home/cpanel/shiva/custom-templates/
lrwxrwxrwx 1 cpanel cpanel 48 guestbook -> /hsphere/shared/SiteStudio/public_html/guestbook
lrwxrwxrwx 1 cpanel cpanel 55 IMAGES -> /hsphere/local/home/cpanel/shiva/shiva-templates/IMAGES
lrwxrwxrwx 1 cpanel cpanel 46 masonry -> /hsphere/shared/SiteStudio/public_html/masonry
lrwxrwxrwx 1 cpanel cpanel 55 nomenu -> /hsphere/local/home/cpanel/shiva/shiva-templates/nomenu
lrwxrwxrwx 1 cpanel cpanel 43 poll -> /hsphere/shared/SiteStudio/public_html/poll
lrwxrwxrwx 1 cpanel cpanel 48 shiva-templates -> /hsphere/local/home/cpanel/shiva/shiva-templates
lrwxrwxrwx 1 cpanel cpanel 59 text_based -> /hsphere/local/home/cpanel/shiva/shiva-templates/text_based
lrwxrwxrwx 1 cpanel cpanel 62 YourDesign1 -> /hsphere/local/home/cpanel/shiva/custom/templates/YourDesign1
lrwxrwxrwx 1 cpanel cpanel 62 YourDesign2 -> /hsphere/local/home/cpanel/shiva/custom/templates/YourDesign2

Here, the counter, guestbook, masonry, and poll directories are SiteStudio-related directories; YourDesign1 and YourDesign2 are custom design directories.

3. Make the /hsphere/local/home/cpanel/shiva/web directory in the DocumentRoot directory.

To do this, in the ~cpanel/apache/etc/httpd.conf Apache configuration file change the DocumentRoot global definition line:

DocumentRoot "/hsphere/local/home/cpanel/shiva/shiva-templates"

DocumentRoot "/hsphere/local/home/cpanel/shiva/web"

Then, delete all other instances of the DocumentRoot definition (for virtual hosts) in this file. Also, delete all DocumentRoot definitions in all configuration files located in the ~cpanel/apache/etc/sites directory.

4. Logout from cpanel back to root and restart H-Sphere.