View Full Version : Custom SASS build file breaks back button UI

5 Feb 2011, 6:25 AM
Hello Community,
This is my first post in this lovely forum, so here it is:

I have tried to create my own SASS file according to Sencha post (http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch). I have all the things (Compass, ruby, etc..) installed properly and I was able to compile my own application.css file. I have created the application.scss (exactly the same as in the link). However when I use application.css file in my app the back button UI is destructed. The part that is broken is the "<" part of the button.
I followed the guide exactly, am I missing something? is it a known bug? if so how to handle this situation properly?
Thank you in advance for your time and help

10 Feb 2011, 11:07 AM
Could you post your application.scss?

10 Feb 2011, 12:15 PM
I have also experienced this same issues, I assumed I was doing something incorrect.

11 Feb 2011, 3:17 AM
Here is the .scss file I have used.
Its the same as in original sencha post but with redirection to sencha touch 1.0.1a folder.

11 Feb 2011, 10:26 AM
Sorry, but I meant could you post with the stylesheet your using, so I can see how you're generating the button UIs, etc.-

15 Feb 2011, 5:44 AM
Here is the application.css file created and config.rb used.
I do not add the actual usage of this as it simple panel containing dockedItem of toolbar with button 'back'

15 Feb 2011, 1:36 PM
Sorry, still looking for the application.scss file-

18 Feb 2011, 12:45 PM
Same problem here, the back button looks strange after theming our application.

I attached the application.scss.

28 Feb 2011, 2:42 AM
I'm also having this problem and my stylesheet is very very basic at the moment.

@import '..\themes\stylesheets\sencha-touch\default\all';

$include-default-icons: false;
//$include-button-uis: false;

@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-loading-spinner;

2 Mar 2011, 1:11 AM
I found a solution, but it's not really a good solution.

In your compiled CSS, replace the following lines:

1. search for .x-anchor and replace the rule for -webkit-mask with:

-webkit-mask:0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAPCAYAAABut3YUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPZJREFUeNpi/PX7LwOFwAyIG6HseiA+Ra5BjBQ6xg+IVwAxJ5T/HYgjgHgTOYYxUeCQUiBeh+QQBih7HVSOLiHDDMSTgTiTgLrpQJwLxH9p5RhOaLT4EakeFF3RQPyF2o6RhkaBGYkheRmIPYH4KbXSjC4QnyTDIch6danhGCcgPgwNGXKBNNQMb0ocEwXE24GYn4FyADJjI76Ej88x7UC8FIjZGKgHQDlxGtRsZmISMMjy+dBQoSXYBC0gv+NyDD80xzgx0AeAqg4fIH6NHk0qQHyMjg6B1WvHYDkNFjIgwS1ALMowMOAjEAeBHINe2Q0U+AUQYACQ10C2QNhRogAAAABJRU5ErkJggg==') no-repeat;2. search for .x-button-forward:before and replace the rule for -webkit-mask with:

-webkit-mask:.145em 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=') no-repeat;3. search again for .x-button-forward:before, you'll find a rule alone, and replace the rule for -webkit-mask with:

-webkit-mask:-0.145em 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXlJREFUaN7lmTFqAlEQhh8EhFSCYJXW1law9QAewMrWAwQWAmmtbPcGHiCQ1gPYCla2QsDKSsgmQecvFqImu2/fzry/2OLb9mt23vwz47Kvn5MwEFxM8DkLB6HHEIOd0GGIwUpoMcRgyRKDOUsMJizxpzBiiMFR6DPEeZl1GWKwFh4ZYvAmPDDEqmVWVQxmLPG3MGaIVcosVAz2whNDDDZCmyEG7yFlpiEGKUsMEpb4XKXMtMXeiVVb7J1YLcRgW1ZmVuLSxGopLkys1mLwwhL/mVhjie8Sayxx3kp7DPFVYo0tzhNriyEGU5Z40TjxtDE/F6WcDowHBE/msDFNImG0xZQRBAonDCvxhhH2vKZIZ9Ds+7EDfaWFnKZ4xhja5owxdcnYCAQv1p1Gi4sprn08cZbDt6ZYZasXIn5mLFHTjLCvVt1V+4rVt/M+4r3FPaJMbHaBKRKb3pyKxKZXtv/Er4yjZpRL6q042u34tzh4xV9H/FHnqBHKBQeEd6aqqwD6AAAAAElFTkSuQmCC') no-repeat;

This replaces the file paths to files he doesn't find with their base64 encoding.
I tried placing the files in the correct file path, but didn't find anything usefull.

8 May 2011, 4:51 AM
+1 - Cannot get the back/forward buttons to look right when trying to theme with SASS. The lack of SASS documentation, as well as the lack of responses to anything SASS certainly diminishes it's usefulness in my opinion.

8 May 2011, 1:38 PM
Chris just upgraded Compass - try getting the latest with 'sudo gem install compass' and 'sudo gem install sass' and let me know if that helps at all?

9 May 2011, 7:28 AM
David, can you provide any specifics as to how we can specify simple SASS config options in thge SCSS config file and have those changes (generally color, matte vs glossy) to the back and forward buttons so that we do not lose the pointing edges '<' '>' of the button? Right now, all I am doing is the the foilowing:

@include sencha-button-ui('black', #000000, 'glossy');

But then when using the 'ui" black', I obviously lose the pointy edges. What do I have to specify in my SCSS config files to be able to create a button UI yet keep the pointing edges of the buttons?

Thanks David, would really love to hear how to handle this.

9 May 2011, 12:55 PM
Yep, I see the issue I'll look at this for future versions of Touch, but for right now you should be able to accomplish that by styling a tooldbar instead (sencha-toolbar-ui) with very similar parameters. Only drawback is that it will style the whole toolbar-

9 May 2011, 1:08 PM
David, thanks for the reply. So you mean we have to style to whole toolbar to get a glossy button, which would also give us a glossy toolbar? Hmmm, I can already hear creative screaming about that, where the client signed off on a flat black toolbar with a glossy button. Trust me, if it were up to me, that would be a fine workaround, but clients never see it that way. So are we saying there is no way to accomplish this right now, even with directly specifying CSS styles? Like we have some clients that have a brown toolbar who want glossy blue back buttons (Pier1.com)...any way to accomplish this right now, prior to you working a fix into the core?

Thanks again for the reply David.

9 May 2011, 1:13 PM
Yeah, again, you have a good idea of how it is now, but to accomplish what you're looking for you can either:

Style the toolbar one way, using our mixins, then custom design the back button using CSS. This may be difficult because the selectors for the back button get complicated, especially since we use before/after psuedo-elements to accomplish things like the tip.

The other way would be to style using our toolbar mixin purely to get the back button styled, then go in afterward and "re-style" the toolbar. This would be a lot easier, as the toolbar is just one element (no before/afters) and you could probably just add this to your CSS:

.x-toolbar.x-toolbar-myui {
@include background-gradient(#othercolor, 'matte');

Make sense? Not that any toolbar form fields will also take the style from the mixin (and look like the back button).

9 May 2011, 1:32 PM
Cool, so is this the mixin I should first use to style the toolbar:

@mixin sencha-toolbar-ui($ui-label, $color, $gradient: $toolbar-gradient) {

$toolbar-border-color: darken($color, 50%);
$toolbar-button-color: darken($color, 10%);

.x-toolbar-#{$ui-label} {
@include background-gradient($color, $gradient);
border-color: $toolbar-border-color;

.x-toolbar-title {
@include color-by-background($color);
@include bevel-by-background($color);

.x-button, .x-field-select .x-input-text, .x-field-select:before {
@include toolbar-button($toolbar-button-color, $gradient);

Then come back and use the straight CSS toolbar-ui you have mentioned to change the background format of the toolbar itself? I'll give this a shot and let you know...thanks a ton!

19 May 2011, 3:23 PM
Thanks David, this worked great.

Question. What or where is the single best source for learning how to use SASS, along with all the possible variables, to quickly theme a Sencha Touch UI? I currently am just fumbling my way through the sencha-touch scss files and see what I can dig up. I seems like an in depth tutorial is badly needed so that I can get an overall idea of the best-practice concepts rather than hack my way through it. The goal here is to gain an in-depth knowledge of what is possible and what are the best practices to skinning each and every UI element, in whole or in part, and quickly apply to an existing Touch project...then educate Creative on the process so they can own the theming process and development can can concentrate on the core application implementation.

I think this SASS route is awesome, I just wish there was an in depth tutorial that covered all the basics as well as the hidden gems and best practices. I know you guys are swamped, but we need these types of things sooner rather than later to combat the JQM evangelists that are starting to pop up seemingly everywhere.

Thanks for your help!

22 May 2011, 11:42 AM
Hi Bucs, sorry for the delay. You may have already seen, but here are the best resources so far:

* My presentation at SenchaCon last year: http://vimeo.com/17879651
* Introductory blog post: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
* Full variables and mixins docs: http://dev.sencha.com/deploy/touch/docs/theme/

Hope that helps-

6 Feb 2012, 4:12 AM
How exactly was your ">" part broken? We have simillar issue, but the problem is that on iOS the arrow is slightly misplaced (like it should be 1px "higher" on top and bottom) - which creates an ugly "step" where the arrow is connected to the button.