1. #11
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    111
    Answers
    1
    Vote Rating
    -1
    predator has a little shameless behaviour in the past

      0  

    Default


    When you create new style declarations add !important after each css property:

    .custom {
    font-size: 12px !important;
    }

    Then in in your ext component add 'custom' to your 'cls' config property.

    then the .custom class will be appended to the rest of the component css classes.. !important is needed because the css property font-size is most likely defined in the other css declaration (x-button in your example) and this tells the browser that this is what you want to take over any other declarations. In other words it increases the weight of your declaration.

  2. #12
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    Thanks for the suggestion!

    I don't want to keep asking questions, but what's the point of creating a custom UI class if you can't use it without removing existing ST styles?

    In theory I should be able to use:

    ui: 'confirm', ui: 'decline' or a custom ui: 'myOwnCreation'

    I'm fine with using a general css class, but I guess I want to use it the way (I'm assuming) it's meant to be used. 'Best practices' and all.

    Thanks!

  3. #13
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    111
    Answers
    1
    Vote Rating
    -1
    predator has a little shameless behaviour in the past

      0  

    Default


    try putting your custom class in the 'cls' proeperty not in the ui.

    it will look something like this

    PHP Code:
    Ext.define('myApp.view.ui.MapButton', {    
    extend'Ext.Button',
        
    config: {
            
    cls'custom',
            
    itemId'map',
            
    ui'round',
            
    text'Map'
        
    }
    }); 

  4. #14
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    Yeah that's no problem getting it to work using cls: 'whateverClass' but I was just wondering why be able to make a custom UI when it doesn't override the default styles?

  5. #15
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    111
    Answers
    1
    Vote Rating
    -1
    predator has a little shameless behaviour in the past

      0  

    Default


    I lost you dude... sorry.

  6. #16
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    Haha! It's cool. The curiosity has just been killing me :/

    Thanks for helping out though

  7. #17
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    125
    Answers
    1
    Vote Rating
    0
    JavascriptParrot is on a distinguished road

      0  

    Question


    I have the same problem, I want to change the font-size, the background and the line-height for a specified titlebar. I set a baseCls for the titlebar, the background color works but the line-height and font-size are override by x-title class. So how can I do this? I don't want to change the x-title class...

    Thanks!

  8. #18
    Sencha User
    Join Date
    Nov 2012
    Posts
    4
    Vote Rating
    0
    tcab is on a distinguished road

      0  

    Default Harder than it looks

    Harder than it looks


    I too am having trouble changing e.g. the font colour, background, padding etc. of a button. The built in sencha css usually takes precedence. I am using the cls property. Not having much luck with adding !important.

    Short of creating a new theme, are there any proper tutorials and tips on how to apply custom styles to e.g. buttons without constantly colliding with sencha styles and never quite knowing what is going to work?

    Also I am getting effects where Sencha Architect might display some css changes correctly but an actual browser doesn't.