
Untangle Skins Cookbook

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:
- Entire Administration Client
- All User Facing Pages
This cookbook describes the following:
- How to upload Untangle skins created by the community
- Choosing different skins within Untangle
- Creating your own skin
Updating a skin made for an earlier version of Untangle
How to update a skin made for an earlier version of Untangle
Uploading a skin:
- Open the Administration client
- Go to Config tab and open Administration window.
- In Administration go to Skins tab and the section "Upload an new skin"
- Click Browse
- 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:
- Go to Config tab and open Administration window.
- Go to Skin tab and from the Administration skin section choose a skin
- 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:
- Go to Branding tab
- Choose a Block Page skin
- 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.
- The ExtJs Skin (Untangle uses ExtJS version 2.2 for most of its UI components)
- The Administration Client Skin
- 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>
- name is skinName
- displayName will be displayed in the skin chooser select box in the Administration Section
- adminSkin - true/false - (set this value to true if your skin has an administration client skin)
- userFacingSkin - true/false - (set this value to true if your skin has a user facing skin page)
- adminSkinVersion - the version of the administration client skin
- userFacingSkinVersion - the version of the user facing 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