Thank you for purchasing the Clifton theme from Newbridge Green. Please get in touch at any time for support, questions or just to say hi!
Email: support@newbridgegreen.com
Twitter: @newbridgegreen
Integrating this theme with your project is easy just do the following.
public/resources folder.<link rel="stylesheet" type="text/css" href="resources/css/clifton.css" />.Now your ExtJS application should be using the new Clifton theme.
Look at index.html in the root of this project for an example of how to integrate the theme.
Please email support@newbridgegreen.com with any integration issues
If you are planning on customising this theme, you should have a basic understanding of how theming works within ExtJS.
If you do not, please read the ExtJS 4 Theming guide and understand how to customise a theme before you attempt any modifications.
Once you have installed the custom theme requirements and the Sencha SDK. You can setup ExtJS 4 in the root directory of this project.
If you already have the ExtJS 4 framework installed on your machine, symlink to it in the root of this project.
ln -s [Path to ExtJS] extjs
Copy the ExtJS 4 framework into the root folder of this project
Now you should be ready to recompile this theme.
You can change basic properties of this theme by altering any of the files in the themes/stylesheets/clifton/default/variables folder. Each file gives you a basic set of variables to alter things like font size, colour, borders etc for each of the major components.
cd [ROOT]/sass
compass compile
To watch for changes on the files rather than recompiling after changes, use this.
compass watch
If you make changes to the colour scheme, you will need to reslice the theme in order to support all the browsers out there that we wish didn't exist anymore.
cd [ROOT]/sass
sencha slice theme -d ../extjs -c ../css/clifton.css -o ../themes/images/default/ -v
This will slice up your lovely new CSS3 based theme into nice little images for older browsers.
Copy any new icons to the folder themes/images/default/icon then run this to generate a new _icons.scss file
cd [ROOT]/sass
compass sprite --force "icon/*.png
compass compile
This will recompile the theme to create the sprite file with the new icons. Use the @include icon-sprite([filename]) mixin to include any new icons in this theme.
This is a table of the included icons. You can use these in the iconCls property of your projects components.
| class | icon |
|---|---|
| icon-down |  |
| icon-edit |  |
| icon-save |  |
| icon-eject |  |
| icon-maximize |  |
| icon-email |  |
| icon-minimize |  |
| icon-mobile |  |
| icon-add |  |
| icon-next |  |
| icon-search |  |
| icon-end |  |
| icon-bar-chart |  |
| icon-pause |  |
| icon-phone |  |
| icon-calendar |  |
| icon-expand |  |
| icon-cancel |  |
| icon-fastforward |  |
| icon-fax |  |
| icon-start |  |
| icon-gauge |  |
| icon-prev |  |
| icon-close |  |
| icon-gear |  |
| icon-print |  |
| icon-stop |  |
| icon-code |  |
| icon-help |  |
| icon-tag |  |
| icon-collapse |  |
| icon-task |  |
| icon-company |  |
| icon-incidents |  |
| icon-time |  |
| icon-contract |  |
| icon-record |  |
| icon-refresh |  |
| icon-date |  |
| icon-up |  |
| icon-restore |  |
| icon-left |  |
| icon-rewind |  |
| icon-line-chart |  |
| icon-warning |  |
| icon-list |  |
| icon-right |  |
| icon-delete |  |
| icon-rss |  |
| icon-logout |  |
