0

i am currently styling my extjs application and want to change the header size of my title bars in my Application..

i am using the neptune theme as a base... i found out that their height is 36 px.. still when i just overwrite the class of the panel header or something like that the content is not positioned correct because there is also a absolute positioning with top 36px..

so before i do start hacking around here.. i am questioning myself if there is a proper way to do this? I tried to search for a specific sass variable or something though i didnt find anything..

Please help me out! If you need more information dont hesitate to ask.

JuHwon
  • 2,033
  • 2
  • 34
  • 54

1 Answers1

2

The height of the header is 36px because of the padding, which is set with the SASS variable $panel-header-padding, which defaults to 9px 9px 10px in Neptune (defined in sass/var/panel/Panel.scss). If you set this variable to something else, you should be able to control the height of your panel header.

kevhender
  • 4,285
  • 1
  • 13
  • 16
  • i am aware of the $panel-header-padding variable. though i also want to increase the fontsize in the header. So if a am increasing the padding i assume i am not increasing the size of the content placeholder?!?? do i ? – JuHwon Jun 19 '13 at 07:31
  • You can change the font size by changing the `$panel-header-font-size` variable, which defaults to `$font-size`, which defaults to `13px`. You cannot directly change the container size, but using these 2 variables should be able to give you the sizing you are looking for. – kevhender Jun 19 '13 at 11:35
  • i've already tried this... but this is not what i am looking for cuz its cropping my font... !http://i.imgur.com/ZHdxtSy.png! – JuHwon Jun 19 '13 at 14:18
  • Ah, I see. Then you will also want to change `$panel-header-line-height` to be something bigger than your font size. HTH. – kevhender Jun 19 '13 at 15:33
  • Is there somewhere a doku where i can find all these variables? – JuHwon Jun 19 '13 at 16:47
  • 1
    They are available under the "CSS Variables" section of the docs: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel Although I sometimes find it easier to look at the files themselves, under `ext\packages\[theme]\sass\var\Panel.scss` – kevhender Jun 19 '13 at 18:35