Results 1 to 4 of 4

Thread: Qt stylesheet QPushButon example

  1. #1
    Join Date
    Nov 2010
    Location
    Zawiercie, Poland
    Posts
    12
    Qt products
    Qt4
    Platforms
    Unix/X11

    Question Qt stylesheet QPushButon example

    Hello everybody.

    Could anyone who knows perfect stylesheets can give me a little example of setting standard icons in stylesheet on QPushbutton?

    I try used something like this but this doesn't work:
    Qt Code:
    1. font: 75 28pt \"Serif\";
    2. background-color: BROWN;
    3. icon-size: 32px;
    4. border-image: backward-icon;
    5. }
    To copy to clipboard, switch view to plain text mode 

    First: I don't know how to use default icons from Qt in stylesheets and I'm weak with styles, so please forgive me.
    Second: I want to have a button which will blinking in other color when it has a focus.
    To do this I used simple method - setting background-color in stylesheet and QTimer timeout signal.
    Is there are better way to achive this?

    Please can somebody give me an example of using standard icons (theese from QStyle) in stylesheets?

    Thank you.
    Regards.

  2. #2
    Join Date
    Apr 2011
    Location
    Russia
    Posts
    85
    Thanks
    2
    Thanked 13 Times in 13 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Qt stylesheet QPushButon example

    Try different values "0 -75 0 0" and "padding-left: 75px"
    Qt Code:
    1. "QPushButton {"
    2. "font: 75 28pt \"Serif\";"
    3. "background-color: BROWN;"
    4. "border-image: url(:images/image.png) 0 -75 0 0;"
    5. "padding-left: 75px;"
    6. "}"
    To copy to clipboard, switch view to plain text mode 

  3. #3
    Join Date
    Nov 2010
    Location
    Zawiercie, Poland
    Posts
    12
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Qt stylesheet QPushButon example

    Thanks,

    But is it possible to use for example this icon QStyle::SP_ArrowBack in stylesheet? And how?

    Regards.

    Hello again,

    I have another question.
    I can use method setIcon() to setting the icon for button but I have a little problem with changing the background color for the button with icon.
    Without the icon the text on the button didn't move a little to right - it's stays on one position but with the icon when I change background it seems that text on button move a little in right.

    Here is the full example demostrating my issue.
    A simple class:
    Qt Code:
    1. #ifndef MAINWINDOW_H
    2. #define MAINWINDOW_H
    3.  
    4. #include <QMainWindow>
    5. #include <QStringList>
    6. #include <QTimer>
    7.  
    8. #include <QCommonStyle>
    9.  
    10. namespace Ui {
    11. class MainWindow;
    12. }
    13.  
    14. class MainWindow : public QMainWindow {
    15. Q_OBJECT
    16. public:
    17. MainWindow(QWidget *parent = 0);
    18. ~MainWindow();
    19.  
    20. protected:
    21. void changeEvent(QEvent *e);
    22.  
    23. private slots:
    24. void sColorTimerTimeout();
    25.  
    26. private:
    27. void startColorTimer();
    28. void stopColorTimer();
    29. Ui::MainWindow *ui;
    30.  
    31. QTimer colorTimer;
    32. QList<QStringList> colorsStyleSheets;
    33. };
    34.  
    35. #endif // MAINWINDOW_H
    To copy to clipboard, switch view to plain text mode 
    Qt Code:
    1. #include "mainwindow.h"
    2. #include "ui_mainwindow.h"
    3.  
    4. MainWindow::MainWindow(QWidget *parent) :
    5. QMainWindow(parent),
    6. ui(new Ui::MainWindow)
    7. {
    8. ui->setupUi(this);
    9.  
    10. QCommonStyle style;
    11. ui->pushButtonBack->setIcon(style.standardIcon(QStyle::SP_ArrowBack));
    12. ui->pushButtonSend->setIcon(style.standardIcon(QStyle::SP_DialogOkButton));
    13.  
    14. list.append("QPushButton { font: 75 28pt \"Serif\"; }");
    15. list.append("QPushButton { font: 75 28pt \"Serif\"; background-color: brown; }");
    16. colorsStyleSheets.append(list);
    17. colorsStyleSheets.append(list);
    18.  
    19. connect(&colorTimer, SIGNAL(timeout()), this, SLOT(sColorTimerTimeout()));
    20. startColorTimer();
    21. }
    22.  
    23. MainWindow::~MainWindow()
    24. {
    25. delete ui;
    26. }
    27.  
    28. void MainWindow::changeEvent(QEvent *e)
    29. {
    30. QMainWindow::changeEvent(e);
    31. switch (e->type()) {
    32. case QEvent::LanguageChange:
    33. ui->retranslateUi(this);
    34. break;
    35. default:
    36. break;
    37. }
    38. }
    39.  
    40. void MainWindow::startColorTimer() {
    41. QWidget* twid = this->focusWidget();
    42. if(twid == ui->pushButtonBack)
    43. twid->setStyleSheet(colorsStyleSheets.at(0).at(1));
    44. else if(twid == ui->pushButtonSend)
    45. twid->setStyleSheet(colorsStyleSheets.at(1).at(1));
    46.  
    47. colorTimer.start(500);
    48. }
    49.  
    50. void MainWindow::stopColorTimer() {
    51. colorTimer.stop();
    52. }
    53.  
    54. void MainWindow::sColorTimerTimeout() {
    55. QWidget* twid = this->focusWidget();
    56. QStringList tlist;
    57. int idx = -1;
    58. if(twid == ui->pushButtonBack)
    59. tlist = colorsStyleSheets.at(0);
    60. else if(twid == ui->pushButtonSend)
    61. tlist = colorsStyleSheets.at(1);
    62. if(twid == ui->pushButtonBack || twid == ui->pushButtonSend) {
    63. idx = tlist.indexOf(twid->styleSheet());
    64. idx++;
    65. if(idx >= tlist.size())
    66. idx = 0;
    67. twid->setStyleSheet(tlist.at(idx));
    68. }
    69. }
    To copy to clipboard, switch view to plain text mode 

    Do I have to set more options in stylesheet when I changing the background of the buttons?


    Added after 10 minutes:


    I want to have blinking button with icon when its get focus without moving text in right and back.

    Thank you.


    Added after 6 minutes:


    One more thing:
    In qtcreator when I start the application I get few messages:
    couldn't create image from ""
    With what are associated?
    Last edited by _franko_; 27th July 2011 at 10:05.

  4. #4
    Join Date
    Nov 2010
    Location
    Zawiercie, Poland
    Posts
    12
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Qt stylesheet QPushButon example

    It seems that no one can give me a simple answer on theese questions.
    Anyway I found some solutions.

    One more thing:
    In qtcreator when I start the application I get few messages:
    couldn't create image from ""
    With what are associated?
    It found out that the above messages are printed because in linux system are missing some images (I suppose). When I changed desktop theme the warning messages disapeared.

    I want to have blinking button with icon when its get focus without moving text in right and back.
    Changing only background color with stylesheet makes that any other widgets properties are initialized with default values. I had to change all other necessary properties. Unfortunately it wasn't so easy as I thought and I still barely understand CSS and Qt.

    I hope that below code will help others which will have similiar problems with buttons and stylesheet.

    Regards

    Qt Code:
    1. #include "mainwindow.h"
    2. #include "ui_mainwindow.h"
    3.  
    4. MainWindow::MainWindow(QWidget *parent) :
    5. QMainWindow(parent),
    6. ui(new Ui::MainWindow)
    7. {
    8. ui->setupUi(this);
    9.  
    10. QCommonStyle style;
    11. ui->pushButtonBack->setIcon(style.standardIcon(QStyle::SP_ArrowBack));
    12. ui->pushButtonSend->setIcon(style.standardIcon(QStyle::SP_DialogOkButton));
    13.  
    14. QPalette palbut = ui->pushButtonBack->palette();
    15.  
    16. QPalette palyellow(QColor("yellow"));
    17. list.append("QPushButton { font: 75 28pt \"Serif\"; border-width: 1px; border-radius: 5px; border-style: solid; border-color: "+getRGBhexColor(palbut.shadow().color())+"; "
    18. "background-color: qlineargradient(x1: 0, y1: 0, x2: 0.25, y2: 1, stop: 0.35 "+getRGBhexColor(palbut.light().color())+", stop: 1 "+getRGBhexColor(palbut.dark().color())+") }"
    19. "QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 "+getRGBhexColor(palbut.dark().color())+", stop: 1 "+getRGBhexColor(palbut.light().color())+"); }");
    20. list.append("QPushButton { font: 75 28pt \"Serif\"; border: 1px solid "+getRGBhexColor(palyellow.shadow().color())+"; border-radius: 5px;"
    21. "background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.35 "+getRGBhexColor(palyellow.button().color())+", stop: 1 "+getRGBhexColor(palyellow.shadow().color())+"); min-width: 10px; }"
    22. "QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 "+getRGBhexColor(palyellow.dark().color())+", stop: 1 "+getRGBhexColor(palyellow.light().color())+"); }"
    23. // "QPushButton:flat { border: none; }"
    24. // "QPushButton:default { border-color: navy; }"
    25. );
    26.  
    27. colorsStyleSheets.append(list);
    28. colorsStyleSheets.append(list);
    29.  
    30. connect(&colorTimer, SIGNAL(timeout()), this, SLOT(sColorTimerTimeout()));
    31. startColorTimer();
    32. }
    33.  
    34. MainWindow::~MainWindow()
    35. {
    36. delete ui;
    37. }
    38.  
    39. void MainWindow::changeEvent(QEvent *e)
    40. {
    41. QMainWindow::changeEvent(e);
    42. switch (e->type()) {
    43. case QEvent::LanguageChange:
    44. ui->retranslateUi(this);
    45. break;
    46. default:
    47. break;
    48. }
    49. }
    50.  
    51. void MainWindow::startColorTimer() {
    52. QWidget* twid = this->focusWidget();
    53. if(twid == ui->pushButtonBack)
    54. twid->setStyleSheet(colorsStyleSheets.at(0).at(1));
    55. else if(twid == ui->pushButtonSend)
    56. twid->setStyleSheet(colorsStyleSheets.at(1).at(1));
    57.  
    58. colorTimer.start(1000);
    59. }
    60.  
    61. void MainWindow::stopColorTimer() {
    62. colorTimer.stop();
    63. }
    64.  
    65. void MainWindow::sColorTimerTimeout() {
    66. QWidget* twid = this->focusWidget();
    67. QStringList tlist;
    68. int idx = -1;
    69. if(twid == ui->pushButtonBack)
    70. tlist = colorsStyleSheets.at(0);
    71. else if(twid == ui->pushButtonSend)
    72. tlist = colorsStyleSheets.at(1);
    73. if(twid == ui->pushButtonBack || twid == ui->pushButtonSend) {
    74. QPushButton* tpb = qobject_cast<QPushButton*>(twid);
    75. tpb->setFlat(false);
    76. idx = tlist.indexOf(twid->styleSheet());
    77. idx++;
    78. if(idx >= tlist.size())
    79. idx = 0;
    80. twid->setStyleSheet(tlist.at(idx));
    81. }
    82. }
    83.  
    84. QString MainWindow::getRGBhexColor(const QColor color) {
    85. QString col("#");
    86. qDebug("red: %x", color.red());
    87. if(color.red() == 0)
    88. col.append("00");
    89. else
    90. col.append(QString::number(color.red(), 16));
    91. qDebug("green: %x", color.green());
    92. if(color.green() == 0)
    93. col.append("00");
    94. else
    95. col.append(QString::number(color.green(), 16));
    96. qDebug("blue: %x", color.blue());
    97. if(color.blue() == 0)
    98. col.append("00");
    99. else
    100. col.append(QString::number(color.blue(), 16));
    101. return col;
    102. }
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. stylesheet
    By BalaQT in forum Qt Programming
    Replies: 2
    Last Post: 19th March 2010, 08:45
  2. Stylesheet for ActionsContextMenu - how to?
    By QPlace in forum Qt Programming
    Replies: 5
    Last Post: 21st August 2009, 15:51
  3. Qt Stylesheet
    By bunjee in forum Qt Programming
    Replies: 1
    Last Post: 22nd January 2009, 15:48
  4. How to do this with StyleSheet
    By yxmaomao in forum Qt Programming
    Replies: 5
    Last Post: 30th May 2008, 09:54
  5. stylesheet
    By phillip_Qt in forum Qt Programming
    Replies: 11
    Last Post: 27th April 2008, 20:11

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.