Results 1 to 7 of 7

Thread: Overriding toolbar text color in scss

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium User
    Join Date
    Apr 2014
    Posts
    8

    Default Overriding toolbar text color in scss

    In my theme within architect, I have added an scss so that I could override some styles within a few of the toolbars I have. In particular I am trying to override the font color for the toolbar.

    Here is what I have added that doesn't seem to work:

    @include extjs-toolbar-ui(
    $ui: 'myfooter',
    $text-color: #157fcc,
    $background-color: #f78119
    );

    The background changes, but not the font color for the text items on the tool bar. I tried the following but get a compile error:

    @include extjs-toolbar-ui(
    $ui: 'myfooter',
    $toolbar-text-color: #157fcc,
    $background-color: #f78119
    );

    I can change to the toolbar-text-color at the theme level and all the text colors change, but I do not want the change on all of the toolbars.

    Am I setting the wrong variable in the scss where I do the override? Any help would be appreciated.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    304

    Default

    Hi,

    There is no $toolbar-text-color variable in the toolbar ui mixin, so you should use $text-color.

    Just wondering, how are you inserting text into the toolbar? Since toolbar does not have text property, are you just using html property for this instead?

  3. #3
    Sencha Premium User
    Join Date
    Apr 2014
    Posts
    8

    Default

    I am using a tbtext. What property would I set in the scss to change the color of the text for it? I tried using the $text-color but that did not seem to work. Here are the items I have on the toolbar:

    items: [
    {
    xtype: 'tbfill'
    },
    {
    xtype: 'image',
    src: 'resources/icons/graybox.png'
    },
    {
    xtype: 'tbtext',
    text: 'Alerts'
    }
    ],

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    304

    Default

    That should work correctly. It seems that this might be a bug in ExtJS, with mixin not working correctly with fonts (it seems font-size and font-face properties also have no effect). I will forward this to Ext team to investigate.

    In the meantime, the easiest way to accomplish what you're trying to do is to create a custom class for the specific toolbar in question and add rules to style the font, or add a few rules with the ui class as selector. For example, if your UI name is 'hello' the generated ui class should be 'x-toolbar-hello'. So you can add a line in your scss like this

    Code:
    .x-toolbar-hello .x-toolbar-text {
      color: red;
    }

  5. #5
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    769

    Default

    Any progress on this problem? Basically when I change color by $toolbar-text-color everything is fine, however when I try change anything with text- prefix nothing change. Horizontal / vertical spacing works well too.

    Code:
    @include extjs-toolbar-ui (
      $ui: 'main-toolbar',
    
      $background-color: $base-color,
    
      $vertical-spacing: 0,
      $horizontal-spacing: 0,
    
      $border-color: transparent,
    
      $text-color: #ffffff,
      $text-font-size: 24px,
      $text-font-weight: 300,
      $text-line-height: 64px
    );

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2013
    Posts
    16

    Default

    I am running into the same bug. It seems to me that this is sort of a big deal as we have to write 2 sets of rules for our toolbar ui's in order to work around this, one to define the ui, and then a hard coded selector with the font rules. This bug has been around for at least a year and a half and was ported from ExtJS 5 to 6. It would be nice to get an update on this one.

  7. #7
    Sencha User
    Join Date
    May 2010
    Location
    Rocket City, USA
    Posts
    2

    Default

    I just spent quite a while reading about/learning the theming system, and I've run into this almost immediately.

Tags for this Thread

Posting Permissions

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