Menu Design Customization

 

Related Docs:   Menu Customization Skin And Icon Set Customization

This document explains how to change the appearance of the navigation menu in the H-Sphere control panel. You are expected to be familiar with the FreeMarker technology and with H-Sphere templates.

  1. Login as cpanel, under root:

    su -
    su - cpanel

  2. Create the ~cpanel/shiva/custom directory if it doesn't exist yet.

  3. Inside the custom/ directory, create the following directories if they aren't there:

    • templates/
    • images/
    • bundles/

    Note: If the images/ directory is created, there must be a symlink to this directory from the Apache document root (which is the default template directory ~cpanel/shiva/shiva-templates); if not, users should place their images into the IMAGES directory.

  4. Put your images into the images/ directory and your interface text files (bundles) into the bundles/ directory.

  5. In the templates/ directory, create the common/ directory if it doesn't exist and copy the menu.fn file from the shiva-templates/common/ directory into that directory.

  6. Make changes in custom menu.fn. The following Freemarker functions are used in menu.fn to draw the navigation menu:

    - <function draw_menu(activeItem)>;
    - <function draw_sub(item, level)>;
    - <function draw_item(item, level)>;
    - <function draw_blank_menu()>.

    These functions draw different elements of the control panel menu. If you change them please note that the HTML tags you add must be well ordered and valid. For example, you have to make sure that the number of columns in the menu table, which is set in draw_menu, is the same in all these functions.

    (a) The draw_menu function calls the other mentioned functions to draw the menu and also defines the menu table as follows:

    <TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0">.
    

    (b) The draw_sub function draws the menu item which is the node for the submenu (group name):

    The menu_was_drawn variable is used to figure out how to show the next item.

    (c) The draw_item function draws the menu item which does not have a submenu. It may be a second-level item:

    Or, it could be even a first-level item that does not fall into any menu group:

    (d) The draw_sub_items function checks the type of the menu item and calls functions (b) or (c):

    If you don't want to use a standard H-Sphere image, change the following calls:

    <call draw_image("standard-image-mnemonic-id")>

    with:

    <IMG SRC="path_to_your_image/replacing_image" WIDTH="xx" HEIGHT="yy"></TD>
  7. Open the ~cpanel/shiva/psoft_config/hsphere.properties file, correct (if necessary) the following lines:

    USER_TEMPLATE_PATH = /hsphere/local/home/cpanel/shiva/custom/templates/
    CUSTOM_MENU_BUNDLE = custom.bundles.menu

    Note: Don't initialize the variables you are not using!

  8. Login as root and restart H-Sphere.


Related Docs:   Menu Customization Skin And Icon Set Customization







Home   Products   Services   News
© Copyright. . PSOFT. All Rights Reserved. Terms | Site Map