Unable to set stylesheet properties using qss file - c++

I am trying to set some styles to all the QLineEdits in my application. Following is the code:
QLineEdit {
border: none;
padding-bottom: 2px;
border-bottom: 1px solid black;
color: #000000;
background-color:rgba(0,0,0,0);
}
QLineEdit:focus{
border: 0px solid white;
border-bottom: 2px solid #2196F3;
color: #000000;
}
When I input this style using the GUI i.e by setting the stylesheet option in form editor for each individual lineEdit, it works.
However when I try to add the same code using a qss file in resources, it doesn't work. I use the following code for applying stylesheet:
#include "mainwindow.h"
#include <QApplication>
#include <QFile>
#include <conio.h>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// QFile styleFile( ":/Stylesheets/QLineEdit.qss" );
// styleFile.open( QFile::ReadOnly );
// std::printf("hi0");
// // Apply the loaded stylesheet
// QString style( styleFile.readAll() );
// a.setStyleSheet( style );
QFile file(":/Stylesheets/QLineEdit.qss");
file.open(QFile::ReadOnly);
QString styleSheet = QLatin1String(file.readAll());
a.setStyleSheet(styleSheet);
MainWindow w;
w.show();
return a.exec();
}
What could be the problem here?
Edit: Adding code for the QPushButton:
QPushButton, QPushButton:focus {
background-color:#2196F3;
border: none;
color: white;
padding: 3px 20px;
}
QPushButton:hover, QPushButton:hover:focus {
background-color: #1976D2;
border-color: #ffffff;
}
QPushButton:pressed,
QPushButton:pressed:focus {
background-color: #388E3C;
border: none;
color: white;
}
QPushButton:disabled {
color: #cccccc;
background-color: #cccccc;
border: none;
}

Let's summarize the outcome of the discussion.
Replace the file.open(QFile::ReadOnly); with file.open(QFile::ReadOnly | QFile::Text); QFile::Text is important, because:
The QIODevice::Text flag passed to open() tells Qt to convert
Windows-style line terminators ("\r\n") into C++-style terminators
("\n"). By default, QFile assumes binary, i.e. it doesn't perform any
conversion on the bytes stored in the file.
Furthermore, when setting the stylesheet globally, there are some specifics which should be taken into account:
A stylesheet affects the widget and everything below it in the widget's hierarchy. If set for a widget explicitly (from the code or using the form editor) the parents of the widget are not affected, as if it were set for the whole application. E.g. if you set the following: QWidget { background-color: red; } for a particular widget, this widget and all of its children will have a red background. If you set the same stylesheet from the qss file for the whole application, all the widgets will have a red background. So a great deal of care should be taken about the inheritance between the widgets. Using the right selector types is then crucial.

Related

Qt Windows: Rounded ToolTips

I need rounded tooltips in Qt5 + Windows.
Rounded corners for tooltips cannot be set via stylesheet, the following stylesheet is not working:
QToolTip
{
font-family: Calibri;
font-size: 13pt;
border-radius: 0.5em;
...
}
I cannot override tootip events for widgets, because our application has too many places where tootips are shown.
I'm trying to do it in the following way:
int ThemeStyle::styleHint(StyleHint hint, const QStyleOption* option, const QWidget* widget, QStyleHintReturn* returnData) const
{
switch (hint)
{
case SH_ToolTip_Mask:
{
if (option)
{
if (QStyleHintReturnMask* mask = qstyleoption_cast<QStyleHintReturnMask*>(returnData))
{
static const int cornerRadius = 5;
QPainterPath path;
path.addRoundedRect(option->rect, cornerRadius, cornerRadius);
mask->region = QRegion(path.toFillPolygon().toPolygon()); // Unable to use QPolygonF ?
}
}
}
break;
//....
As a result, I get too angular corners:
Is there some global way to make smooth rounded tootips in Qt5?
You're giving border radius in em, try this style sheet:
QToolTip {
border: 2px solid darkkhaki;
padding: 5px;
border-radius: 10px;
opacity: 200;
}

How can I apply a custom theme?

I am using QtCreator to create a Qt Application in C++.
I know CSS and making themes for elements in my applications isn't too hard, but is there a way to make a file and apply it?
I've looked through the Qt Docs but I can't seem to find anything about such a thing.
Currently, I am styling each individual button and stuff but can I just put it all in a file and apply it to everything at once?
easy: you just create a file, e.g. style.myStyle
there you place the styles for all the widgets including events, attributes etc
then you load the file when the app starts and apply that to the app
here is an example how:
#include <QApplication>
#include <QFile>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QFile file("./style.myStyle");
file.open(QFile::ReadOnly);
QString styleSheet = QLatin1String(file.readAll());
a.setStyleSheet(styleSheet);
MainWindow w;
w.show();
return a.exec();
}
now in the style.myStyle file you can don what ever you want e.g.
QPushButton
{
background-color: white;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
min-height: 20em;
padding: 6px;
}
QPushButton:pressed
{
background-color: rgb(224, 0, 0);
border-style: inset;
}
QFrame, QLabel, QToolTip
{
border: 2px solid green;
border-radius: 2px;
padding: 1px;
}
that code produce a windows like this:
note:
don't forget to validate that the file exists etc etc

How to set :hover on QMenu?

I'm working with QT and I have a menu. I have the follwing css for the menu:
QMenu {
/* background-color: #0F7070;*/
background-color:rgb(44,63,80);
border-top: none;
border-left:none;
border-right:none;
border-bottom:4px solid rgb(44,205,112);;
color:#fff;;
}
QMenu::item {
spacing: 3px; /* spacing between menu bar items */
padding: 10px 85px 10px 20px;
background: transparent;
}
/*Does not work*/
QMenu::item:hover {
background-color: rgb(52,73,94);
border-top: none;
border-left:none;
border-bottom:none;
border-left:3px solid rgb(44,205,112);;
}
How can I set the :hover to the item? Thank you.
I had same issue few years ago with a QT project.
Even if it may look like conterintuitive i solved changing:
item:hover
to
item:selected
I was advised so on QT forum, in that contest :selected acted as :hover, i didn't get deeper in the question, maybe won't work, but it worth a try.
I intend to set the background color of the QWidget
QWidget {
background-color: white;
}
But later, when the menu QAction is selected, the font is white, and the background is also white.The menu button font and background can be reset in the following ways
QMenu::item:hover {}
to
QMenu::item:selected {}
This way works, thanks

QStyledItemDelegate custom colors for some elements

I have a QStyledItemDelegate with custom painting. Each item comprises some text and a progress bar. The progress bar is circular (radial) so it is custom-drawn too:
Also my application uses QSS for some custom styling.
This item delegate was used in a QListView.
I want be able to set different ProgressBar chunk colors for 100% and non-100% with QSS.
Question
Is there any way to know color for progress bar chunk for current QSS?
Investigation and code I've tried:
QSS:
QProgressBar { border: 1px solid #909090; ; }
QProgressBar[value="100"]::chunk {
width: 10px;
margin: 0.5px;
background-color: rgb(50,145,212);
}
QProgressBar::chunk {
width: 10px;
margin: 0.5px;
background-color: rgb(81,211,49);
}
C++:
QStyleOptionProgressBarV2 pbStyleOption;
{
boost::scoped_ptr<QProgressBar> pb(new QProgressBar());
pb->setStyle(QApplication::style());
pb->setStyleSheet(static_cast<QApplication*>(QApplication::instance())->styleSheet());
pb->setValue(progressPercentage);
pb->setMaximum(100);
pbStyleOption.initFrom(pb);
qDebug() << pbStyleOption.palette.brush(QPalette::Highlight);
}
I'm using QPalette::Highlight because I looked into Qt's source for styles and it uses this ColorRole for PE_IndicatorProgressChunk.
P.S.
QSS above works only for a slightly modified QProgressBar. The only modification is a reimplemented setValue(). Here is its code:
void StyledProgressBar::setValue(int val)
{
QProgressBar::setValue(val);
style()->unpolish(this);
style()->polish(this);
update();
}

Adding constraint to css file for a QWidget

I use a css file in my Qt Projets, with Visual Studio 2010.
main.cpp :
QApplication app(argc, argv);
// Mise en place du style CSS
QFile File("Resources/style.css");
File.open(QFile::ReadOnly);
QString styleSheet = File.readAll();
File.close();
app.setStyleSheet(styleSheet);
A part of my css file :
QWidget#contenuDescription {
background-color: rgb(0, 150, 255);
border: 2px solid rgb(0, 0, 255);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
QLabel#nom1 {
background-color: rgb(0, 150, 255);
font-size: 36px;
}
QLabel#nom2 {
background-color: rgb(0, 150, 255);
font-size: 24px;
}
QLabel#nom3 {
background-color: rgb(0, 150, 255);
font-size: 20px;
}
I want to change the color to my QLabels : nom1, nom2 and nom3 when bool m_changeColor == true.
I know we can use ::hover if we want to change the style sheet when the mouse is on the QLabel. Something like this does it exist for my problem ?
Thank you in advance for your answer.
You need to use properties:
Q_PROPERTY(bool changeColor ...)
Os set a property dynamically:
nom1Label->setProperty("changeColor", true);
Then in CSS:
QLabel#nom1[changeColor="true"] {
...
}
Also note:
Warning: If the value of the Qt property changes after the style sheet
has been set, it might be necessary to force a style sheet
recomputation. One way to achieve this is to unset the style sheet and
set it again.