CODEWITHSUNDEEP
cssextjs
richardtallent
richardtallent

Reputation: 35374

How can I get larger fonts across the board in ExtJS 4.1?

I'm by no means an old man, but I find the font sizes overall in Ext JS (using 4.1) too small.

I'd like to change the overall default font size for EVERYTHING -- titles, buttons, grids, trees, form field labels, form fields, etc. and bump it up to about 120% of the default.

What are my best options here?

Creating a custom theme seems like extreme overkill (if that would work at all).

This is my solution now, which is in my main CSS file:

div, span, p, body, a, input, textarea, label {
  font-family: Calibri, Helvetica, Arial !important;
  font-size:    14px !important;
}

However, this feels hackish, and it this does evil things to my Grid column headers and tabs (their chrome doesn't stretch properly). It also makes it harder for situation where I do occasionally want a different font.

Upvotes: 3

Views: 2716

Answers (1)

Jamie Sutherland
Jamie Sutherland

Reputation: 2790

I'm afraid the best way is to recompile the theme. That way all component will have their sizes recalculated based on your default font-size and you won't get a messed up look.

It's actually pretty easy to do. Follow the instructions here. ExtJS Theme Guide. Once you have made sure you can compile the default theme. Edit the file at themes/stylesheets/ext4/default/variables/_core.scss and on line 31, change the font-size to 14px.

Recompile.

Job done.

Upvotes: 4

Related Questions