View Full Version : Back button and custom theme

10 Aug 2011, 5:01 AM
I've created a (very simple) custom theme for our application, and when applied to the toolbar it changes the style of buttons with the 'back' ui. I've seen a post on this that it is a known issue, along with a fix of styling the toolbar with a mixin. (http://www.sencha.com/forum/archive/index.php/t-123106.html?). I've tried to follow the fix in that post, however with no luck. I can get the toolbar styled with the custom theme, but no change to the button. My application.scss file is below, along with the code for the toolbar/button. Thanks in advance for any help.

// 1. Variable overrides, example:
$base-color: #374963;
$base-gradient: 'glossy';

// 2. Include Sencha Touch styles
@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-loading-spinner;
@include pictos-iconmask('wifi');
@include pictos-iconmask('list');
@include pictos-iconmask('home2');
@include pictos-iconmask('maps');

@include sencha-toolbar-ui('sub', #58710D, 'glossy');


Home = Ext.extend(Ext.Panel,{
fullscreen: true,
id: 'content',
scroll: 'vertical',

dockedItems: [
xtype: 'toolbar',
ui: 'sub',
title: 'Page Title',
items: [{
text: 'Back',
ui: 'back',
handler: function() {

items: [
xtype: 'panel',
contentEl: 'home-content'


10 Aug 2011, 5:04 AM
did you use compass to recompile the .scss, to create your new css file

10 Aug 2011, 5:14 AM
yes - compass compile application.scss

10 Aug 2011, 9:52 AM
I might be misunderstanding your issue but I think that is how sencha touch is suppose to work, when you theme the toolbar, it themes your buttons that you have on your tool bar as well to get it to match.

you can try a custom theme on your buttons by adding something like this to your scss:

.x-button-back {
background-color: #eee;

10 Aug 2011, 10:33 AM
The issue is actually that the "<" portion of the back button does not show up. It was a known issue as per the thread that I referenced above, which said to use the sencha-toolbar-ui mixin (@include sencha-toolbar-ui('sub', #58710D, 'glossy')); to apply a style to the toolbar, which would subsequently style the button as well and resolve the issue. I tried to follow that as best I could - I can get the mixin to style the toolbar, but the left end of the back button is still missing. I Hope that makes sense.

15 Aug 2011, 6:45 AM
Hey check out my post. I had a simular problem and finally figured it out. I think it is definitely a CSS conflict. In my case if I used the CSS property 'outline' anywhere in my project on any class it broke the appearance. Here is the link to my post (http://www.sencha.com/forum/showthread.php?140353-Back-and-forward-button-graphics-broken.). I hope this helps.

1 Sep 2011, 5:17 AM

.x-button-back, .x-button-back:after {
background:#ff0000 none !important;