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"
to
"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 app.theme=my-black-theme
- 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:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="resources/CoovaChilli-all.css"/>
<link rel="stylesheet" href="resources/css/login.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
- Now you may want to change the banner to promote your brand. Edit the following file:
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.
