Il existe 2 méthodes pour personnaliser son application.

- La première est de personnaliser chaque widget dans votre code, plus adapté a un petit logiciel simple

- Et la deuxième de faire un fichier de style, plus pour une grosse application


Pour les personnes qui ont déjà fait du HTML/CSS ce tuto sera plus facile pour vous


- La première la plus simple est de faire un setStyleSheet() sur n’importe quel objet qui hérite de QWidget comme ceci:
QPushButton *btn = new QPushButton(); btn->setStyleSheet(”border: 0px; background-color: red;”); Attention dans ce cas la le stylesheet est appliqué à tous les fils et petits fils du bouton.

Donc je vous conseille vivement d’appliquer cette méthode aux objets simple comme QPushButton ou QLineEdit.


- La 2ème méthode est plus complexe mais permet de personnaliser toute son application.

Il s’agit simplement de mettre un stylesheet à votre QApplication
void QApplication::setStyleSheet(const QString &sheet); La encore vous avez la manière simple ou il suffit de faire du CSS:
QApplication app(ac, av); app.setStyleSheet(”QPushButton { border:0px; background-color: red; } QLineEdit { background-color: black; }”); return app.exec(); dans cet exemple tous les QPushButton auront le fond rouge et pas de bordure et tous les QLineEdit auront un fond noir. (sauf si vous remettez un setStyleSheet() identique à la toute première méthode)

L’autre façon de faire se base sur le même principe mais avec du CSS plus avancé.

Un petit conseil est de mettre tout son CSS dans un fichier de style et de l’inclure dans un fichier de ressources de votre projet Qt (si vous n’acceptez aucune modification de style), ou bien laisser ce fichier de style dans votre dossier.

main.cpp
QApplication app(ac, av); //cas du fichier inclus dans un .qrc du projet Qt QFile styleFile(”:/styles/styles.css”); if (!styleFile.open(QIODevice::ReadOnly)) return -1; QString StyleSheet(styleFile.readAll()); app.setStyleSheet(StyleSheet); styleFile.close(); QWidget monWidget; monWidget.show(); return app.exec();
style.css
// tous les QPushButton de l’application QPushButton { border: 1px solid black; background-color: red; } // Etat secondaire d’un QPushButton // (lorsque la souris passe sur le bouton) // note: les états secondaires peuvent être enchainé : // QCheckBox:hover:checked // QRadioButton:!hover QPushButton:hover { background-color: green; } // Sous controles, // chaque QWidget a ses sub-controls qu’on peut personnaliser QComboBox::down-arrow { image: url(down_arrow.png); } // tous les QPushButton fils directs // d’un objet de type MonWidget MonWidget > QPushButton { border: 0px; background-color: black; color: white; } // tous les QLabel fils et petits fils // d’un objet de type MonWidget MonWidget QLabel{ border: 1px; color: red; } // toutes les QFrame don “objectName()” = “frameBackground” // void setObjectName(const QString &name) pour tous les QObject QFrame#frameBackground { background-color: #444444; border: 1px solid #000000; }



Attention

Faites bien attention à l’ordre de votre style, par exemple ne pas faire:
QPushButton#okButton { color: gray } QPushButton { color: red } ici il y a un conflit: votre QPushButton nomme “okButton” prendra le style général de QPushButton car il est situé après.

Ce petit lien vous sera utile: stylesheet reference Qt 4.6. Vous avez accès à la liste des QWidget personnalisable, leurs sub-controls, leurs états secondaires, etc…