1. #11
    Sencha User mes-x's Avatar
    Join Date
    Mar 2010
    Posts
    27
    Vote Rating
    1
    mes-x is on a distinguished road

      0  

    Default


    Hi there,

    is it also possible, that a button outside the toolbar (in a normal panel) has no background just like it has inside of a toolbar? I mean a button with a transparent background and the background is only shown on mouse hover.

    Do u know the Microsoft Office 2007 Settings Navigation Panel? Just like that! (Maybe with a toggle button?)
    Is this possible and how??

    regards
    Manuel

  2. #12
    Sencha User
    Join Date
    Feb 2008
    Posts
    36
    Vote Rating
    0
    johnrembo is on a distinguished road

      0  

    Default


    to sum up:
    animal's suggestion (link in authors post) ignores hover effect.

    below is a fix for Ext 3.x with hover effect
    PHP Code:
    .x-toolbar .x-btn-tl,.x-toolbar .x-btn-tr,.x-toolbar .x-btn-tc,.x-toolbar .x-btn-ml,.x-toolbar .x-btn-mr,.x-toolbar .x-btn-mc,.x-toolbar .x-btn-bl,.x-toolbar .x-btn-br,.x-toolbar .x-btn-bc {
        
    background-image:url(/ext/resources/images/default/button/btn.gif);
    }

    .
    x-toolbar .x-btn-tl{
            
    background-position0 0;
    }
    .
    x-toolbar .x-btn-tr{
            
    background-position: -3px 0;
    }
    .
    x-toolbar .x-btn-tc{
            
    background-position-6px;
    }

    .
    x-toolbar .x-btn-ml{
            
    background-position0px -24px;
    }
    .
    x-toolbar .x-btn-mr{
            
    background-position: -3px -24px;
    }

    .
    x-toolbar .x-btn-mc{
            
    background-position-1096px;
    }
    .
    x-toolbar .x-btn-bl{
            
    background-position-3px;
    }
    .
    x-toolbar .x-btn-br{
            
    background-position: -3px -3px;
    }
    .
    x-toolbar .x-btn-bc{
            
    background-position-15px;


  3. #13
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    559
    Vote Rating
    29
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    This works for me on ext 3.0.3 for the "optional" behavior:
    Code:
    /* Apply class "x-toolbar-standardbutton" to buttons on a toolbar
     * to make them appear with "normal" button styling, instead of toolbar button styling */
    .x-toolbar .x-toolbar-standardbutton .x-btn-tl { background-position: 0 0; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-tr { background-position: -3px 0; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-tc { background-position: 0 -6px; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-ml { background-position: 0px -24px; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-mr { background-position: -3px -24px; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-mc { background-position: 0 -1096px; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-bl { background-position: 0 -3px; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-br { background-position: -3px -3px; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-bc { background-position: 0 -15px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-tl{ background-position: -6px 0; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-tr { background-position: -9px 0; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-tc { background-position: 0 -9px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-ml { background-position: -6px -24px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-mr { background-position: -9px -24px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-mc { background-position: 0 -2168px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-bl { background-position: -6px -3px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-br { background-position: -9px -3px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-bc { background-position: 0 -18px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-tl, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-tl, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-tl { background-position: -12px 0; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-tr, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-tr, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-tr { background-position: -15px 0; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-tc, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-tc, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-tc { background-position: 0 -12px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-ml, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-ml, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-ml { background-position: -12px -24px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-mr, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-mr, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-mr { background-position: -15px -24px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-mc, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-mc, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-mc { background-position: 0 -3240px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-bl, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-bl, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-bl { background-position: -12px -3px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-br, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-br, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-br { background-position: -15px -3px; }
    .x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-bc, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-bc, 
    .x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-bc { background-position: 0 -21px; }
    Last edited by joeri; 8 Apr 2010 at 6:09 AM. Reason: x-btn-over styles were also needed

  4. #14
    Sencha User Stormseeker's Avatar
    Join Date
    Jan 2010
    Location
    Evanston, Illinois
    Posts
    55
    Vote Rating
    1
    Stormseeker is on a distinguished road

      0  

    Default


    Thank you so much joeri! Exactly what I needed.

    Quote Originally Posted by joeri View Post
    This works for me on ext 3.0.3 for the "optional" behavior:
    Code:
    /* Apply class "x-toolbar-standardbutton" to buttons on a toolbar
     * to make them appear with "normal" button styling, instead of toolbar button styling */

  5. #15
    Sencha User twisted_pear's Avatar
    Join Date
    Aug 2010
    Location
    North Carolina
    Posts
    23
    Vote Rating
    0
    twisted_pear is on a distinguished road

      0  

    Wink Set button spacing and min-width

    Set button spacing and min-width


    Here are just a few more lines to flush out the css fix for toolbar button style.
    1. Added some space between buttons so they don't bunch up
    2. Set a min-width so that they look like FormPanel buttons (if button name is short)

    Code:
    .x-toolbar .x-toolbar-standardbutton {  margin-right: 3px; }
    .x-toolbar .x-toolbar-standardbutton .x-btn-mc em button { margin-left:2px; margin-right:2px; min-width:40px; }

  6. #16
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default


    Any fixes around for the 4.x. line ?

  7. #17
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Question


    Need this for Ext 4 too ... any ideas or suggestions?

  8. #18
    Sencha User
    Join Date
    Jul 2011
    Posts
    4
    Vote Rating
    0
    lanevska is on a distinguished road

      0  

    Default


    Do you have any suggestions for the version 4.x?

  9. #19
    Sencha User
    Join Date
    Mar 2008
    Posts
    126
    Vote Rating
    3
    nicholasnet is on a distinguished road

      0  

    Default


    This should do for 4.0.7. Not sure about 4.1 line though
    PHP Code:
    .x-btn-default-toolbar-small
    {
        
    border-color#B0CCF2;
        
    background-color#d5dfeb;


  10. #20
    Touch Premium Member liuxing_sc's Avatar
    Join Date
    Aug 2011
    Location
    China
    Posts
    38
    Vote Rating
    0
    liuxing_sc is on a distinguished road

      0  

    Default


    unfortunately, this does not work under IE for 4.1 x , god, to fix this cost so much!!!