Using the Webix Skin Builder for custom themed Dynamic Login Pages

• Throughout the development cycle of RADIUSdesk we tried various tool-kits and frameworks for the Dynamic Login Pages.
• Sencha Touch - Does not display on all the mobile devices.
• JQuery Mobile - Is a mobile only toolkit and the desktop browser support is actually non existing.
• Enter Webix. Webix is a relative new kid on the block but managed to give us a pure JavaScript library that we could use for both mobile and desktop devices.
• So far the results have been very good in terms of support for the majority of mobile devices.
• This page will give you as a developer some guidance on how to create a new theme for the login pages and a way to implement it.

• So you managed to land a country wide deal for a restaurant chain wanting you do deploy MESHdesk hotspots in all their branches.
• Unfortunately their red and white skin is not supported by the RADIUSdesk Webix pages out of the box.
• This calls for a custom skin which you can fine tweak using this URL: http://webix.com/skin-builder/
• Here are a few tips we picked up:
  • Rather keep the default Flat skin and simply tweak its colors.
  • Make the font sizes a bit bigger to display better on mobile devices. Font size 18 (px) Bar font size 20 (px)
• So we got our red based skin on the Skin Builder.
• Once we are happy we can simply download the skin.
• It downloads as a ZIP file with the following files in it:
  • readme.txt - A file with some instructions on how to implement the skin.
  • skin.js - An override file to use if you use the standard webix.js file.
  • webix.js - A version of the Webix library specifically tailored for the skin we created.
  • webix.css - A CSS file that has our skin's CSS.

• The following section should only be used as a guidance and is not set in rock.
• Rename the webix.js and webix.css files of the downloaded and extracted ZIP file to something that will allow you to associate it with the skin. We assume our deal is with the Wimpy restaurant chain, so we will rename it to wimpy.js and wimpy.css respectively.
• Move these files into the /usr/share/nginx/html/rd_login/codebase/ folder. It is required to be located in this directory in order for the font files to be sourced correctly.
• We assume that we use CoovaChilli captive portals. Do the following:

sudo cp /usr/share/nginx/html/rd_login/cc/m/index.html /usr/share/nginx/html/rd_login/cc/m/index_wimpy.html
sudo cp /usr/share/nginx/html/rd_login/cc/d/index.html /usr/share/nginx/html/rd_login/cc/d/index_wimpy.html

• Now you can edit both of these files to include our new skin:

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="../../codebase/wimpy.css" type="text/css" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="../../codebase/wimpy.js"></script>
 
<script type="text/javascript" charset="utf-8" src="../../codebase/jquery-1.11.3.min.js" ></script> 

• You might have noted that we still have some left overs of your previous skin.
• These were not part of the skin but rather part of an optional CSS file.
• Make a copy of the styles.css files and tweak them to fit the skin you created:

sudo cp /usr/share/nginx/html/rd_login/cc/m/css/styles.css /usr/share/nginx/html/rd_login/cc/m/css/styles_wimpy.css
sudo cp /usr/share/nginx/html/rd_login/cc/d/css/styles.css /usr/share/nginx/html/rd_login/cc/d/css/styles_wimpy.css

• Modify the index_wimpy.html files to use this new style instead.

<!-- This goes out -->
<!--<link rel="stylesheet" type="text/css" href="css/styles.css"> --> 
 
<!-- This goes in -->
<link rel="stylesheet" type="text/css" href="css/styles_wimpy.css">  

• Select a Dynamic Login Pages entry and edit it. Go to Settings → Theme sub-tab.
• Recent versions of RADIUSdesk allow you to specify the theme of a Dynamic Login Page item as Custom.
• If you select Custom there will be optional fields available to specify the location of the CoovaChilli and Mikrotik pages that should be used.
• We will thus specify:
  • /rd_login/cc/d/index_wimpy.html
  • /rd_login/cc/m/index_wimpy.html
  • /rd_login/mt/d/index_wimpy.html
  • /rd_login/mt/m/index_wimpy.html

• The option to specify a theme as Custom along with the ability to quickly create a Skin for Webix makes the customization of Dynamic Login Pages a snap.