Please tell me how to correctly specify the arguments for the fact that all the buttons on the form had a style when you hover the mouse over these buttons? In addition to the style for the button, there is also a style for the form itself.
I specify it in the constructor:
{
ui->setupUi(this);
this->setStyleSheet("background: rgb(49, 54, 59); color: rgb(220, 221, 218); selection-color: lightyellow; selection-background-color: darkcyan;"
"QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
}
It works if I only specify a separate style for the button, but I need to combine all the styles into one entry.
this->setStyleSheet("QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
I think you are looking for this
this->setStyleSheet("QWidget { background: rgb(49, 54, 59); color: rgb(220, 221, 218); selection-color: lightyellow; selection-background-color: darkcyan; }"
" QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
If your main form is QMainWindow you can also set style only for QMainWindow but not for all QWidgets
this->setStyleSheet("QMainWindow { background: rgb(49, 54, 59); color: rgb(220, 221, 218); selection-color: lightyellow; selection-background-color: darkcyan; }"
" QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 1px};");
Related
the comboBox contains two entries and , when the combobox is clicked, the listview occupies the frame of combobox. I want the list view just below the combobox. stylesheet is as shown below:
QComboBox {
border: 1px solid #8F9EAB;
border-radius: 3px;
font: 16pt "Arial";
min-width: 6em;
color: #1B3067;
background-color: rgb(255, 255, 255);
padding-left:10px;
}
QComboBox:pressed
{
border: 1px solid #1562AD;
color: rgb(255, 255, 255);
background-color: #87A6D5;
}
QComboBox:disabled
{
border: 1px solid #BFBFBF;
color: #BFBFBF;
background-color: rgb(255, 255, 255);
}
QComboBox::down-arrow
{
background-image: url(:/Images/data/img/Images/DOWN_enabled.png);
height: 7px;
width : 13px;
}
QComboBox::drop-down
{
subcontrol-position: top right;
width: 40px;
color: white;
border-left-width: 0px;
border-left-color: #8F9EAB;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox QListView
{
font: 16pt "Arial";
color: rgb(80, 80, 80);
}
QComboBox QAbstractItemView::item
{
border-bottom: 5px solid white; margin:3px;
}
The position of the view() can not be handled with Qt Style Sheet, you must create a class that inherits from QComboBox and overwrite the showPopup() method as shown below.
class ComboBox: public QComboBox{
public:
using QComboBox::QComboBox;
public:
void showPopup(){
QComboBox::showPopup();
QPoint pos = mapToGlobal(QPoint(0, height()));
view()->parentWidget()->move(pos);
}
};
I want to build a dropdown list control with QPushButton and QMenu like below:
QPushButton* menuBt = new QPushButton("Please select");
menuBt->setFlat(true);
QMenu* menu = new QMenu();
menuBt->setMenu(menu);
QWidgetAction* wa1 = new QWidgetAction(menu);
QLabel* l1 = new QLabel("Option1");
wa1->setDefaultWidget(l1);
menu->addAction(wa1);
QWidgetAction* wa2 = new QWidgetAction(menu);
QLabel* l2 = new QLabel("Option2");
wa2->setDefaultWidget(l2);
menu->addAction(wa2);
menu->setStyleSheet("QMenu::item {font-family: \"Arial\"; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);}"
"QMenu::item:hover {background-color: rgb(0, 0, 255);}");
menuBt->setStyleSheet("QPushButton {font-family: \"Arial\"; font-size: 13pt; color: #808080; border: 1px solid gray;padding: 1px 18px 1px 3px;min-width: 6em; background-color: rgb(234,234,234);}");
I set the font and hover background color to the menu items by setStyleSheet, but seems it doesn't work.
How make the font and hover background color work on menu items?
Answer:
class QTDropDownButton : public QPushButton
{
Q_OBJECT
public:
QTDropDownButton(QString text, QWidget *parent = nullptr);
void addItem(QString text);
protected slots:
void menuAboutToShow();
private:
QMenu* menu_;
};
QTDropDownButton::QTDropDownButton(QString text, QWidget *parent) :
QPushButton(text, parent)
{
setFlat(true);
menu_ = new QMenu();
setMenu(menu_);
connect(menu_, SIGNAL(aboutToShow()), this, SLOT(menuAboutToShow()));
setStyleSheet("font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);");
menu_->setStyleSheet("QMenu::item {font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);}"
"QMenu::item:selected {background-color: rgb(0, 255, 255);}"
"QLabel {font-family: Arial; font-size: 13pt;}"
"QLabel:hover {background-color: rgb(0, 0, 255);}");
}
void QTDropDownButton::addItem(QString text)
{
if(!menu_)
return;
QWidgetAction* wa1 = new QWidgetAction(menu_);
QLabel* l1 = new QLabel(text);
wa1->setDefaultWidget(l1);
menu_->addAction(wa1);
}
void QTDropDownButton::menuAboutToShow()
{
if(menu_)
menu_->setFixedWidth(this->width());
}
To set the font-family you don't need to put quotes around the Arial. I believe this prevents your style sheet from parsing correctly.
A side note: at the moment only your menuBt is styled, other buttons will look like default buttons. To change button style for all buttons in the menu, move the style into the setStylesheet() call of the menu like this:
menu->setStyleSheet("QMenu::item {font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray; background-color: rgb(234,234,234);}" +
"QMenu::item:hover {background-color: rgb(0, 0, 255);}" +
"QPushButton {font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray;padding: 1px 18px 1px 3px;min-width: 6em; background-color: rgb(234,234,234);}");
But if you want only this one button to look different, it is correct to call
setStylesheet() on it, but you can omit the selector, like this:
menuBt->setStyleSheet("font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray;padding: 1px 18px 1px 3px;min-width: 6em; background-color: rgb(234,234,234);");
I'm trying to make a simple QComboBox with a few color options. The easiest way I found so far was to make a QPixmap for each item, fill it with a color and use it as the item's icon:
this->colorComboBox = new QComboBox;
this->colorComboBox->setIconSize(QSize(100, 15));
QPixmap colorIcon(100, 15);
this->colorList.push_back(QColor(255, 255, 255, 255));
this->colorList.push_back(QColor(194, 169, 160, 255));
this->colorList.push_back(QColor(235, 206, 157, 255));
this->colorList.push_back(QColor(254, 121, 5, 255));
this->colorList.push_back(QColor(255, 195, 78, 255));
this->colorList.push_back(QColor(111, 203, 172, 255));
for(unsigned int i = 0; i < this->colorList.size(); ++i)
{
colorIcon.fill(this->colorList.at(i));
this->colorComboBox->addItem(colorIcon, QString(""));
}
The problem is, even though the color rectangle displays well on the button for the currently selected item:
It's displaying tiny for the items on the popup list:
It seems that the pixmap itself is always scaled down to a width of about 15px, no matter what size I choose for setIconSize.
I feel like this should be really simple to solve, but I've tried several things and nothing seems to work... Thanks in advance for the help.
Edit:
The QSS has the following for QComboBox. I tried changing QComboBox::drop-down's width to 100px and the box itself gets larger, the icon still tiny.
QComboBox
{
border: 1px solid #101010;
background-color: #808080;
color: #d0d0d0;
border-radius: 4px;
selection-color: #f58113;
selection-background-color: #808080;
show-decoration-selected: 0;
}
QComboBox:on
{
padding-top: -10px;
padding-left: 4px;
}
QComboBox::drop-down
{
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 0px;
border-left-color: #000000;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
In my app I have several places that use a QWebView and load the content from the server. In addition the app allows the user to select a default or a dark theme. When the content-type of the document to display is text/plain and the application theme is set to dark, the text is displayed as black text on a black background. I can only see the text if I highlight it. text/html documents work well with either theme.
Ideally when the dark theme is selected I want to display white text on a black (or dark gray) background. I have not been able to figured out how to do this.
Here is the code I currently use to set up the theme:
if(Theme == "dark")
{
app.setStyle(QStyleFactory::create("Fusion"));
QPalette darkPalette;
darkPalette.setColor(QPalette::Window, QColor(88,88,88));
darkPalette.setColor(QPalette::WindowText, Qt::white);
darkPalette.setColor(QPalette::Base, QColor(25,25,25));
darkPalette.setColor(QPalette::AlternateBase, QColor(88,88,88));
darkPalette.setColor(QPalette::ToolTipBase, Qt::white);
darkPalette.setColor(QPalette::ToolTipText, Qt::white);
darkPalette.setColor(QPalette::Text, Qt::white);
darkPalette.setColor(QPalette::Button, QColor(53,53,53));
darkPalette.setColor(QPalette::ButtonText, Qt::white);
darkPalette.setColor(QPalette::BrightText, Qt::red);
darkPalette.setColor(QPalette::Link, QColor(42, 130, 218));
darkPalette.setColor(QPalette::Highlight, QColor(150, 200, 255));
darkPalette.setColor(QPalette::HighlightedText, Qt::black);
app.setPalette(darkPalette);
} else {
Theme = "default";
app.setStyle(QStyleFactory::create("Fusion"));
app.setPalette(DefaultPalette);
}
// load the style sheet
QFile file(":/themes/" + Theme + "theme.css");
file.open(QIODevice::ReadOnly);
const QByteArray theme = file.readAll();
app.setStyleSheet(theme);
The default theme style sheet is blank and the dark style sheet is:
QToolTip {
color: #ffffff;
background-color: #2a82da;
border: 1px solid white;
}
QScrollBar:horizontal {
border: 1px solid grey;
background: #606060;
height: 20px;
margin: 0px 20px 0px 20px;
}
QScrollBar::handle:horizontal {
border: 1px solid #909090;
background: #303030;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
border: 1px solid #909090;
background: #303030;
image: url(:/themes/themes/dark/sbright.png);
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border: 1px solid grey;
background: #303030;
image: url(:/themes/themes/dark/sbleft.png);
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:vertical {
border: 1px solid grey;
background: #606060;
width: 20px;
margin: 20px 0 20px 0;
}
QScrollBar::handle:vertical {
border: 1px solid #909090;
background: #303030;
min-height: 20px;
}
QScrollBar::add-line:vertical {
border: 1px solid #909090;
background: #303030;
image: url(:/themes/themes/dark/sbdown.png);
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border: 1px solid grey;
background: #303030;
image: url(:/themes/themes/dark/sbup.png);
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}
I currently have something like this in my QtableView stylesheet
QTableView::item
{
selection-background-color: rgb(85, 85, 127);
border-bottom: 1px double #8f8f91;
}
Now the problem is the selection-background-color: rgb(85, 85, 127); takes effct only if border-bottom: 1px double #8f8f91; is disabled. Any suggestions ??
You should specify any border attribute if you want suck customization. Is't specific of QSS:
border: 0px solid transparent; // Or any other border