Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Unsolved Background image changes all my widgets appearance.

    General and Desktop
    3
    5
    573
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      Retourned last edited by Retourned

      Hi guys,

      First of all sorry for my english, I can speak it but definitely I am not a professional. I am using QT + Python (Pyside2) on Mac OSX. Anyway, I don't think my problem has relation with my operating system or programming language.

      I need to put a background image to some windows of my project, and I've created them. I created a .qrc file, added the images there, the paths are correct, etc. I compiled the .qrc and used the images on the Designer, more specifically in the Stylesheets of the main QWidget.

      I pressed "Add resource --> Background Image --> Select the image", and when I preview the window the background image is here BUT every button, text field, slider, etc, is affected by this background. I mean, the buttons don't keep their design, the slider changes his color a bit, the text fields change their appearance...

      And of course when I run the program, these strange things are there. I will show you some examples:

      When the image is not placed:

      Captura de pantalla 2020-05-21 a las 10.45.08.png

      As you can see, the central button is blue, etc. It has kinda a "modern" design, the widgets I mean. But when I put the image in the background, following the steps QT recommend:

      Captura de pantalla 2020-05-21 a las 10.44.44.png

      You can see the central selector is more squared, the buttons don't keep their color, they have more squared form... etc

      How can I solve this? I am literally going crazy, 2 days trying to solve this, because this affect me in every window.

      Thank you in advance.

      1 Reply Last reply Reply Quote 0
      • B
        Bonnie last edited by

        Add ID selector to your style sheet

        #ObjectName{
        background-image: url(:/images/background.jpg);
        }
        
        R 1 Reply Last reply Reply Quote 2
        • mrjj
          mrjj Lifetime Qt Champion last edited by mrjj

          Hi
          Its important to understand stylesheets are cascading -
          meaning it will affect the parent and all its children.

          So as @Bonnie shows, one has to limit what widgets that should be affected and for that the programmer
          can use widgets name ( the # syntax ) and also its type like

          QLabel {....}
          or both 
          QLabel#mylabel {....} 
          
          1 Reply Last reply Reply Quote 1
          • R
            Retourned @Bonnie last edited by

            @Bonnie @mrjj So, talking about backgrounds, I just should put it for example like that, right?:

            QWidget#centralwidget{
            background-image: url(:/resources/Imagenes/fondoPrincipal.png);
            }

            B 1 Reply Last reply Reply Quote 0
            • B
              Bonnie @Retourned last edited by Bonnie

              @Retourned

              1. You don't need to write "QWidget" because any widget is a QWidget.
                Type selector in style sheet is more useful for subclass of QWidget.
                But if you want to match a QWidget exactly, not any subclass, you can use ".QWidget".
              2. You need to make sure that there won't be any child widget having the same object name.
              1 Reply Last reply Reply Quote 2
              • First post
                Last post