3 Jan 2013 2:30 PM #1
A Simple Themeing Question
I'm just starting to play around with generating a theme for my Ext JS 4.1 (4.2) application. What I want to have as my theme is basically the gray theme, with some customizations. I managed to get this working by moving some image directories around, but when I upgraded to the latest Sencha Cmd (3.0.2) I see to only be able to get the 'default' (or 'theme') images (i.e. the blue ones). Can someone spell out the process by which I can create and use a custom theme in my application which is based on the gray theme?
My initial attempt was to create an app.scss file which sort of looked like this:
$theme-name: 'gray'; $base-color: #ccc; //panel $panel-header-background-gradient: color-stops(#F0F0F0, #D7D7D7); $panel-border-color: #D0D0D0; $panel-header-color: #333; ... etc, making some tweaks to some of the variables to suit our desired look ... @import 'compass'; @import 'ext4/default/all'; /* added some additional CSS styles here */
I noticed after one of my 'builds' that the theme name was changed from "$theme-name: 'gray'" to "$theme-name: 'theme'". I had used the 'gray' name to pick up the gray images (at least that seemed to work).
5 Jan 2013 7:52 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
Did you follow the Cmd theme guide? http://docs.sencha.com/ext-js/4-1/#!.../command_theme It will have some changes as mentioned by Don but for 4.1.3 that guide worked pretty well for me: http://www.sencha.com/forum/showthre...s-in-Cmd-3.0.2Mitchell Simoens @LikelyMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
5 Jan 2013 8:05 AM #3
I thought I was following the process described in the guide, but it's possible that I missed something. The problem I'm having is that it seems that no matter what I try I can't get rid of the 'default' images. When I run the build from sencha cmd, it seems that it is hardwired to always copy images from the 'default' theme which isn't what I want. However, it is entirely possible that I'm just doing something stupid.
7 Jan 2013 11:49 AM #4
I've gone over the documentation and there is still something which isn't clear to me. My application will only need one theme, so it doesn't seem like I should have to generate a second theme. However, the look I want for my application is based on the gray theme, not the blue 'default' theme. What is the recommended way to build a theme based on something other than the default?
My biggest question concerns the way the images are dealt with. The build process always copies the Sencha images from the 'default' images directory, which means the blue images. If I want the gray, am I supposed to copy the gray images into my own 'resources/images' directory before building the theme? I could solve this problem by just copying the gray images into the 'default' directory, but that seems heavy handed.
I guess my question could be rephrased, what is the proper way to customize an existing Sencha theme that isn't the default theme?
8 Jan 2013 8:59 AM #5
+1 from me.
I also would like to know how to remove default theme from my project and instead use gray theme or some custom build theme.
It is possible with current version of CMD Tool (22.214.171.1248)?
18 Jan 2013 5:51 AM #6
8 Mar 2013 1:01 PM #7