Results 1 to 6 of 6

Thread: Toolbar Buttons borders and background colour issue

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default Toolbar Buttons borders and background colour issue

    When Toolbar having the Buttons, not able to set the borders and background color as per my application customization. You can see same behavior in below test case created in Sencha fiddle.
    Buttons should have a border and should have a customized background color and also retain the mouse over property.

    Can we set all Buttons in my application to same customized CSS theme? Right now I am using ExtJS 5.0.1 Classic Theme but Buttons color and layout is not intuitive. Can we set Crispy theme CSS alone to Buttons?

  2. #2


    This is the default behavior of a toolbar using classic theme. You can change it using CSS.

  3. #3


    Thanks for your reply. We used Cls and bodyCls to change the button background and to enable border. Nothing worked. Can you please let me know which CSS to be used and which Button config to be used to get the desired button behavior in toolbar?

    Also, I have a request that, is there a common CSS style to be used only to Buttons, that can reflect in my entire application?

  4. #4


    Hi Alex,

    Any update on the below request. We used cls and bodyCls properties, still its not applying the desired styles.

  5. #5


    All I did was copy the x-btn-over class, renamed it and now it shows the border all the time:

    .x-btn-awesome.x-btn-default-toolbar-small {
        border-color: #81a4d0;
        background-image: none;
        background-color: #dbeeff;
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbeeff), color-stop(48%, #d0e7ff), color-stop(52%, #bbd2f0), color-stop(100%, #bed6f5));
        background-image: -webkit-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
        background-image: -moz-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
        background-image: -o-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
        background-image: -ms-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
        background-image: linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
    Then add cls:'x-btn-awesome'

  6. #6


    Thanks Alex for quick response. I will try this solution. I feel like same approach cab be adopted to all the buttons in my application where they some buttons placed in Form, Window, Panel, Grid-Docked items panel.

Similar Threads

  1. I want add the background colour
    By Gustavo Woltmann in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 18 Feb 2016, 10:56 AM
  2. Disappear borders of buttons in toolbar
    By Le_Grand in forum Ext 5: Bugs
    Replies: 1
    Last Post: 21 Jul 2015, 5:54 AM
  3. Row background colour
    By venomizer in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 30 Jul 2009, 7:45 AM
  4. Help on background colour
    By pachaudhary in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 27 Apr 2009, 6:07 AM
  5. Background and borders issue
    By mbogdanovich in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 26 Mar 2008, 11:07 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts