Advanced theming

In the rest of this chapter we are going to see common situations where we need to modify the original code from the original theme. We will create new gradients, change dimensions, paddings, colors, and custom UIs.

Adding new gradients

Let's start by defining a new gradient for the toolbar component. We already have a few available styles of gradients defined in the default theme, such as matte, glossy, and bevel. We can use any of the available gradients, but most of the time these gradients are not enough or maybe we need something different.

In order to create a new gradient we need to open the file located at extjs-4.1.0/resources/themes/stylesheets/mytheme/default/mixins/_background-gradient.scss. In here we have all the available ...

Get Learning Ext JS 4 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.