How to customize classic tabs

Support
#1

Hi,
is there a way to customize the classic tab element? because it look so bland, is there a way to changge the border color, background color, or change its color when hover, the thickness of the border, font size

is there a documentation on how to customize the classic tabs

#2

Hello @kumpobiz,

Thanks for asking. :slight_smile:

You can add following CSS under X > Launch > Options > CSS to make necessary changes in classic tabs:

.x-nav-tabs {border: 2px solid #9c7373; border-bottom: 0;}

.x-nav-tabs.top>li a {border-bottom: 2px solid #9c7373; color: #754e4e; font-size: 18px;}

.x-nav-tabs.top>li {border-right: 2px solid #9c7373;}

.x-tab-content {border: 2px solid #9c7373; border-top: 0; font-size: 16px;}

.x-nav-tabs>li>a {background-color: #bd6e6e;}

.x-nav-tabs>li>a:hover {background-color: #b3a9a9; color: #252525;}

Please change color codes as per your requirement.

Thanks.

1 Like
#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.