PDA

View Full Version : White square on buttons instead of icons with a custom SASS theme



Chirieac
13 Jun 2011, 12:34 PM
Hi!

I've created a custom theme using SASS & Compass.
I've added @include pictos-iconmask('search'); in it to load the search icon to use it on a toolbar button.
The problem is that instead of the search icon I get just a white square.

If I load the Sencha Touch default theme css the icon is showing, but with my theme it's not.

What could be the problem?

Note that I've followed this tutorial to make my custom theme: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/

davidkaneda
13 Jun 2011, 3:49 PM
Do you get any error when you compile?

Chirieac
13 Jun 2011, 6:13 PM
Do you get any error when you compile?
No, I don't get any errors!

davidkaneda
14 Jun 2011, 10:54 AM
Very odd. Are you sure the iconCls is named appropriately in the JS?

Chirieac
14 Jun 2011, 3:14 PM
This is the button:

itemId: 'backBtn',
xtype: 'button',
iconCls: 'search',
iconMask: true,and in my scss I have this:

@include pictos-iconmask('search');With my custom theme I have this in css for the button image:

.x-tab img.search, .x-button img.x-icon-mask.search {
-webkit-mask-image: theme_image("default", "pictos/search.png");
}With the default Sencha Touch theme the theme_image path is a base64 image.
It seems the icon it's not embedding in CSS and I don't know why.

Chirieac
14 Jun 2011, 3:34 PM
Thanks for replying, David!

The problem was that the path to the Sencha Touch theme was incorrect :-|


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

I've adjusted the code above to point to the right place and now it's working.

It could be nice if compass could trigger an error if the paths are not correct.

Chirieac
14 Jun 2011, 3:58 PM
One more thing, David. In your blog article (An Introduction to Theming Sencha Touch) you have something like this

images_dir = File.join(sass_path, "..", "img")
and I need to write it like this, without the sass_path

images_dir = File.join("..", "img")
With sass_path in there, the path to an image was added 2 times, like this:

d:/project/res/scss/d:/project/res/scss/../images/image.png

davidkaneda
21 Jun 2011, 2:29 PM
Good to know, thanks Guessing this might be a Ruby/Windows thing...

tmort
8 Sep 2011, 6:51 AM
I'm having the same issue with the image_dir, only I'm getting an error:


Compass::Error on line 59 of /Library/Ruby/Gems/1.8/gems/compass-0.11.5/lib/compass/sass_extensions/functions/inline_image.rb: File not found or cannot be read: /Users/Tom/work/wp-content/themes/sencha/resources/scss/Users/Tom/work/wp-content/themes/sencha/resources/scss/../images/icons/directory.png
Run with --trace to see the full backtrace


As you can see, its repeating the path for some reason. Here is my config.rb. Everything else points fine, the image_dir is the only issue.


# 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, "..", "images")

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

# Specify the output style/environment
output_style = :compressed #use :expanded to show inline whats going on with the CSS
environment = :production



I've tried changing the image path (removing the sass_path, changing the filename, etc) and nothing ever changes, I always get the same error.

Here's my scss code in case that will help:


@mixin custom-iconmask($name) {
.x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
-webkit-mask-image: inline-image('/icons/' + $name + '.png');
}
}


@include custom-iconmask('architect');




Any ideas why the error is popping up?

tmort
8 Sep 2011, 7:09 AM
Figured it out! For anyone having the same issue I needed to restart terminal in order for the config.rb changes to take effect. Same thing as Chirieac (http://www.sencha.com/forum/member.php?279013-Chirieac) solved my problem - remove the sass_path.

Hope this helps anyone else running into this issue.

bastard
9 Sep 2011, 2:22 PM
Same problem and same solution as Chirieac (http://www.sencha.com/forum/member.php?279013-Chirieac). I am using a Mac so it should not be a windows problem.