Adding constraint to css file for a QWidget - c++

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.

Related

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

Header Stylesheet is not working for QTableView

I have following stylesheet for table.
QHeaderView::section, *[role="mockheader"]
{
min-width:80px;
background-color:#3949ab;
color:#FFFFFF;
border:0px;
outline:none;
height:40px;
}
QHeaderView::section:checked, QHeaderView::section:hover
{
background-color: #3949ab;
color:white;
}
QTableView
{
show-decoration-selected: 1;
border:0px;
background-color: rgba(0, 0, 0, 0);
gridline-color:#454545;
color: #FFFFF8;
}
QTableView::item
{
border: 0px;
min-height:35px;
padding:5px;
color:#FFFFFF;
}
QTableView::item:hover
{
background-color: rgba(255,255,255, 50);
}
QTableView::item:selected
{
background-color: #3949ab;
}
Ideally it should paint header in blue color. it is seems unaffected. see attached snap.
*Left blue space is label, which i added for filling left space. Its not a part of table. Just leave it.
I am not able to figure out any problem in my stylehseet. Please let me know what I am doing wrong here.

Unable to set stylesheet properties using qss file

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.

Ionic 2 - Slides how to change pagination progress color?

I have slide where I set the paginationStyle="progress" how can I change the color of the progressbar?
<ion-slides #exercisesSlider pager paginationType="progress">
Could somebody provide me a way to change the color of the progressbar?
Ionic uses Swiper API slides. So you can select using class names swiper-pagination-progress and swiper-pagination-progressbar like this:
.swiper-pagination-progress .swiper-pagination-progressbar {
background:red;
}
Using only the CSS borders worked for me :
.swiper-pagination-progressbar-fill {
border: 2px solid rgba(175, 240, 122, 0.719);
border-radius: 5px;
}
.swiper-pagination-progressbar {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
}
Simple and maybe obvious follow up from the answer from #Surya Teja . If you separate the classes you can control which color for each part of the progress bar.
.swiper.pagination-progress {
background-color: red
}
.swiper-pagination-progressbar {
background-color: white
}

How to adjust a QSlider's handle?

I'm writing an app for a touchscreen, and the default handle is too small to grab reliably, so I want to make it bigger. According to the official documentation, several answers on SE, and a couple of other forums, this ought to work in a QWidget's constructor:
sliderGrandMaster = new QSlider(Qt::Vertical, panelRight);
sliderGrandMaster->setGeometry( appdata->buttonBorder , //Left
buttonTopRight + appdata->buttonBorder , //Top
halfwidth - (2 * appdata->buttonBorder), //Width
buttonRemainingHeight - (2 * appdata->buttonBorder)); //Height
sliderGrandMaster->setRange(0, RANGE_MAX);
sliderGrandMaster->setTickInterval(RANGE_MAX / 10);
sliderGrandMaster->setTickPosition(QSlider::TicksBothSides);
QString temp = QString("handle:vertical { background: green; height: %1px; margin: 0 -%2px; }")
.arg(buttonRemainingHeight / 5)
.arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);
But it seems to have no effect. The handle is the same small size regardless of what values I put in the stylesheet, and it's not even green.
With my values at runtime, temp ends up being handle:vertical { background: green; height: 66px; margin: 0 -32px; }. The size of the slider is 94px wide by 331px tall.
Am I missing something?
Edit:
This:
QString temp = QString("QSlider::handle { background: green; height: %1px; width: %1px; margin: 0 -%2px; }")
.arg(buttonRemainingHeight / 5)
.arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);
at least got it green. But the size is still wrong. Qt version 5.4.2
You can change the size of the handle just with a simple stylesheet. Example :
Is done with the following stylesheet :
QSlider::groove:horizontal
{
border:none;
margin-top: 10px;
margin-bottom: 10px;
height: 10px;
}
QSlider::sub-page
{
background: rgb(164, 192, 2);
}
QSlider::add-page
{
background: rgb(70, 70, 70);
}
QSlider::handle
{
background: white;
border: 3px solid black;
width: 60px; // **Change the width here**
margin: -30px 0;
}
Ok, using Qt 5.6.1 I got some progress on this. The following code
QSlider* slider = new QSlider(this);
slider->setOrientation(Qt::Horizontal);
slider->setStyleSheet("QSlider::groove:horizontal { "
"border: 1px solid #999999; "
"height: 20px; "
"background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); "
"margin: 2px 0; "
"} "
"QSlider::handle:horizontal { "
"background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f); "
"border: 1px solid #5c5c5c; "
"width: 30px; "
"margin: -2px 0px; "
"} ");
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(slider);
layout->addWidget(new QSlider(Qt::Horizontal, this));
setLayout(layout);
may be placed into an emty QWidget to work. It simply adds two QSliders, one of which is modified using a style sheet.
As you may see, I used to change the groove too and it is working as intended. But there are strange issues which could be a bug at all. Try commenting out some properties of the groove style sheet, like border, background and margin. If there are no effective properties, the width property of the handle is dropped. As I cannot find any constraint in the documentation, I wonder why this happens.
Also note the issues drawing the border around the handle. Seems to need some more fine tuning. ;)
Summing things up the quick solution for you should be added some default properties for the groove.