1. #1
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Antioch, IL
    Vote Rating
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice


    Default Slickness theme for 3.0

    In searching the forums, I noticed that there are only a handful of 3.0 themes. I had previously been using the Slickness theme on v2.2.1, and after upgrading to 3.0 I've noticed that (for the most part) the slickness theme still works great!

    I did need a handful of CSS overrides to smooth the theme for 3.0, so I wanted to share them in case anyone else was interested in using the Slickness theme. My changes also add some custom highlight colors, but those are easily changed:

     * Ext JS Library 3.0.0
     * Copyright(c) 2006-2009 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     * xtheme-symphony skin
     * Created by Arthur Kay
     * http://www.akawebdesign.com
     * The idea is to use these custom styles to override the some elements of the
     * Slickness theme (v2.2). While originally designed for Ext2.0, the Slickness
     * theme renders surprisingly well in v3.0.
    .x-grid3-row-alt{ background-color:#cec; }
    .x-grid3-row-selected {
    	background-color: #fdddaa !important;
    	background-image: none;
    .x-tree-node .x-tree-node-over { background-color: #cec; }
    .x-tree-node .x-tree-selected {	background-color: #fdddaa; }
     * The text on the bottom toolbars was black, which blended with the black background.
    .x-toolbar { color: #eeeef0; }
     * Forms have a white-ish background. The labels were also white.
    .x-form { background-color: #222; }
     * White text on button mouseovers was hard to read as background was a light blue.
    .x-toolbar .x-btn-over button { color: #000; }
     * On Ext.menu.Menu(), the mouse-over image and border don't look good.
    .x-menu-item-active {
        background-image: none;
        background-color: #3f3f3f;
    .x-menu-item-active a.x-menu-item {
        border-style: none;
        border-width: 0;
    Screen-shot of a grid attached below.
    Attached Images