[CLOSED] Change Tabpanel Header color

  1. #1

    [CLOSED] Change Tabpanel Header color

    How can I change the background color of the active panel in a tabpanel?


    in v2.5.3 I got this:
    Click image for larger version. 

Name:	imgd01.PNG 
Views:	7 
Size:	3.4 KB 
ID:	23915

    .aspx
     <ext:TabPanel 
            id="tp1"
            runat="server" 
            ActiveIndex="0"
             Cls="mtby">       
            <Items>
                <ext:Panel runat="server" Title="PlanTrabajo">
    Css File
    .mtby .x-tab-active { background-color: #f5f68f; background-image: none;}
    Html generated
    <a style="right: auto; left: 2px; top: 0px; margin: 0px;" class="x-tab x-unselectable x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active" role="button" hidefocus="on" unselectable="on" tabindex="0" id="tab-1128"><span id="tab-1128-btnWrap" class="x-tab-wrap" unselectable="on"><span id="tab-1128-btnEl" class="x-tab-button"><span id="tab-1128-btnInnerEl" class="x-tab-inner x-tab-inner-center" unselectable="on">PlanTrabajo</span><span role="img" id="tab-1128-btnIconEl" class="x-tab-icon-el  " unselectable="on" style=""></span></span></span></a>
    But in v3.1 I cannot get the same behaviour:
    Click image for larger version. 

Name:	imgd02.PNG 
Views:	3 
Size:	2.3 KB 
ID:	23917

    Html generated
    <a style="right: auto; left: 2px; top: 0px; margin: 0px;" componentid="tab-1012" 
    class="x-tab x-unselectable x-tab-active x-box-item x-tab-default x-top x-tab-top x-tab-default-top x-focus x-tab-focus x-tab-default-focus" hidefocus="on" unselectable="on" id="tab-1012" tabindex="0"><span id="tab-1012-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-tab-wrap x-tab-wrap-default "><span id="tab-1012-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-tab-button x-tab-button-default x-tab-text    x-tab-button-center "><span id="tab-1012-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="x-tab-icon-el x-tab-icon-el-default  " style=""></span><span id="tab-1012-btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-tab-inner x-tab-inner-default">PlanTrabajo</span></span></span></a>

    Thanks for your help.
    Last edited by Daniil; Apr 28, 2015 at 9:34 AM. Reason: [CLOSED]
  2. #2
    Hi @rguardado,

    Probably, you should change/adjust CSS rules.

    This video demonstrates the technique of inspecting HTML/CSS and coming up with CSS rules:
    CSS Change TabPanel Header Color - Ext.NET on Vimeo

Similar Threads

  1. [CLOSED] Change Color Window's Header Background Color
    By rguardado in forum 3.x Premium Help
    Replies: 3
    Last Post: Jan 16, 2015, 3:48 PM
  2. Replies: 8
    Last Post: May 22, 2014, 1:12 PM
  3. how to change color panel header?
    By HosseinHelali in forum 1.x Help
    Replies: 3
    Last Post: Jan 15, 2014, 11:49 PM
  4. [CLOSED] Change grid header color
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 1
    Last Post: Aug 26, 2011, 9:53 AM
  5. how to change the header color of a panel
    By joydeepsen in forum 1.x Help
    Replies: 3
    Last Post: Jul 09, 2011, 9:23 PM

Tags for this Thread

Posting Permissions