I'm creating an application in C++, using QT and stylesheets to design my app. It's working just fine. But I have a quick question,
I'm wondering if there's any way I can throw away the highlighting of a tab when it's selected. I'm building a Qt application and the result is gross :
My qss looks like this :
QTabWidget::tab-bar {
alignment: center;
}
QTabBar::tab {
background-color: #F5FCFE;
border-bottom-color: #C2C7CB;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
height: 60px;
width: 200px;
margin: 10px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #CFEFFC;
}
Thanks for you help
This is a focus frame. To remove it, you should set the tab bar's focus policy to "NoFocus":
tabWidget.tabBar()->setFocusPolicy(Qt::NoFocus);
Related
I am trying to create a gui application to control the volume level of my machine using Qt5 and C++.
This is what I kind of want to achieve.
So, I created the basic layouts and added the QSlider, and then used the following stylesheet to style it:
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
I got the following result:
First the handle is an eclipse, and not a circle. But I wanted to reduce the height of the groove, so I modified the above stylesheet:
QSlider::groove:horizontal
{
height: 10px; // modified here
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
And now, the handle of the slider became a rectangle.
Can anyone please answer what's causing it to behave like this, or point me to some docs.
your border-radius should be proportional to the length and width to become a circle.
Try this style :
QSlider::groove:horizontal {
border-radius: 1px;
height: 3px;
margin: 0px;
background-color: rgb(52, 59, 72);
}
QSlider::groove:horizontal:hover {
background-color: rgb(55, 62, 76);
}
QSlider::handle:horizontal {
background-color: rgb(85, 170, 255);
border: none;
height: 40px;
width: 40px;
margin: -20px 0;
border-radius: 20px;
padding: -20px 0px;
}
QSlider::handle:horizontal:hover {
background-color: rgb(155, 180, 255);
}
QSlider::handle:horizontal:pressed {
background-color: rgb(65, 255, 195);
}
And This is for your style (I change margin and padding)
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -4px 0;
padding: -4px 0px;
border-radius:11px;
border: 3px solid #ffffff;
}
I am trying to make a QSlider that has an absolute gradient and a chunked style in the QSlider::add-page part of the slider.
Following Style Sheet code:
QSlider::groove:vertical {
background: #021017;
BORDER-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
BORDER-radius: 5px;
border: 1px solid #0e566d;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
}
QSlider::sub-page:vertical {
background: #021017;
BORDER-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
And I get the following output:
But as I move the handle the gradient changes based on the height from the bottom of the slider to the handle. I would like the gradient to be based on the height from the bottom of the slider to the top. Meaning changing the handle position will not change the look of it.
Also is it possible to have a chunked out gradient-- like this progress bar?
For the first question: yes, it is possible. I adjusted the style sheet you provided (uncommented things, you will notice them):
QSlider::groove:vertical {
width: 10px;
/* background: #021017;*/
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
border-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
border-radius: 5px;
border: 1px solid #0e566d;
/*background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);*/
}
QSlider::sub-page:vertical {
background: #021017;
border-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
Summary: style the groove with the gradient and skip the add-page background color.
For the second question, ::chunk is not working, so I think it is not working with the default QSlider. Feel free to implement your own class, which can handle chunks.
I need to change the background color of the selected item on a QTreeView.
I already tried using this example and this Stack Overflow question.
The style applied to the ::branch subcontrol works fine, but none of the commands in the ::item subcontrols works.
The QSS applied to the QTreeView :
QTreeView {
show-decoration-selected: 1;
}
QTreeView::item {
border: 1px solid #d9d9d9;
border-top-color: transparent;
border-bottom-color: transparent;
background: rgb(255, 0,0);
}
QTreeView::item:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
border: 1px solid #bfcde4;
}
QTreeView::item:selected {
border: 1px solid #567dbc;
}
QTreeView::item:selected:active{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
}
QTreeView::item:selected:!active {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
}
QTreeView::branch {
background: palette(base);
}
QTreeView::branch:has-siblings:!adjoins-item {
background: cyan;
}
QTreeView::branch:has-siblings:adjoins-item {
background: red;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
background: blue;
}
QTreeView::branch:closed:has-children:has-siblings {
background: pink;
}
QTreeView::branch:has-children:!has-siblings:closed {
background: gray;
}
QTreeView::branch:open:has-children:has-siblings {
background: magenta;
}
QTreeView::branch:open:has-children:!has-siblings {
background: green;
}
And here my result:
I want a result like this:
Can someone help me, thanks in advance.
After some research, I got the answer in the Qt mailing list. The desired effect was done with the following QStylesheet:
QTreeView {
background-color: transparent;
selection-background-color: green; /* Used on Mac */
selection-color: white; /* Used on Mac */
show-decoration-selected: 1;
}
QTreeView::item:selected {
background-color: green; /* Used on Windows */
color: white;
}
The Mac lines that change the style, even if I'm on Windows, I don't know if it is a bug in my windows version, or in this Qt version maybe.
You just want your branch selection color to match your item's?
QTreeView::branch:selected {
background:
}
QTreeView::branch:selected:active {
background:
}
QTreeView::branch:selected:!active {
background:
}
etc...
I have the following stylesheet:
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #2A2A2A, stop: 0.4 #E1E1E1,
stop: 0.5 #E1E1E1, stop: 1.0 #2A2A2A);
background-image: url(:/metal_toolbar);
border-left: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
border-bottom: 1px solid #9B9B9B;
border-top-color: #5A5A5A;
font: bold 12pt;
/*min-width: 20ex;
max-width: 1000ex;*/
padding: 2px;
}
If I don't declare the font in the style sheet, my tabs are sized appropriately for the text they contain, however when I increase the font size, the tab size remains constant and the text gets cut-off. I've tried all the width settings but I want the tab width to scale to what it contains.
Anyone know a work-around or fix for this?
I'm loading the style sheet file into my program as a skin, so I'd prefer stylesheet solutions over programmatic solutions if they exist
EDIT:
Here's the working version with proper tab sizes
QTabBar
{
font: bold 9pt;
}
QTabBar::tab
{
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #2A2A2A, stop: 0.4 #E1E1E1,
stop: 0.5 #E1E1E1, stop: 1.0 #2A2A2A);
background-image: url(:/metal_toolbar);
border-left: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
border-bottom: 1px solid #9B9B9B;
border-top-color: #5A5A5A;
min-width: 20ex;
padding: 2px;
}
Set the font from the QTabBar then. Rough pseudocode below.
font = tabbar.font()
font.setPointSize(12)
font.setBold(true)
tabbar.setFont(font)
You should be able to access the QTabBar from the QTabWidget, and just set your style sheet without the font. I hope this can help.
I currently have a QToolBar that has the following style sheet
QToolBox::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border-radius: 3px;
color: darkgray;
width: 70px;
}
QToolButton { /* all types of tool button */
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
padding-right: 30px; /* make way for the popup button */
}
QToolButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 30px;
}
Now the problem with the above style sheet is that the QToolButton tag applies to every toolbutton that I add to the QtoolBar. Is there anyway to restrict the application of tis design to certain QToolButton that I add dynamically. The stylesheet is added at design time to the QToolBar ?
You could use the objectName of the instancied QToolButton. In a QStyleSheet you can target specific instances of QtWidget inherited classes with #ObjectName.
exemple in sources :
QWidget *pWidget = new QWidget(parent);
pWidget->setObjectName("myWidget");
example in qss :
QWidget {
background-color: red;
}
#myWidget {
background-color: green;
}
for your widget with object name set as "myWidget", the background will be green, for all the others it will be red.
You will eventually need to polish() your widget if you dynamically update your stylesheet too. for this look at Qt doc : polish()