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

mmesarina

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

vinb

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

mmesarina

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);

}

@

vinb

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

mmesarina

Hey thanks vinb, that fixed it!

-Malena

giesbert

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 :-)

sirius79

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 ;)

sirius79

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.