O'Reilly logo

Learning Ext JS 4 by Armando Gonzalez, Crysfel Villa

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required