View Full Version : Still can't get default icons in a custom theme

18 Apr 2011, 1:07 AM
Hi guys,
I read a lot of topic about how to add new icons, but I didn't find any answer to my problem.
I made a custom theme, so, here are all the files :


$body-bg-color: #fbf5e6;
$base-color: #efe1d0;
$active-color: #aa3030;

@import '../themes/stylesheets/sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-sheet;

body {
font-family: Georgia;
color: #5a3d23;

.x-toolbar .x-toolbar-title {
color: #5a3d23;


# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)

# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")

# Delinate the images directory
images_dir = File.join(sass_path, "..", "image")

# Load the sencha-touch framework
load File.join(sass_path, "..", "resources", "themes")

# Specify the output style/environment
output_style = :compressed
environment = :production

So, these files compile well, I get application.css, but I still have big squares instead of incons in my TabPanel.

I found a problem by comparison with sencha-touch.css :
.x-button img.x-icon-mask.action{-webkit-mask-image:url('data:image/png;base64,iVBORw0[...])}

And in my application.css I don't get any encoded image, just :
.x-button img.x-icon-mask.action{-webkit-mask-image:theme_image("default", "pictos/action.png")}

So I think the problem is here, but I don't know how to resolve it.

Can someone help me ?

Many thanks.

18 Apr 2011, 2:39 AM
I'm still learning ext, but this does sound like if all you styles are being rendered (hence seeing the big square, but no image) then its a path issue to your images?

18 Apr 2011, 4:54 AM
Hi isibbot,

Yes, I thought about a path issue, that's why I copied the :

lib / resources / themes / images / default

Into :

lib / resources / image

# Delinate the images directory
images_dir = File.join(sass_path, "..", "image")

Isn't this path good ?

Thank you :)