I am trying to make a QListWidget with QListWidgetItems.
I want the QListWidgetItems to have a border and a background e.g. Green.
The selected item should have another background e.g. Red.
I tried to create the border with a stylesheet. This works fine.
But I an not able to set the individual background color of the items anymore.
Below piece of code I am using
QListWidget *listWidget = new QListWidget();
QListWidgetItem *wi = new QListWidgetItem;
wi->setText("greenbg");
wi->setBackgroundColor(Qt::green);
listWidget->addItem(wi);
listWidget->setStyleSheet( "QListWidget::item {border-style: solid; border-width:1px; border-color:black;}");
QListWidgetItem *wi2 = new QListWidgetItem;
wi2->setText("redbg");
wi2->setBackgroundColor(Qt::red);
listWidget->addItem(wi2);
listWidget->show;
This shows the list transparent. When the setStyleSheet line is removed the items are green and red.
What am I doing wrong or is it not possible and should I use a custom Widget?
CSS is overriding the values you set there. Try to set the background color also in CSS:
listWidget->setStyleSheet(
"QListWidget::item {"
"border-style: solid;"
"border-width:1px;"
"border-color:black;"
"background-color: green;"
"}"
"QListWidget::item:selected {"
"background-color: red;"
"}");
Notice that you can specify different style for different states (ie. that item is selected).
Example and other information here.
Related
I'm using QTableView class in my GUI and I would like the selected row to have the same color whether the TableView is active or inactive.
I tried to set this CSS stylesheet to achieve this:
QTableView:!active {
selection-background-color: palette(Highlight);
selection-color: palette(HighlightedText)
}
On Linux, it works just fine, but on Windows 7, when the TableView loses its focus, the text turns black instead of staying white (the background stays blue, so that part is OK). Am I missing something here ?
You also have to style text color, for example just add:
QTableView:!active {
...
selection-color: white;
}
This works well in python
pal = tbl_list.palette()
pal.setColor(QPalette.Inactive, QPalette.Highlight, pal.color(QPalette.Active, QPalette.Highlight))
tbl_list.setPalette(pal)
I want to set some style properties via setStylesheet, e.g. a border
label.setStylesheet("border: 1px solid white;");
After that my label has a white border but all font properties set in the parent widget (QDesigner) are ignored!
qDebug() << label->font().family();
qDebug() << label->font().rawName();
both print the right font family but this is not applied after the setStylesheet function was called.
Same thing with colors. Colors set via QPlatte in the Designer are not used if I set some other properties via setStylesheet().
I don't know but it seems that we should not mix both technologies or I am doing something wrong here.
Unfortunately, setting one property in the style sheet of a widget usually results in all styles properties needing to be set, as well as breaking inheritance for any of those properties. I couldn't reproduce the font inheritance issue in my own environment (what version of Qt are you using?), but the following code should get you around this issue.
// Get the color of the label's parent (this).
QColor color = this->palette().windowText().color();
QString colorString = "rgb(" +
QString::number( color.red() ) + "," +
QString::number( color.green() ) + "," +
QString::number( color.blue() ) + ")";
// Get the Font of the label's parent (this).
QFont font = this->font();
// Set the Font and Color.
label->setFont( font );
label->setStyleSheet( "color: " + colorString + "; border: 1px solid white;" );
Personally, I try to keep all of my styling in either the form editor for specific form object styles, or in a style sheet that is loaded in at the top level, much like CSS for a web page.
I'm using a QTreeWidget to show a list of categorized properties. I would like the top level items to be a different background colour; however, the arrow indicating it has children is always the default black on white (Windows 8.1, Qt 5.2.1). Here's how I'm adding the QTreeWidget Item:
QBrush fg(Qt::white);
QBrush bg(Qt::darkGray);
QTreeWidgetItem *header = new QTreeWidgetItem();
header->setText(0, "Sound File");
this->addTopLevelItem(header);
header->setFirstColumnSpanned(true);
header->setData(0, Qt::ForegroundRole, fg);
header->setData(0, Qt::BackgroundRole, bg);
header->setExpanded(true);
Here's a screenshot of how this gets rendered.
How can I give it a solid background across the whole row?
For the indicators you can use StyleSheets something like this:
QTreeWidget::branch::!has-children:selected {background-color: rgb(255, 255, 255);}
QTreeWidget::branch::!has-children:selected:alternate {background-color: rgb(0, 0, 0);}
and set this StyleSheet to the QTreeWidget..
If someone knows any other way to do this for the individual items feel free to share... I have similar situation where I was one of the item that have children to be different color..
I have a widget class 'BlockWidget' subclass of QLabel, in the ctor I set its qss qss_1, and I want animated effect that when the mouse move on it, it will change its background-color, so I set its qss qss_2, but it seems not working... My code like this:
BlockWidget::BlockWidget(const QString &objname)
{
this->setObjectName(objname);
setAlignment(Qt::AlignCenter);
setStyleSheet(tr("BlockWidget#%1{color:white; background-color: gray; font-size:18px;"
"font-family:'Consolas';}").arg(objectName()));
}
void BlockWidget::mouseMoveEvent(QMouseEvent *ev)
{
setStyleSheet(tr("BlockWidget#%1{color:white; background-color: blue; font-size:18px;"
"font-family:'Consolas';}").arg(objectName()));
repaint();
}
And I have a mainwindow, I instantiated 81 instances of BlockWidget. when my mouse move to one of them, nothing happened. but if I click on it some times, it do change its qss style(its background turns blue)
As stated by the documentation, mouse move events are only sent when you click, drag or release the buttons, if mouse tracking isn't enabled for the widget.
You can detect the mouse entering and leaving the labels by redefining QWidget::enterEvent and QWidget::leaveEvent in your BlockWidget class.
Or you can simply use the :hover QSS pseudo-state without having to redefine any mouse related function:
setStyleSheet("BlockWidget {"
" color:white;"
" background-color: gray;"
" font-size:18px;"
" font-family:'Consolas';"
"}"
"BlockWidget:hover {"
" background-color: blue;"
"}");
PS:
According to Qt style sheet documentation, QLabel doesn't support the :hover pseudo-state, however changing the background or the borders seems to be working fine.
Since your BlockWidget widgets don't have themselves BlockWidget children, and because you set the stylesheet individually to all of them, it should be safe to omit the object name from the QSS selector.
You must enable mouse tracking for your widget http://qt-project.org/doc/qt-4.8/qwidget.html#mouseTracking-prop
The default is for the selected row to be colored gray if the QTableWidget does not have focus, and orange if it does have focus. I would like to, instead, make the selected row be red whether or not the widget has focus. I tried adding this to the style sheet:
QTableWidget{ selection-background-color: red}
I also tried
QTableWidget:edit-focus{ selection-background-color: red}
and
QTableWidget:focus{ selection-background-color: red}
but none of them seem to turn anything red, it still seems to remain orange if focused and gray if not. What properties do I have to set to make the selected row always the same color, whether or not it has focus?
Thanks,
David
You almost had it. Technically speaking, you're adjusting the selection color of the items within your table widget, so:
QTableWidget::item{ selection-background-color: red}
should do the trick.
Alternatively:
QTableWidget::item{ background-color: blue }
QTableWidget::item:selected{ background-color: red }
background-color will set background color of the items in row and selection-color will set the text color because when the row is selected then if text are present in the row then it might become unreadable due to color so setting proper text color is important.
#d9fffb : light blue
#000000 : black
self.table.setStyleSheet(
"QTableView::item:selected"
"{"
"background-color : #d9fffb;"
"selection-color : #000000;"
"}"
)