Previous topic

Control Panels

Next topic

Skin Structure

Skin Creation

Creating a custom skin includes a number of steps as this document explains. Once your custom skin is uploaded to the APS catalog and certified, you can download and distribute it across your brands.

Development Process

A typical development process contains the following steps:

  1. On your lab platform, find the default skin shipped with the platform installation package. The skin folder is

    /usr/local/pem/wildfly-10.1.0.Final/ext/webgate/static/skins/v3/.

    Note

    Depending on the WildFly version, the corresponding folder name varies.

    You can either edit the skin directly on the management node or download it to your local computer for editing. In any case, back up the default skin to ensure you can restore it after you finish the skin development.

    If there are some custom skins imported to the platform, you can use them as initial data for creating the new skin in addition to or instead of the default skin. Locate the custom skins as explained in the Related Locations section.

  2. Inside the skin folder, customize the styles in the css/custom.css file as explained in the Modify Custom Skin section. This will override the styles defined in other CSS files inside the css/ folder.

  3. If necessary, update the static content, for example, images including icons in the images/ folder.

  4. Once the new skin meets your expectation, package all updated and new files in a ZIP archive.

Modify Custom Skin

Editing the skin involves modifying styles in the custom.css file and making changes to logos and artwork files referenced from this and other CSS files.

Note

Any modification of skins shall include any copyright or other proprietary notices that were included on a skin when you first received it. Skin modifications that hide or make unreadable any elements of CloudBlue Commerce copyright will prevent your skin from being approved by the APS team. Hiding or replacing CloudBlue Commerce copyright in the CloudBlue Commerce user interface is out of skins customization scope and subject to a special agreement. For details, contact your Ingram Micro sales representative.

Assuming that there is only the default skin on your platform, connect to the server to edit the skin as follows:

  1. Use an SSH client to access the folder containing the default skin on the server.

  2. Back up the contents of the folder, so you can easily roll back your changes later.

  3. Copy the folder content to your computer and edit the custom.css file preserving the size and format of the images included in the skin. For more details on custom.css and other files included in the skin, see Skin Structure and Editing Skin.

    Note

    Do not change the layout rules in custom.css and locations of the skin files - the paths to those files are specified in a separate CSS file that cannot be customized.

  4. If you want to use your own icons instead of the standard ones, open the images/ folder and replace the default icon images with custom images of the same pixel size and format.

  5. You can also use custom fonts and additional images by copying them to the skin folder and editing the links to external files in the custom.css file.

  6. To apply your changes to the platform, copy the new and updated skin files back to the management node.

  7. Once you finished modifying the skin, compress the folder with the new and modified skin files into a ZIP archive. The folder that you need to compress is named content/ and it includes two sub-folders: css/ and images/.