RADIUSdesk WiFi Hotspot Manager and GUI for FreeRADIUS
MESHdesk Streamlined Mesh Controller

Changing the Desktop Login Page theme

  • To change the theme of the desktop login page we will use the following URL as reference:
  • To change the theme of an ExtJs based app is a bit more involved when comparing it with Sencha Touch. It remains however still fairly easy.
  • We will show on this page how you would go about to get a red and black theme going on the Desktop Login Page.
  • We assume you have already followed the instructions on how to build your own login pages and have at least build the login pages once with the defaults.

Paint it black... and red

  • Change directory to the desktop login page who's theme you want to change:
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
  • Create your black theme package:
sencha generate theme my-black-theme
  • This will build a theme package under the /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/packages directory called my-black-theme
  • By default this theme will be extending from the ext-theme-classic theme. We don't want that theme but rather want to extend the more modern ext-theme-neptune theme.
  • Edit the /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/packages/my-black-theme/package.json file and change the following:
"extend": "ext-theme-classic"


"extend": "ext-theme-neptune"
  • Refresh your app:
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/
sencha app refresh
  • Create the following file /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/packages/my-black-theme/sass/var/Component.scss.
  • We will specify the following variables to override the default standard theme values:
$base-color: #252424 !default;
$panel-header-color: #ef0c0c !default;
$tab-color-active: #ef0c0c !default;
  • Build the package with this detail
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/packages/my-black-theme/
sencha package build
  • Modify the Login Page app to use this new theme. Edit the /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/.sencha/app/sencha.cfg file to have the following
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
vi .sencha/app/sencha.cfg
#Then edit the file to have the following instead of ext-theme-neptune
# The name of the package containing the theme scss for the app
  • Clean up the environment
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
sencha ant clean 
  • Build the app:
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
sencha app build 
  • Clean-up after the build. Remember to replace the /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/build/production/CoovaChilli/index.html file that includes the app specific css:
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
<link rel="stylesheet" href="resources/CoovaChilli-all.css"/>
<link rel="stylesheet" href="resources/css/login.css">
<script type="text/javascript" src="app.js"></script>
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
vi ./app/view/Land.js
  • Change the following part:
       me.items    = [
                height      : 90,
                bodyStyle   :{"background-color":"#2a2a2a"},
                layout  : {
                    type    : 'hbox',
                    pack    : 'center'
                items   : { xtype: 'image', src: 'resources/images/logo.png', 'height': 90 }
                height  : 75, 
                layout  : {
                    type    : 'fit'
                xtype   : 'image', 
                src     : 'resources/images/banner.png'
                layout  : {
                    type    : 'hbox',
                    align   : 'stretch'
  • Rebuild the app.
  • Clean up the environment
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
sencha ant clean 
  • Rebuild app:
cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
sencha app build 
  • Test it out:


  • Here's our new theme in action.