Search code examples
pythoncsspyqt5styles

PyQt5 Vertical TabBar CSS Style

I have a app that i designed and I'm trying to style 2 different kinds of Tabs (Horizontal and Vertical) with 2 different kinds of style sheets.

The problem is that to style TabBars you basically have to do:

/******************** TAB BAR ***********************/
QTabBar::tab{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929;     border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}
QTabBar::tab:selected {font-weight:bold; border-color:white; border-bottom-color:#292929;} /* same as pane color */
QTabBar::tab:!selected{margin-top:3px;} /* make non-selected tabs look smaller */

Which applies to ALL TabBars (Vertical and Horizontal).

enter image description here

enter image description here

But i want a different style for vertical / horizontal.

I tried:

Creating a new placeholder classes QVerticalTabWidget(QTabWidget) and QVerticalTabBar(QTabBar) importing these 2 in QtDesigner and then changing the CSS above to:

/******************** TAB BAR ***********************/
QVerticalTabBar::tab{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929;     border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}
QVerticalTabBar::tab:selected {font-weight:bold; border-color:white; border-bottom-color:#292929;} /* same as pane color */
QVerticalTabBar::tab:!selected{margin-top:3px;} /* make non-selected tabs look smaller */

Doesn't work.

I tried:

/******************** TAB BAR ***********************/
QTabWidget#NAME QTabBar::tab{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929;     border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}
QTabWidget#NAME QTabBar::tab:selected {font-weight:bold; border-color:white; border-bottom-color:#292929;} /* same as pane color */
QTabWidget#NAME QTabBar::tab:!selected{margin-top:3px;} /* make non-selected tabs look smaller */

Doesn't work.

As you can see in the picture above, the horizontal tabs look ok, but the vertical is shit. How can i fix this?

Solution 
  • /******************** VERTICAL TAB WIDGETS / BARS ***********************/
QTabWidget#NAME::pane {background: #292929; border: 1px white;}
QTabWidget#NAME::tab-bar {background: #292929; min-height: 800px;}
QTabWidget#NAME > QTabBar::tab{color:white; background:#292929;}
QTabWidget#NAME > QTabBar::tab:selected{color: #6856B8; font-weight:bold;}
QTabWidget#NAME > QTabBar::tab:!selected{color: white;}

/******************** HORIZONTAL TAB WIDGETS / BARS ***********************/
QTabWidget::pane {background:  #292929; border: 1px solid white;}

QTabWidget#NAME2::tab-bar {min-width: 300px;}
QTabWidget#NAME3::tab-bar {min-width: 600px;}
QTabWidget#NAME4::tab-bar {min-width: 200px;}

QTabWidget#NAME2 > QTabBar::tab,
QTabWidget#NAME3 > QTabBar::tab,
QTabWidget#NAME4 > QTabBar::tab
{color:white; background:#292929; border:1px solid white; border-bottom-color:#292929; border-top-left-radius:4px; border-top-right-radius:4px; padding:2px; margin-bottom:-2px;}

/* same as pane color */
QTabWidget#NAME2 > QTabBar::tab:selected,
QTabWidget#NAME3 > QTabBar::tab:selected,
QTabWidget#NAME4 > QTabBar::tab:selected
{font-weight:bold; border-color:white; border-bottom-color:#292929;} 

/* make non-selected tabs look smaller */
QTabWidget#NAME2 > QTabBar::tab:!selected,
QTabWidget#NAME3 > QTabBar::tab:!selected,
QTabWidget#NAME4 > QTabBar::tab:!selected
{margin-top:3px;}

    Achieved what i was trying to do.

    Thanks @musicamante for the help.