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
Related
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"));
I have a QListView to which I added line separators using the following stylesheet:
listView_->setStyleSheet("QListView::item { border-bottom: 1px solid black; padding: 2px; }");
However something unexpected has happened - on single click on any item in the list, the data vanishes from the display. It comes back on a double click. This is quite weird I think. Why is this happening ?
Here is the QListView
This is what happens as soon as I click on any item:
The data that has just vanished, comes back when I double click (instead of a single click - or selection action)
Why is this happening and how can I avoid it ?
Each item in the view has states, for example a selected state represents an item that is currently selected. Now, if you look at the list without any stylesheet attached, you will notice that selected items have dark blue background and white text. However, when you are assigning this stylesheet
QListView::item { border-bottom: 1px solid black; padding: 2px; }
you are in fact modifiing all states at once, including the selected state, which causes it to have the default white background along with the white text. For example, if you add another property:
QListView::item { border-bottom: 1px solid black; padding: 2px; background:red; }
you will notice, that all items (both selected and not selected ones) will have red background. To fix the issue, you should specify that your stylesheet must be applied only to items that are not selected
QListView::item:!selected{ border-bottom: 1px solid black; padding: 2px; }
What happens when font family and size supplied by stylesheet of QTreeView differ from the ones returned by the model assigned to it? So far it seems like model's data overrides stylesheet settings. How do I change font of a view with a custom model assigned to it then?
Or to be more precise: if I know I want to style the view with stylesheet - what do I return from model when ::FontRole is requested?
UPD: just in case I am doing something stupid, here is my stylesheet that I assign to qtreeview:
QTreeView::item:selected
{
color: black;
font-family:"Times New Roman", Times, serif;
}
QTreeView::item:has-children
{
font-family: "Comic Sans MS", cursive, sans-serif;
height: 25px;
border-bottom: 1px solid;
border-bottom-color: green ;
border-top: 1px;
}
After some asking around and googling it turned out that styling text in QTreeView should be done on QTreeView instead of QTreeView::item
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 ) ;