Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

setStyleSheet - What is it for?



  • Allo all,

    For example, I can call

    pedit=new QLineEdit(this);
    pedit->setGeometry(xEPosition1, yEPosition1+3*yEOffset1, pixelWidth, pixelHeight);
    pedit->setStyleSheet("QLineEdit { border: 1px solid #c8c8ff; border-radius: 3px;} ");
    

    This seems to change the look of the QLineEdit but it seems strange to send a string to an API to setup some states.

    Why don’t we have

    pedit->SetBorderThickness(1);
    pedit->SetSolidColor(variable);
    pedit->SetBorderRadius(3);
    

  • Moderators

    Qt application uses a QStyle instance to style its widgets. By default the app will create and use a native looking QStyle provided by platform appropriate style plugin.

    Apart from that Qt also has a QStyleSheetStyle (an internal class). This is a style that styles widgets via user defined properties similar to the CSS syntax from web development. A typical usage is that you provide a separate style file where you define properties for all widgets, their states and subcontrols, similarly as you would when creating a web page. This file would be loaded once and applied to the main application object instance via its setStyleSheet. It would then automatically propagate to all created widgets.

    That's one way to use it but you can also selectively apply smaller pieces of stylesheets to individual widgets, like in your example. This is similar to inline css styling directly within html. For similar reasons this is not the best way to use it, but an option non the less.

    So, to answer your questions - you don't have these individual setters on pedit because the widget itself doesn't have those properties, so there's nothing to set there. The line edit itself doesn't store or even know what thickness the border is, what color it has etc. In its paint event it just calls the style method and basically says "hey style, here's a rectangle and a painter. Please paint this rectangle as if it was a line edit". The style then does the rest and paints that rectangle according to rules it was given via that string. When you call setStyleSheet on a widget the only property of it that you're changing is the style it uses. You're changing it from the default native style to the stylesheet style and initialize that style object with supplied string.

    For performance reasons it's best to avoid such small inline stylesheets. Internally the string is parsed and resulting properties are cached within the style object. Whenever you change the stylesheet it needs to be re-parsed and re-evaluated, which is not a terribly fast operation as you can imagine. If you need to change a look of a control it's better to create a stylesheet that changes the look based on some property of the widget and then only change that property. Most common widget properties are supported out of the box but you can also create custom dynamic properties if you need to.



  • Thanks for the answer.

    Yes, I’ve noticed that it looks like CSS although I’ve never done such web programming.
    I guess it is good for someone who knows CSS but it isn’t appropriate for application programmers.
    I had to search the web to figure out what I am suppose to give to setStyleSheet() and go through a few pages.

    “For performance reasons it's best to avoid such small inline stylesheets.”

    ==I don’t think I have a choice. It is only the style of QLineEdit and QPushButton that I want to change.
    I am only doing this since for some reason, when I run my app on Linuxes where Qt Creator is not installed, the QLineEdit does not have an entourage.
    They just look like white rectangles and it is hard to see them.
    I work on Kubuntu 20.10 and I test on Kubuntu 18.04 and Kubuntu 20.10 and others.

    As for the QPushButton, the height of the buttons were not right or something. They looked too short. The call to setStyleSheet() helped with this one.

    I don’t need anything custom and dynamic.
    The program just needs to start and just look good.


  • Moderators

    @stretchthebits said:

    I had to search the web to figure out what I am suppose to give to setStyleSheet() and go through a few pages.

    The syntax is described here and a reference for each widget are listed here.

    I don’t think I have a choice.

    You do. You can decide not to use stylesheets ;)

    the QLineEdit does not have an entourage

    Maybe its frame was turned off?

    As for the QPushButton, the height of the buttons were not right or something

    Make sure they are in a proper layout. Also you can change the min/max height of a button, for example setMinimumHeight.



  • I looked at those pages but apparently, that wasn’t enough for me.
    I was calling
    pedit->setStyleSheet(some string)
    and nothing was happening.

    so I guess there were run time errors.
    That’s the problem. If the string I give to setStyleSheet() is bad, can it tell me it is bad and which word in the string is bad?

    Another problem is that the code would compile. The C++ compiler cannot analyze the text I gave to setStyleSheet().

    For example, if I write
    pedit=new QineEdit(this);

    the compiler would tell me there is a problem with that line.
    I get rid of a lot of typing mistakes this way: missing colon and missing parenthesis and much more.

    @Chris-Kawa said in setStyleSheet - What is it for?:

    Maybe its frame was turned off?

    I turned on the frame with a member function call. I think it was
    pedit->setFrame........
    but it had no effect.
    then, when I started to use setStyleSheet() and this had a real effect on how the edit boxes looked.

    Thanks for the setMinimumHeight(). I wasn’t aware of that function. Perhaps it would have solved the button height issue.



  • @stretchthebits
    The answer to all of this is, I'm afraid, no, Qt will neither tell you if there is a mistake in your stylesheet, nor if there is where it lies. In common with, say, HTML page handling, badly formed style directives are simply ignored by the engine.

    On an HTML page in a browser, like Chrome, there are nice "Developer Tools" which allow you to interactively investigate your styles and play with them responsively. Sadly I am aware that Qt does not offer such an interactive examiner, which I miss, but that's how it is.



  • @JonB said in setStyleSheet - What is it for?:

    Sadly I am aware that Qt does not offer such an interactive examiner, which I miss, but that's how it is.

    At least in QtDesigner's Stylesheet "mode", "tab" or whatever it is, it checks if your stylesheet string is a valid stylesheet but unfortunately this does not work dynamically when changing stylesheet in your code (only for preset styles in QtDesigner).



  • @Pl45m4
    I understand what you are saying, and that is a good point. At least the OP might consider pasting any dynamic stylesheet used at run-time into that box to see what Designer makes of it, better than nothing.

    However, for the record, this is nothing like/to do with what I was talking about using in a web browser. All the browsers offer "Development Tools" interface. That does something totally different: you can view and click your page, either visually or in HTML, and be shown where the elements are, and what styles from where are being applied/overridden. Even nicer, you can interactively check/uncheck boxes for each and every individual style attribute on every element to see its effect, you can modify the styles while you are looking at them and see the response, etc. Fully interactive.

    As someone who did HTML/JS/CSS for years, I found this an invaluable tool in getting my layouts, styles and so on sorted out. I have thought for years how nice it would be if Qt offered something similar and friendly for its desktop widgets and styles, but did not find anything acceptable.


  • Lifetime Qt Champion

    @JonB
    Hi
    Just as a note.
    https://doc.qt.io/GammaRay/
    does add a sort of "Developer Tools" to Qt.



  • @mrjj
    I thought someone was going to say this! And again a good point :)

    However, I tried to use that a while ago, and just didn't get anywhere. I don't quite recall why. Was it way too big and complicated complicated? Did it just not install or work for me? Did it not work when I was programming in Python/PyQt?

    So, honest answer: Do you use it? Regularly? :)


  • Lifetime Qt Champion

    @JonB
    Nope. Didn't really uses it as it wants cmake... and I agree way too complicated to get running but does provide
    a huge array of tools.
    If it was build into Creator (not sure thats even possible) it would be another story.

    Edit:
    They do supply prebuilds now so maybe its easier than before.



  • @JonB said in setStyleSheet - What is it for?:

    However, for the record, this is nothing like/to do with what I was talking about using in a web browser. All the browsers offer "Development Tools" interface. That does something totally different: you can view and click your page, either visually or in HTML, and be shown where the elements are, and what styles from where are being applied/overridden. Even nicer, you can interactively check/uncheck boxes for each and every individual style attribute on every element to see its effect, you can modify the styles while you are looking at them and see the response, etc. Fully interactive.
    As someone who did HTML/JS/CSS for years, I found this an invaluable tool in getting my layouts, styles and so on sorted out. I have thought for years how nice it would be if Qt offered something similar and friendly for its desktop widgets and styles, but did not find anything acceptable.

    Yeah true, but integrating such feature would make the IDE much more "complex".
    I'm thinking of something like the Qt::Color behavior in QtCreator: If you hover over a valid QColor string / enum value, a label appears, showing the corresponding color. That would be awesome to have with QWidget styles. So that a new window / popup shows up, showing what you can expect from your code (matching the widget you are using the stylesheet on).



  • @Pl45m4 said in setStyleSheet - What is it for?:

    Yeah true, but integrating such feature would make the IDE much more "complex".

    I don't mean to harp on. But again for the record I --- and probably the OP --- am interested in runtime support for such features, not (particularly) design-time. Like @mrjj's GammaRay or a web browser provides. 'Nuff said :)


Log in to reply