An introduction to lookserver v10 Skins

Posted by Simon Kennedy on Oct 21, 2013 10:30:00 PM

   

First of all welcome to lookserver 10 - there are many fantastic features for you to utilize and enhance your modernized applications even further.

Let’s look at one of the new aspects of lookserver 10 and how you can leverage new content and content from existing deployments in a more effective and simple way.

Prologue

In previous versions of lookserver we supported a single CSS file to enable customization of styles within the lookserver content. You could import other CSS files from this file but it was left up to the administrator to switch in/out new CSS content manually through the file explorer. Location of images was not explicitly specified and custom JavaScript had to be manually added through a master layout page.

List View Andriod

Figure. 1: Android mobile skin

list view css iphone

Figure. 2: iPhone mobile skin

In the latest version of lookserver we have added a feature called ‘Skins’ that enables quick substitution of CSS content and other resources (all packaged together) while still enabling personal customization.

Figure. 1 and Figure. 2 are examples of what are possible with custom skins.


Skin Package structure

Figure. 3 Shows the structure of a typical ‘Skin’ package. The ‘Skin’ is distributed as a Zip file containing a single Folder of which the name must be unique to the ‘Skin’ (but may be different to the actual name in the ‘Skin.config’ file).

skin file structure

Figure. 3: Skin file structure

As indicated in Figure. 3 lookserver expects that a minimum of three files (skin.config, css/skin.css and js/skin.js) and all other files are optional.

The ‘skin.config’ is a simple XML file which enables the author to denote a ‘Name’, ‘Description’ and ‘Date Created’.
 

Importing content from lookserver v9

As this is a new feature to lookserver v10 it would not be unexpected for there to be existing custom content that users would like to package as a ‘Skin’ for lookserver v10.

This is actually quite simple to accomplish by performing the following steps:

  1. Copy an existing ‘Skin’ directory under the ‘App_themes’ directory giving the folder a unique name.

  2. Modify the ‘skin.config’ file and update its ‘Name’, ‘Description’ and ‘Date Created’ attributes.

  3. Delete the ‘css/skin.css’ file and copy the ‘layout.css’ (and any related CSS files) from lookserver v9 into the ‘css’ directory. Rename ‘layout.css’ to ‘skin.css’.

  4. Clear the contents of the ‘js/skin.js’ file and update with any javascript code you like (or leave blank).

  5. Move images in the ‘imgs’ directory. When CSS includes images the paths will be relative to the CSS directory. e.g background-image: url(imgs/image.png).

Any CSS files that use the ‘*.css.template’ name will continue to work as they did in previous versions.


Developing new ‘Skins’ content

The foremost reason for the introduction of the ‘Skins’ feature in lookserver v10 was to enable customers to easily select from a range of different ‘looks’ that would align with the content and the presentation that the customer is looking for. A ‘Skin’ should be also viewed as a template for which a user may modify with custom images, fonts and additional styles as desired. The modified ‘Skin’ can then be re-packaged for deployment as required.

Figure. 4 and Figure. 5 are examples of custom skin deployments for desktop and tablet form factors.

chrome3


Figure. 4: Custom ‘Trillium’ skin



ipad5


Figure. 5: Custom Skin designed for tablets


While lookserver v10 will only contain a default ‘Skin’ additional ‘Skins’ will be available through the looksoftware.com website which you can find here: Skins Download Page

Stay tuned for the next blog entry: Customising an existing ‘Skin’.

Simon Kennedy
Author
Simon Kennedy
Developer, looksoftware

 

Download the What's New in lookserver 10 PDF

Topics: GUI, lookserver