Changing the Mobile Login Page theme

• To change the default theme of a Sencha Touch application is very simple.
• We used the following URLs as reference to do a prove of concept:
  • http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson11/5.cfm
  • http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-2

• Change the /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli/resources/sass/app.scss file as follows:

//Add this above the imports....
$base-color: #FF0067;
$base-gradient: 'none';
$font-family: "arial";
$alert-color: #D6665A;
$confirm-color: #75A48B;
$page-bg-color: lighten(#00B1B1,15%);
$form-bg-color: $page-bg-color;

//Add this below the imports....
@include sencha-toolbar-ui('light', #B0F100, 'none');

• Rebuild the application using the Senacha command as demonstrated earlier.
• Here's the result:

* Change the /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli/resources/sass/app.scss file as follows:

//Add this above the imports....
$base-color: #2A2A2A;
$base-gradient: 'none';
$font-family: "arial";
$alert-color: #D6665A;
$confirm-color: #75A48B;
$page-bg-color: lighten(#02FDB5,15%);
$form-bg-color: $page-bg-color;

//Add this below the imports....
@include sencha-toolbar-ui('light', #F3F3F3, 'none');

• Rebuild the application using the Senacha command as demonstrated earlier.
• Here's the result: