Color each tab in a pagecontrol individually

[d.bernaert]

Hi,

One of my customers asks me if it is possible to let every tab in a pagecontrol have it's own background color so that they can see the different tabs more clearly.

Is that possible?

Thx,

Dominique

[Sherzod]

Hi Dominique,

One possible solution I think.

UniTabSheet1.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    var me=sender.tab;
    me.setStyle('background', 'orange');
    me.btnInnerEl.setStyle('color', 'white');
}

[Sherzod]

Small improvement considering: hover, active css.

1. CustomCSS:

.customTab.x-tab-active, .customTab.x-tab-over {
    background: orange !important; 
    filter: brightness(110%);
}

.customTab {
    background: orange; 
}

.customTab .x-tab-inner {
    color: white !important;     
}

2. UniTabSheet1.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    sender.tab.addCls('customTab');
}

 

[Moegamat Alexander]

Hi

Where do I find documentation about css and what you can do. I need to adjust my tab heights ... its inherited from the emerald theme and I need to overide the tab heights overall ... it looks a bit bulky

[MVakili]

On 11/13/2022 at 8:51 PM, Moegamat Alexander said:

Hi

Where do I find documentation about css and what you can do. I need to adjust my tab heights ... its inherited from the emerald theme and I need to overide the tab heights overall ... it looks a bit bulky

please share you solution