Skip to content

Instantly share code, notes, and snippets.

@espdev
Last active May 1, 2024 06:52
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save espdev/4f1565b18497a42d317cdf2531b7ef05 to your computer and use it in GitHub Desktop.
Save espdev/4f1565b18497a42d317cdf2531b7ef05 to your computer and use it in GitHub Desktop.
A QTabWidget Custom Stylesheet Example
QTabWidget::pane {
border: 1px solid black;
background: white;
}
QTabWidget::tab-bar:top {
top: 1px;
}
QTabWidget::tab-bar:bottom {
bottom: 1px;
}
QTabWidget::tab-bar:left {
right: 1px;
}
QTabWidget::tab-bar:right {
left: 1px;
}
QTabBar::tab {
border: 1px solid black;
}
QTabBar::tab:selected {
background: white;
}
QTabBar::tab:!selected {
background: silver;
}
QTabBar::tab:!selected:hover {
background: #999;
}
QTabBar::tab:top:!selected {
margin-top: 3px;
}
QTabBar::tab:bottom:!selected {
margin-bottom: 3px;
}
QTabBar::tab:top, QTabBar::tab:bottom {
min-width: 8ex;
margin-right: -1px;
padding: 5px 10px 5px 10px;
}
QTabBar::tab:top:selected {
border-bottom-color: none;
}
QTabBar::tab:bottom:selected {
border-top-color: none;
}
QTabBar::tab:top:last, QTabBar::tab:bottom:last,
QTabBar::tab:top:only-one, QTabBar::tab:bottom:only-one {
margin-right: 0;
}
QTabBar::tab:left:!selected {
margin-right: 3px;
}
QTabBar::tab:right:!selected {
margin-left: 3px;
}
QTabBar::tab:left, QTabBar::tab:right {
min-height: 8ex;
margin-bottom: -1px;
padding: 10px 5px 10px 5px;
}
QTabBar::tab:left:selected {
border-left-color: none;
}
QTabBar::tab:right:selected {
border-right-color: none;
}
QTabBar::tab:left:last, QTabBar::tab:right:last,
QTabBar::tab:left:only-one, QTabBar::tab:right:only-one {
margin-bottom: 0;
}
@yasinbakhtiar
Copy link

This is a good style

@espdev
Copy link
Author

espdev commented Jun 4, 2020

@yasinbakhtiar

I have checked the stylesheet in Qt 5.13. "West" and "East" tab positions look incorrectly now. It seems, previously it worked correctly. :)

@llls31
Copy link

llls31 commented Nov 12, 2021

Hi do you have a css style for qlistwidget

@espdev
Copy link
Author

espdev commented Nov 12, 2021

Hi @llls31,

I didn't have a style for QListWidget. QListWidget is just a rectangle with list items. Usually list items are styled by widget item delegate.
You can check supported style options for QListView/QListWidget here: https://doc.qt.io/qt-5/stylesheet-reference.html

@xenjee
Copy link

xenjee commented May 4, 2022

Quite a helpful list of sub elements, thank you!

@DamaMichaelYohanna
Copy link

Thank you so much man. This has really helped me. currently Pyside.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment