PDA

View Full Version : Beginner question re: overriding default CSS



blomasky
17 Aug 2013, 3:53 AM
I would like to change the "trigger-width" on a grid header. Some questions:

1) I see in the docs, the CSS statements start with $. i.e. $grid-header-trigger-width (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.header.Container-css_var-S-grid-header-trigger-width).
That has me a tad confused. Would my CSS statement look like this:

.mySelector {$grid-header-trigger-width: 3px;} ? If this is not right, can someone please give me an example.

2). Which CLS property on which component do I enter my CSS. (There is gridPanel, GridView, Column??) and cls, base-cls, ???

Thanks

Bruce

tobiu
17 Aug 2013, 4:22 AM
Using variables will only work in SASS, not in CSS directly.

You will find your variable here:
ext/packages/ext-theme-neutral/sass/var/grid/header/Container.scss

In case you want to work with the variables, you need to create a theme, change the variables the way you want to and then build it using Sencha CMD. sencha app build also compiles the theme using Compass (SASS -> CSS).

Take a look at:
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming

blomasky
17 Aug 2013, 4:39 AM
Thanks for the response, but this seems way too complicated (perhaps, some day when I learn SASS then it will look easier.) I was hoping I could JUST enter a line or 2 of CSS to override the way the grid heading columns are displayed. (Just like I do with other components. Is this possible?

Thanks
Bruce

tobiu
17 Aug 2013, 4:49 AM
SASS is really not that complicated. I think it takes 1-2 days to get familiar with it in a way, that you can already use it, since it just adds some goodies to CSS (like using vars, extending, mixins) which shortens the code a lot. More infos here: http://sass-lang.com/

Since SASS generates CSS, you can of course also change the look and feel with pure CSS overrides. Rightclick on your grid header in Google Chrome, inspect the element and see which CSS rules get applied. You can then override them and change them to fulfil your needs.

That using the SASS approach is the recommended way should be obvious :)

blomasky
18 Aug 2013, 5:29 PM
It "IS" on my list to learn, but first, getting better at Javascript, then trying to learn the 1000000 methods / events on each of your very robust classes. I figure in a few months, it might be nice to put that on my plate. But UNTIL THEN, can you tell me what CSS I would have to enter to override the left and right padding / margins on the grid column header?

Thank you

Bruce

tobiu
18 Aug 2013, 11:39 PM
Rightclick on your grid header in Google Chrome, inspect the element and see which CSS rules get applied.


At least this should not be difficult.

If I go to:
http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/#array-grid

and do it, I see:


.x-column-header-inner {
padding: 7px 10px 7px 10px;
text-overflow: ellipsis;
}