1. #1
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,374
    Vote Rating
    37
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default Slickness theme for 3.0

    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:

    Code:
    /*!
     * 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;
    	border-color:#ffb500;
    }
    
    .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
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group