PDA

View Full Version : How to change pictos background color?



dark_night
28 Nov 2011, 2:01 AM
I finally managed to get pictos icons shown in my application but I wonder how to change the background of the icons. It is always white. Do I have to define a mixin to combine the pictos with a background-colour?

Also I have problems with some pictos (e.a. "check1" and "check2") that appear only as a blank white icon.

AndreaCammarata
28 Nov 2011, 2:12 AM
About the "check1" and "check2" icons:
Those icons are not included by default in the Sencha Touch theme.
You should include them manually using SASS:



@include pictos-iconmask(check1);
@include pictos-iconmask(check2);


About the mask color, you could change the mixing



@mixin pictos-iconmask


to add your wanted background color.

dark_night
28 Nov 2011, 2:53 AM
Thanks for the quick answer.

I just added the check-icons manually with sass and they appear in the resulting scss like other manually included icons. When I change the buttons iconCls to another pictos-icon taht icon will be shown so the error can't be in the button definition.

About the mixin:
What property do I have to set? I just tried "background-color":

@mixin colored-pictos-iconmask($name, $color) {
.x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
-webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png");
background-color:$color;
}
}
}

dark_night
4 Jan 2012, 1:08 AM
While taking a look at the kitchen sink examples to resolve another problem I noticed that I has mistaken ToolBar with TabBar. The difference of displaying images is shown in the image example. I always thought a ToolBar was used when I saw usage of pictos images in other projects so I only looked at the declaration of the images.