Untangle

Untangle Skins Cookbook

 Inspiration

You've heard so much about Untangle and the magic it offers right out the box.
And now you want to make it look exactly the way you like it..

The entire user interface of Untangle can be skinned.

This includes:

This cookbook describes the following:

Updating a skin made for an earlier version of Untangle

New

How to update a skin made for an earlier version of Untangle

Uploading a skin:

  1. Open the Administration client
  2. Go to Config tab and open Administration window.
  3. In Administration go to Skins tab and the section "Upload an new skin"
  4. Click Browse
  5. Select the zipped skin file and press Upload

The skin will be uploaded and it will become available.

Note: The skin directory structure is described below.
This must be zipped into a single file.To use the skin it must be uploaded on the server.

Selecting administration client skin:

  1. Go to Config tab and open Administration window.
  2. Go to Skin tab and from the Administration skin section choose a skin
  3. Press Save.

The client gui will be displayed using the selected skin

Selecting User Facing Pages Skin:

User pages skin can be selected when Branding Manager commercial Add-on is enabled.
When Branding Manager is enabled a tab called Branding is displayed in Administration window.
To change the user facing pages skin:

  1. Go to Branding tab
  2. Choose a Block Page skin
  3. Press Save.

The user facing pages will be displayed using the selected skin.

Creating Your Own Skin

There are 3 things that can be changed to make your own skin.

  1. The ExtJs Skin (Untangle uses ExtJS version 2.2 for most of its UI components)
  2. The Administration Client Skin
  3. User Facing Pages Skin

Skin Directory Structure:

Untangle expects the following skin directory structure for any skin created.

skin.xml                     - skin information file 
css/admin.css                - administration client styles
   /user.css                 - user pages styles
   /ext-skin.css             - ExtJs skin styles

images/admin/* - administration client images /user/* - user pages images /<extJs-images-folder> - the folder containing images used by ExtJs skin

skin.xml file

This file tells the Untangle Server the name of the skin and the type of skin (admin, user facing etc.,).
A sample skin.xml file is shown below.

<?xml version="1.0" encoding="UTF-8"?>
<skin>
  <name>skinName</name>
  <displayName>Skin Display Name</displayName>
  <adminSkin>true</adminSkin>
  <adminSkinVersion>2</adminSkinVersion>
  <userFacingSkin>true</userFacingSkin>
  <userFacingSkinVersion>2</userFacingSkinVersion>
</skin>

ExtJs skin

Untangle uses ExtJS version 2.2 for most of its UI components such as windows, panels, tabs, buttons, and tables.
ExtJs has a themes mechanism. It has some built in themes.
Custom user themes can also be defined: See http://extjs.com/learn/Ext_Extensions#User_Themes for details.

The Ext Js themes file must be named ext-skin.css.

Administration client skin

The css/admin.css file contains the styles and images/admin/ directory contains the images for the administration client.

Here is the list of images and where they are used in the Administration Client.
Here's an illustration that shows how the CSS gets used in the Administration client.

User pages skin

The css/user.css file contains the styles and images/user/ directory contains the images.

Here is the list of images and where they are used in the user facing pages.
To see how css styles are used click: user-block-page-styles.jpg, user-quarantine-styles.jpg