Background-image of MainWindow widget is overriding background image of child components



  • Hi,

    I set the stylesheet "background-image" of my MainWindow widget to a *.png to set the background of my main widget. But now all the components (e.g. QLabel and QPressButton) that I add to the main MainWindow show as background the same *.png, even after I set the components style to display a color wiht setStyleSheet("background-color: ...") .Does anyone know why this is happening? Why would the child components inherit the background image of the parent widget?

    and if that is the case, how can i then change the background of the child components to be set to a color?

    thanks

    -Malena



  • where do you put the code?
    Do you use creater or you write the code manualy?



  • Code:

    Here the MainWindow background-image is set to image.png

    @
    MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent), ui(new Ui::MainWindow)
    {
    ui->setupUi(this);
    setStyleSheet("background-image: url(:/images/image.png)");
    //updateImage();
    setContextMenuPolicy(Qt::NoContextMenu);
    // Create stack

    stackedWidget = new QStackedWidget(this);
    stackedWidget->setContextMenuPolicy(Qt::NoContextMenu);
    
    //Create first active widget
    TNotesWidget *firstWidget = new TNotesWidget (stackedWidget);
    
    
    // Add to stacked widget
    
    stackedWidget-> addWidget(firstWidget);
    
    // Add stack as a central widget to QMainWindow
    setCentralWidget(stackedWidget);
    

    }

    @

    In the TNotesWidget , which is the current widget in the stackedWidget, I add the QPushButtons.
    These QPushButtons display the same background-image set in the MainWindow::MainWindow constructor.
    The "navigator" widget is a custom component. I creat a horizontal layout called "hlayout1" and I add a QLabel, and QPushButton to it. The QLabel and QPushButton display the same background image that was set in the MainWindow constructor.I don't know why.

    @

    TNotesWidget::TNotesWidget(QStackedWidget *stackedWidget, QWidget *parent): BaseWidget(stackedWidget,parent)
    {

    // Vertical layout
    

    // setStyleSheet("background-image: url(:/images/image.png)");

    QVBoxLayout *extLayout = new QVBoxLayout;
    QHBoxLayout *hlayout1 = new QHBoxLayout;
    //QVBoxLayout *vlayout2 = new QVBoxLayout;
    
    MyNavigatorWidget *navigator = new MyNavigatorWidget();
    
    //Create navigator items
    QLabel *title = new QLabel("Tasting Notes");
    title->setStyleSheet("background-color: rgb(124,125,127); font-family: Courier; font-weight: bold; font-style: normal");
    
    
    
    QPushButton *editButton = new QPushButton("Edit");
    editButton->setFlat(true);
    editButton->setAutoFillBackground(true);
    editButton->setFocusPolicy(Qt::NoFocus);
    editButton->setStyleSheet("background-color: lightgray; border-width: 0px; margin: 4; border-radius: 5px; border-style: outset");
    
    
    
    hlayout1->insertSpacing(0,90);
    hlayout1->addWidget(title);
    hlayout1->insertSpacing(150,60);
    hlayout1->addWidget(editButton);
    navigator->setLayout(hlayout1);
    
    navigator->repaint();
    
    
    //Create List and Items
    
    QListWidget *myListWidget = new QListWidget();
    myListWidget->setStyleSheet("border-style: none; border-width: 0px");
    
    // Add handlers for the myListWidget
    QObject::connect(myListWidget, SIGNAL(itemClicked(QListWidgetItem *)), this, SLOT (MainViewHandler(QListWidgetItem *)));
    
    
    myListWidget->setItemDelegate(new ListDelegate(myListWidget));
    
    // WINE
    QListWidgetItem *item = new QListWidgetItem();
    // Code below adds image to each item
    // better to do this in Delegate because
    // all items have the same icon
    //QPixmap pixmap(":/images/arrow.png");
    //QIcon ic(pixmap);
    //QVariant v(QMetaType::QIcon, &ic);
    //item->setData(Qt::UserRole + 3, v);
    
    item->setData(Qt::DisplayRole, "Wines");
    //item->setData(Qt::UserRole + 1, "Description");
    myListWidget->addItem(item);
    
    // BEER
    QListWidgetItem *item2 = new QListWidgetItem();
    item2->setData(Qt::DisplayRole, "Beer");
    myListWidget->addItem(item2);
    
    
    
    
    // Add the Navigator and ListWidget to the vertical extLayout
    // Set the external layout as the main layout for this TNotesWidget view
    //vlayout2->addWidget(myListWidget);
    extLayout->setMargin(0);
    extLayout->addWidget(navigator);
    //extLayout->addLayout(vlayout2);
    extLayout->addWidget(myListWidget);
    setLayout(extLayout);
    

    }

    @



  • look at "this":http://doc.qt.nokia.com/4.7/stylesheet-examples.html

    try this
    @
    qApp->setStyleSheet("QPushButton { background-color: yellow }");
    @
    this sets all your buttons in your app to yellow put it in your main constructor



  • Hey thanks vinb, that fixed it!

    -Malena



  • if you only want the background image on the main windows, you have to specify a selector of the style sheet.

    @
    MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent), ui(new Ui::MainWindow)
    {
    ui->setupUi(this);
    setStyleSheet("MainWindow {background-image: url(:/images/image.png);}");
    ...
    }
    @

    Then it should only be used on objects of the class MainWindow.
    Otherwise iT's used for all widgets (including childs) of this widget :-)



  • Thanks for the post! Perfect answer to my question - except for some white pixels.

    Does anybody know what makes the thin white frame around the MainWindow?
    When I use the above solution with my MainWindow,

    @ setStyleSheet("MainWindow {border-image: url(:/images/background); };"); @

    instead of

    @ setStyleSheet("border-image: url(:/images/background); "); @

    I get a small white frame around the background. This happens only for MainWindow, for all pop-up windows etc. it works just fine.

    Clarification - I use

    @ QMainWindow::centralWidget()->layout()->setContentsMargins(0,0,0,0); @

    to remove the border. If I don't do this, there is a white rectangle 5 pixels from the border of the image that I would like to remove still. What is this?

    How can I fix this ? - It looks ugly ;)



  • Found the solution myself. I have everything contained in a frame that causes the white border

    ui->frame->setStyleSheet("QFrame {border-image: url(:/images/background); }");

    Fixes it.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.