QSS problem on a QPushButton

[ber0y]

Hi, i have a problem using QSS on a QWidget.

I would like to display a image above the text of a QPushButton.
Actually my code is :

// Constructor() {
    setText("Push Button Text");
 
    QString styleSheet;
    styleSheet.append("QPushButton{");
    styleSheet.append("background-image: url(images/image.jpg);");
    styleSheet.append("background-repeat: no-repeat;");
    styleSheet.append("background-position: center;");
    styleSheet.append("}");
    setStyleSheet(styleSheet);
// }

// Constructor() {
    setText("Push Button Text");

    QString styleSheet;
    styleSheet.append("QPushButton{");
    styleSheet.append("background-image: url(images/image.jpg);");
    styleSheet.append("background-repeat: no-repeat;");
    styleSheet.append("background-position: center;");
    styleSheet.append("}");
    setStyleSheet(styleSheet);
// }

To copy to clipboard, switch view to plain text mode 

Because it's background-image, it's under the text...
If i change "background-image" to "image", the image does not appear !

how to put the image above the text, centered on the QPushButton please ? ?

[Lykurg]

It's not possible. Use QToolButton instead.

[ber0y]

Oh thanks...but sorry i would like to display a small image on a text, not above sorry !
i mean i would like to display the text, and at the same place, the small image on the text...

sorry for my english, i thought that it was "above" instead of "on" !

how can i do that please?

[Lykurg]

Your code works fine for me. Make sure, you don't replace the the style sheet anywhere else and that your path to the icon is valid. (If it is a resource you mitt the ":".)

[ber0y]

i only set the steel sheet here, in the constructor. My code works fine to display a image under a text, not the contrary (the text under the image) and that's my problem

[Lykurg]

i only set the steel sheet here, in the constructor. My code works fine to display a image under a text, not the contrary (the text under the image) and that's my problem

Ok, know I understand you right! Sorry, took some time...

That behavior you can't realize with css, you have to subclass QPushButton. But that's easy. Just modify the paint event like:

MyButton::paintEvent(QPaintEvent *event)
{
  QPushButton::paintEvent(event); // let Qt draw the regular button
  // and now just paint your image on the button (and text)
  QPixmap pixmap(":myPixmap.png");
  QPoint point = event->rect().center();
  point.translate(pixmap.rect().center() * (-1));
  QPainter p(this);
  p.drawPixmap(point, pixmap);
}

MyButton::paintEvent(QPaintEvent *event)
{
  QPushButton::paintEvent(event); // let Qt draw the regular button
  // and now just paint your image on the button (and text)
  QPixmap pixmap(":myPixmap.png");
  QPoint point = event->rect().center();
  point.translate(pixmap.rect().center() * (-1));
  QPainter p(this);
  p.drawPixmap(point, pixmap);
}

To copy to clipboard, switch view to plain text mode 

not tested but should work...

[ber0y]

That behavior you can't realize with css, you have to subclass QPushButton. But that's easy. Just modify the paint event like:

MyButton::paintEvent(QPaintEvent *event)
{
  QPoint point = event->rect().center();
  point.translate(pixmap.rect().center() * (-1));
}

MyButton::paintEvent(QPaintEvent *event)
{
  QPoint point = event->rect().center();
  point.translate(pixmap.rect().center() * (-1));
}

To copy to clipboard, switch view to plain text mode 

It's perfect ! Exactly what i wanted
Thanks!

Just a thing : QPoint does not have the method translate(), but i try to use setX and setY which allow to move the image i guess.

Thanks again


PS :This code works fine

void PushButtonPictured::paintEvent(QPaintEvent *event)
{
  QPushButton::paintEvent(event);
 
  QPixmap pixmap(m_imageFileName);
  QPoint point = (event->rect()).center();
  point.setX(point.x() - pixmap.rect().center().x());
  point.setY(point.y() - pixmap.rect().center().y());
 
  QPainter painter(this);
  painter.drawPixmap(point, pixmap);
}

void PushButtonPictured::paintEvent(QPaintEvent *event)
{
  QPushButton::paintEvent(event);

  QPixmap pixmap(m_imageFileName);
  QPoint point = (event->rect()).center();
  point.setX(point.x() - pixmap.rect().center().x());
  point.setY(point.y() - pixmap.rect().center().y());

  QPainter painter(this);
  painter.drawPixmap(point, pixmap);
}

To copy to clipboard, switch view to plain text mode