I am currently working on a Sencha application and now wish to do some styling /theming… To begin with I watched nelstrom’s tutorial. I then began my attempt at the same, placing a styles folder at root, adding config.rb and a default-theme.scss file. Theming involves getting your hands dirty with Ruby Gems again, as compass is a Ruby Gem.
So to compile with compass I required the compass ruby gem. I installed this by executing the following in a terminal window:
$ sudo gem install compass
This gave the following output:
Fetching: sass-3.1.18.gem (100%)
Fetching: chunky_png-1.2.5.gem (100%)
Fetching: fssm-0.2.9.gem (100%)
Fetching: compass-0.12.1.gem (100%)
Successfully installed sass-3.1.18
Successfully installed chunky_png-1.2.5
Successfully installed fssm-0.2.9
Successfully installed compass-0.12.1
To confirm you have the gem installed execute the following
$ gem list
This gives a list of gems installed, and compass is included.
*** LOCAL GEMS ***
chunky_png (1.2.5)
compass (0.12.1)
foreman (0.26.1)
fssm (0.2.9)
sass (3.1.18)
term-ansicolor (1.0.7)
thor (0.14.6)
That’s it… hopefully.
With compass installed I could then compile my default-theme.scss file by using the command $ compass compile, whilst in the styles directory. This produces the default-theme.css file, which you must place a reference to in your index.html file:
<link rel="stylesheet" href="default-theme.css" type="text/css">
The styling I wanted to achieve was fairly simple. I wanted the main colour for toolbars, etc. to be black and the secondary colour a shade of orange. I also wanted to reduce some of the text size for certain classes.I managed to do all this with the following .scss file:
$base-color:#000;
$active-color:#FF8700;
$base-gradient: 'glossy';
@import ‘sencha-touch/default/all’;
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
//@include sencha-picker;
//@include sencha-tabs;
@include sencha-toolbar;
//@include sencha-toolbar-forms;
//@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
//@include sencha-carousel;
//@include sencha-form;
//@include sencha-msgbox;
.question {font-weight:bold;font-size:0.75em;};
.answer {font-size:0.75em;};
so black toolbars, etc. can be achieved with $base-color:#000;, secondary color as orange;$active-color:#FF8700; buttons with a glossy feel instead of the default matte; $base-gradient: ‘glossy’;. for shrinking down text size I’ve yet to find how to do this globally but using custom classes works by putting css direct into the .scss file, (styling for .question and .answer). You may have noticed, I am reducing the .css file by excluding many of the default @includes for the .scss file.
The only other issue was styling a button (xtype:button). I could not see how to apply styling globally to buttons, so used the style property for the button in the javascript:
items: [{
xtype: 'button',
text: 'Show me where this is',
align: 'right',
docked:'bottom',
style: 'background: #FF8700',
go:'mapOneMarkerCard',
cardTitle: Poi.app.selectedMarker['title']
}]
This is messy as I’m not including all the styling in the css but will do for now.
Alex Graham 