1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    52
    Vote Rating
    2
    exo is on a distinguished road

      2  

    Default Toolbar button style

    Toolbar button style


    Myself I find the look and feel of the toolbar buttons in Exts default theme a bit lacking. From a users' point of view I don't feel it's immediately obvious for a user that the button can be clicked upon, especially when the button is just text and no icon.

    I found a suggestion by Animal here but that still didn't satisfy me. So for everyone (anyone) who feels the same way I propose a different solution, make the buttons look like the way buttons look in Ext outside of a toolbar. So instead of:
    old.jpg

    They could look like:
    new.jpg


    In order to do this use the following CSS to make all toolbar buttons this way:
    PHP Code:
    /* This gives toolbar buttons the regular button style */
    .x-toolbar .x-btn-left backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px 0px;}
    .
    x-toolbar .x-btn-center backgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -42pxtext-aligncenter;}
    .
    x-toolbar .x-btn-right backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -21px;}

    .
    x-toolbar .x-btn-over .x-btn-leftbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -63px;}
    .
    x-toolbar .x-btn-over .x-btn-centerbackgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -105px;}
    .
    x-toolbar .x-btn-over .x-btn-rightbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -84px;}

    .
    x-toolbar .x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-centerbackground-position:-126px;    }
    /* end block */ 
    OR, if you only want to apply the style on a few buttons, use 'cls: x-form-toolbar-standardButton' and use the following CSS

    PHP Code:
    /* This gives toolbar buttons with cls: x-form-toolbar-standardButton the regular button style */
    .x-toolbar .x-form-toolbar-standardButton .x-btn-left backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px 0px;}
    .
    x-toolbar .x-form-toolbar-standardButton .x-btn-center backgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -42pxtext-aligncenter;}
    .
    x-toolbar .x-form-toolbar-standardButton .x-btn-right backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -21px;}

    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-leftbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -63px;}
    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-centerbackgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -105px;}
    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-rightbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -84px;}

    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-centerbackground-position:-126px;    }
    /* end block */ 
    Maybe it can help someone .

  2. #2
    Ext User drew's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne
    Posts
    95
    Vote Rating
    0
    drew is on a distinguished road

      0  

    Default


    I don't think your attachments are rending properly
    they seem fine now.

    ...I do like the idea.
    www.firedb.com - configurable web database

    Request a demo account here - http://www.firedb.com/register.php

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    223
    Vote Rating
    0
    tof is on a distinguished road

      0  

    Default


    Sometime I need it, too; then I only do :
    PHP Code:
    Ext.Toolbar.prototype.autoCreate.cls "x-mytoolbar"
    (Not perfect, not better, just another method, HTH)
    Christophe Badoit
    aka Tof

    My work : Lesiteimmo.com - Unobstrusive ExtJs Powered !

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    324
    Vote Rating
    9
    Scorpie will become famous soon enough

      0  

    Default


    Thanks!
    I`m from Holland!

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    Pennsyvania, USA
    Posts
    232
    Vote Rating
    0
    fzammetti is on a distinguished road

      0  

    Default


    Unless I'm mistaken, this doesn't work for Ext JS 2.x... does anyone by chance have this updated for 2.x? I'm being asked to make our toolbar buttons "stand out" more, and this would be the perfect solution.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    Here is an update for Ext 3.0 that applies to all toolbar buttons

    Code:
    .x-toolbar .x-btn-tl { background-position: 0 0; }
    .x-toolbar .x-btn-tr { background-position: -3px 0; }
    .x-toolbar .x-btn-tc { background-position: 0 -6px; }
    .x-toolbar .x-btn-ml { background-position: 0 -24px; }
    .x-toolbar .x-btn-mr { background-position: -3px -24px; } 
    .x-toolbar .x-btn-mc { background-position: 0 -1096px; }
    .x-toolbar .x-btn-bl { background-position: 0 -3px; }
    .x-toolbar .x-btn-br { background-position: -3px -3px; }
    .x-toolbar .x-btn-bc { background-position: 0 -15px; }

  7. #7
    Sencha User demongloom's Avatar
    Join Date
    Apr 2008
    Location
    Israel
    Posts
    30
    Vote Rating
    3
    demongloom is on a distinguished road

      1  

    Default



    My toolbar buttons style. I slightly modified original background to make regular button be more visible as button. Before (without light border) some users acts button as piece of text.

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    demongloom, would you please post what changes you made to achieve those effects?

    Are they theme-compatible?

  9. #9
    Sencha User demongloom's Avatar
    Join Date
    Apr 2008
    Location
    Israel
    Posts
    30
    Vote Rating
    3
    demongloom is on a distinguished road

      0  

    Default


    I've modified original theme in toolbar.css

    PHP Code:
    .x-toolbar .x-btn-left{
        
    backgroundurl(../images/default/toolbar/tb-btn-normal.pngno-repeat 0 0px;
    }
    .
    x-toolbar .x-btn-right{
        
    backgroundurl(../images/default/toolbar/tb-btn-normal.pngno-repeat 0 -21px;
        
    padding-right3px;
    }
    .
    x-toolbar .x-btn-center{
        
    backgroundurl(../images/default/toolbar/tb-btn-normal.pngrepeat-x 0 -42px;
        
    padding:0 0;

    http://img26.imageshack.us/img26/6233/tbbtnnormal.png


    That's all

  10. #10
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
    xiexueze has a little shameless behaviour in the past

      0  

    Default


    thanks for demongloom's image and css code
    it works well in firefox,but in IE the png image render little ugly.