Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Background image changes all my widgets appearance.
Forum Updated to NodeBB v4.3 + New Features

Background image changes all my widgets appearance.

Scheduled Pinned Locked Moved Unsolved General and Desktop
5 Posts 3 Posters 1.8k Views 1 Watching
  • 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 Offline
    R Offline
    Retourned
    wrote on last edited by Retourned
    #1

    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
    0
    • B Offline
      B Offline
      Bonnie
      wrote on last edited by
      #2

      Add ID selector to your style sheet

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

        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
        1
        • B Bonnie

          Add ID selector to your style sheet

          #ObjectName{
          background-image: url(:/images/background.jpg);
          }
          
          R Offline
          R Offline
          Retourned
          wrote on last edited by
          #4

          @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
          0
          • R Retourned

            @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 Offline
            B Offline
            Bonnie
            wrote on last edited by Bonnie
            #5

            @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
            2

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved