Good morning, or good afternoon :)
I am trying to custom a QToolBar.
I managed to custom the buttons of my toolbar, but I can't find a way to set the expansion button to the two default arrows...
Here is an illustration to help you understand :
On this toolbar, you can see a double arrow at the end of the second toolbar but none at the end of the first tool bar (after Variable)... I would like to set the qt_toolbar_ext_button to the image at this path :/images/images/extension-arrows.png.
The code I used to custom them is :
m_toolbar1->setStyleSheet(
"QToolBar {border-bottom: 1px solid #808d97;"
"border-top: 1px solid #808d97; background-color: #3a4f5e;} "
"QToolButton {background:#3a4f5e; border: 1px solid #585858;"
"border-style: outset; border-radius: 4px; min-width: 5em; min-height: 1.5em; color: white}"
"QToolButton:hover {background: #5d7180; border: 1px groove #293843;}"
"QToolButton:pressed {background:#475864; border: 1px groove #293843;}"
"QToolButton#qt_toolbar_ext_button {"
"border: none;"
"background: url(:/images/images/extension-arrows.png);"
"padding-top: 20;"
"width: 20px;"
"font: bold 14px;"
"color: red;}");
m_toolbar2->setStyleSheet("background-color: #3a4f5e; color:white;");
This code was inspired by : How to set the QToolButton's icons using style sheet?
Thank you in advance for your help ! :D
I'm found this solution, but through widgets API.
ui->toolBar->findChild<QToolButton*>("qt_toolbar_ext_button")->setIcon(QIcon(":/icon/myico.png"));
Related
I am trying to create a custom table header style without section separators and with different colors.
I have this in my stylesheet:
QHeaderView::section {
border: 0;
border-bottom: 1px solid #cccccc;
background-color: white;
}
QHeaderView::section:hover {
border-bottom: 2px solid #aaaaaa;
}
QHeaderView::section:selected, QHeaderView::section:checked {
border-bottom: 2px solid rgb(0, 166, 228);
background-color: rgb(255, 170, 0);
}
It works except the style for active (clicked) section. I thought it should be either :checked or :selected pseudo state (which are mentioned in docs http://doc.qt.io/qt-5/stylesheet-reference.html) but I don't see any effect.
Is it a bug or am I doing something wrong?
Looks like it is not supported by QHeaderView, I guess :checked and :selected are either used for some other purposes or simply not implemented.
Found some old bug reports, reopened one of them: https://bugreports.qt.io/browse/QTBUG-23689
In my project I customized a QMenu using stylesheets to have the color and spacing attributes I want. However, upon doing so, disabled actions no longer look any different from enabled actions.
Before:
After:
As you can see, the disabled actions look the exact same as enabled ones, and I can't seem to figure out a way to select disabled actions via stylesheets.
Here is my current stylesheet for the QMenu
QMenu{width: 115px; background: #373f49; color: #bfbfbf; margin: 0px;}
QMenu::item{padding: 4px 18px 4px 30px; border: 0px solid transparent; margin: 0px;}
QMenu::icon{margin-left: 10px;}
QMenu::item:selected{background: #47505c; color: #fff;}
Thanks for your time.
Use the disabled selector:
QMenu::item:disabled{background: #ffffff; color: #000000;}
I'm trying to customize a QTabBar button in Qt/C++ by making it show up as italic and the only way I've found is to use setTabButton and give it a custom widget, which is a QLabel in my case. However, setTabButton's position parameter only has Left or Right as options (See code below). Now it looks weird next to the other tabs which are all centered.
tab_bar->setTabButton(index, QTabBar::RightSide,((QWidget*)(tab_label)));
Note, there is a stylesheet applied to the whole application... not sure if that would cause the issue to be more apparent.
Stylesheet for that label is:
QLabel#GrainButton {
background-color: transparent;
border: 0px solid transparent;
margin: 0px;
padding: 0px;
min-width: 20px;
border: 0px solid transparent;
border-radius: 0px;
}
Any thoughts of how to center this?
You can create a custom widget instead of your QLabel. In this widget you can set a QHBoxLayout with 2 placeholders widgets.
QHBoxLayout:
PlaceHolder( sizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed); )
YourLabel
PlaceHolder( sizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed); )
This may place your widget in the center.
Inherit QProxyStyle and override drawItemPixmap, the pixmap will shown in the center.
I have seen many answers on the line of
How to change the cell color of a jquery datepicker
But they for some reason do not apply to my example.
http://plungjan.name/test/datepicker_orange.html
I want the WHOLE cell content to be orange, not just what we can see behind the link IN the cell
So what I can see as
.ui-state-default {
background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
which controls the link inside the cell with a class name set by me to "orange"
<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>
where the orange class is given by me in this code:
return [true,"orange","Almost sold out"];
It shows
and not
Which I can get if I remove the background image of the above ui-state-default in firebug
What is the correct method of changing the complete cell color of the cells I now change using the beforeShowDay?
I tried helping the situation by overriding the default:
.ui-state-default {
background-color: transparent;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
Did not make any diffence
#mplungjan Change css to this:
td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;}
If you put your class directly on the tag you have to change it to this:
.ui-state-default {
background: #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
In CSS if you have a backgorund image and a background color then the browser will show you the image which in this case is that gradient grey that you have in the first example.
I'm developing Qt application for Mac OS X.
Problem is when I create QToolButton it apears with some outline.
http://i.stack.imgur.com/vqtP9.png
I use next stylesheet
QToolButton {
border: 1px solid #575757;
border-radius: 4px;
}
How to remove the outline?
ANSWER:
I didn't mentioned that I'm adding this item to statusBar().
To remove border around the item I used:
QStatusBar::item {border: 0px;}
Have you tried this ?
QToolButton {
border: 1px solid #575757;
border-radius: 4px;
background-color: palette(base);
}
Usually, web best-practices recommand that if you change one color, you have to change them all.
It is likely that you will also have to change the text color as well to avoid potential issues on some computers with non-default window text color.
use this :
yourWidgetElement->setFocusPolicy(Qt::NoFocus ) ;