CODEWITHSUNDEEP
qtpathqcheckbox
nimbus_debug
nimbus_debug

Reputation: 650

how to change the color of tick in QCheckBox widget?

I want to change the color of TICK in the QCheckBox from black into dark blue, I tried QSS, but it doesn't work:

QCheckBox {
  background-color:blue;
  color:blue;
}

Using QSS only change the background color, but I want to change the color of the tick.

Should I have to overload its paintEvent to Do It?

thanks.

－－－－－－－－－－－

now I am trying QSS to solve it,

 QCheckBox {
   spacing: 5px;
}

 QCheckBox::indicator {
 width: 13px;
 height: 13px;
 }

 QCheckBox::indicator:unchecked {
   image: url(:/images/checkbox_unchecked.png);
 }

 QCheckBox::indicator:unchecked:hover {
   image: url(:/images/checkbox_unchecked_hover.png);
 }

 QCheckBox::indicator:unchecked:pressed {
   image: url(:/images/checkbox_unchecked_pressed.png);
 }

 QCheckBox::indicator:checked {
   image: url(:/images/checkbox_checked.png);
 }

 QCheckBox::indicator:checked:hover {
   image: url(:/images/checkbox_checked_hover.png);
 }

 QCheckBox::indicator:checked:pressed {
   image: url(:/images/checkbox_checked_pressed.png);
 }

 QCheckBox::indicator:indeterminate:hover {
   image: url(:/images/checkbox_indeterminate_hover.png);
 }

 QCheckBox::indicator:indeterminate:pressed {
   image: url(:/images/checkbox_indeterminate_pressed.png);
 }

this is a qss example from Qt ref, how do I get the PATH ? what does ":" mean?

Upvotes: 1

Views: 8483

Answers (1)

phyatt
phyatt

Reputation: 19142

Paths in StyleSheets (and in Qt in general)

:/images/checkbox_checked.png

The PATHs in use in the qstylesheet reference are resource files. When you create a resource file in Qt Creator, it allows you to store images in a built in directory that gets compiled into your exe.

So :/ is the root of this resource path in the exe.

http://qt-project.org/doc/qt-4.8/resources.html

I don't think you can get the PATH of your exe from inside a QStyleSheet. You can put it in at runtime, by building your QStyleSheet at runtime with something like:

widget->setStyleSheet(QString("first part of stylesheet") 
    + path_string + QString("another part of stylesheet"));

The way you probably should handle this is to use relative paths. So instead of :/images/image.png, you could have ./images/image.png, where the folder "images" resides next to your exe.

./application/application.exe
./application/images/image.png

And that is how relative paths work.

Also you should note that the working path is probably what is checked, not the application directory:

QDir::currentPath();

http://qt-project.org/doc/qt-5.0/qtcore/qdir.html#setCurrent

http://en.wikipedia.org/wiki/Working_directory

If your working directory (or in other words, the folder that your exe is ran from) is different from your exe's actual path, you will need to place your images folder in a different directory, for them to be found.

You can also use the . and .. notations to describe how to go up and down in the working directory to find a folder or file. . means the current directory, and .. means one directory up closer to the root.

Read the docs on QDir and QApplication in the static methods for more information on how to get the application directory and the current working directory.

Sometimes I'll put this line in my code and look at the output to see the working directory:

system("dir"); // for windows

or 

system("pwd"); // for linux/mac

What does : mean?

Also, the : in a QStyleSheet is referencing a sub component or a property of the item to the immediate left. It behaves almost identically to css, but in css it is a . instead.

So it is something like:

MyClassName::component-of-class:property-of-component:option-of-property
{
    property-of-option: setting-for-that-options-property;
}

Kind of like drilling down a big tree of settings. You can visualize a lot of them by digging around in Qt Designer on the properties pane.

Hope that helps.

Upvotes: 3

Related Questions