23 Feb 2012 12:24 AM #11
When you create new style declarations add !important after each css property:
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.
23 Feb 2012 8:25 AM #12
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.
23 Feb 2012 10:27 AM #13
try putting your custom class in the 'cls' proeperty not in the ui.
it will look something like this
23 Feb 2012 11:37 AM #14
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?
23 Feb 2012 11:46 AM #15
I lost you dude... sorry.
23 Feb 2012 11:52 AM #16
Haha! It's cool. The curiosity has just been killing me :/
Thanks for helping out though
29 Feb 2012 6:36 AM #17
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...
22 Nov 2012 11:14 PM #18
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.