[CLOSED] Change TreePanel background color and toolbar color

  1. #1

    [CLOSED] Change TreePanel background color and toolbar color

    I want to change the color of TreePanel's body and toolbar to a light shade of gray. It seems like my css styles are not sticking.

    <html>
    <head id="Head1" runat="server">
        <style type="text/css">
            .my-tree 
            {
                margin:20px;
            }
         
            .my-tree .x-panel-body 
            {
                background-color: #f5f5f5 !important;    
                border: 0pt none;
            }
            
            .my-tree .x-toolbar 
            {
                background-image: none !important;
                background-color: #f5f5f5 !important;    
                border:0pt none;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
    
    
        <ext:TreePanel ID="TreePanel1" runat="server" Cls="my-tree" Width="500" Height="400" UseArrows="true">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Icon="Add" Text="Button">
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Root>
                <ext:Node Text="Root" Expanded="true">
                    <Children>
                        <ext:Node Text="Child1" Leaf="true">
                        </ext:Node>
                    </Children>
                </ext:Node>
            </Root>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 07, 2012 at 7:44 PM. Reason: [CLOSED]
  2. #2
    Hi @jchau,

    For me I see that the background color is applied for the Toolbar and a piece of the TreePanel where no nodes.

    Please clarify are you not getting the same?

    To colorize nodes as well i used the following rule.

    .my-tree .x-grid-row .x-grid-cell {
        background-color: #f5f5f5 !important; 
    }
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @jchau,

    For me I see that the background color is applied for the Toolbar and a piece of the TreePanel where no nodes.

    Please clarify are you not getting the same?

    To colorize nodes as well i used the following rule.

    .my-tree .x-grid-row .x-grid-cell {
        background-color: #f5f5f5 !important; 
    }
    Setting cell color like that removes the hover and selected effects. The toolbar is working correctly, sorry for the confusion.
  4. #4
    Hello!

    You have to add rules for these effects:

    .my-tree .x-grid-row .x-grid-cell {
    	background-color: #f5f5f5 !important;
    }
    
    .my-tree .x-grid-row-over .x-grid-cell {
    	background-color: #FFF !important;
    }
    
    .my-tree .x-grid-row-selected .x-grid-cell {
    	background-color: #ff7f50 !important;
    }
  5. #5
    Yes, this rule:
    .my-tree .x-grid-row .x-grid-cell {
        background-color: #f5f5f5 !important;
    }
    is stronger than the default over and selected ones:
    .x-grid-row-over .x-grid-cell, .x-grid-row-over .x-grid-rowwrap-div {
        background-color: #EFEFEF;
        border-color: #DDDDDD;
    }
    
    .x-grid-row-selected .x-grid-cell, .x-grid-row-selected .x-grid-rowwrap-div, .x-grid-row-selected .x-grid-cell-rowbody {
        background-color: #E0E0E0 !important;
    }
    Removing "!important":
    .my-tree .x-grid-row .x-grid-cell {
        background-color: #f5f5f5;
    }
    will allow the default selected rule to affect. But, anyway, you will need to set up the over rule.
  6. #6
    thanks, that worked!

Similar Threads

  1. [CLOSED] Change background color of Toolbar
    By trieu.tran in forum 1.x Premium Help
    Replies: 1
    Last Post: Jun 06, 2012, 11:56 AM
  2. Changing TreePanel background color
    By wexman in forum 1.x Help
    Replies: 3
    Last Post: Apr 06, 2011, 3:35 PM
  3. [CLOSED] Background color toolbar
    By 78fede78 in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 14, 2011, 12:33 PM
  4. Replies: 12
    Last Post: Jun 17, 2009, 1:07 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 4:55 PM

Posting Permissions