Telechargez Toute Nos Créations


Articles

  Tuto Skinning
Catégorie : skins2mumble INFO
Ajouté le : 28/02/2013
Auteur : Designer
Lectures : 2009
Note :  [ Evaluer ]











Tuto Skinning


Introduction



La création d'une interface Mumble n'est pas si compliquée. Pour ceux qui ont déjà fait un site web l'interface de Mumble se configure via un fichier "monSkin.qss" qui ressemble beaucoup à un fichier CSS. Pour ceux qui ne connaissent pas, il va vous falloir créer un fichier "monSkin.qss" et dedans mettre toutes les choses que vous voulez modifier groupes par groupes. Bien que vous puissiez créer ce fichier dans bloc note, je vous conseille fortement l'utilisation d'un éditeur de texte comme Notepad++ que vous pouvez télécharger ici et de régler le language sur CSS ainsi les mots clefs seront colorés pour une meilleure compréhension du code.



Maintenant que vous avez ce qu'il faut pour commencer, vous devez créer un dossier skins dans votre répertoire d'installation Mumble. Ensuite créez un dossier pour votre skin, il contiendra toutes vos images et le fameux fichier "monSkin.qss".



Images



La personnalisation de l'interface Mumble commence par l'ajout d'images que ce soit l'arrière plan d'une fenêtre de dialogue ou d'icônes.



Soyez ordonné !!! Quand vous ajoutez des images, essayez de les nommer par fonction et de les grouper dans des sous dossiers pour mieux vous repérer.



Il est recommandé d'utiliser des images au format SVG. Cela permet de conserver la qualité de l'image quelque soit sa taille. Vous pouvez aussi utiliser du format PNG.



Pour transformer vos images PNG en SVG, vous pouvez utiliser Inkscape. Il suffit d'enregistrer son image au format SVG simple ou Plain SVG selon la version.



QSS et CSS



Comme dit plus haut, toutes les informations de mise en pages seront stockées dans un fichier QSS. En voici, un exemple:


/* ceci est un commentaire */



QTreeView { /*classe ou groupe de contrôles à modifier*/

background-color: white;/*propriété modifiées*/

color: black;

}



QTextBrowser {

background-color: #CCCCFF;

}



QMenuBar {

/* placez ici vos propriétés */

}



QMenu {

/* placez ici vos propriétés */

}


Comme on peut le voir, c'est très ressemblant à du CSS. Pour ceux qui ont l'habitude du CSS nul besoin de continuer ce chapitre, vous pouvez aller directement au chapitre sur les classes. Pour les autres, ne vous inquiétez pas tout est expliqué juste en dessous.



Début avec le QSS



Explication de l'exemple précédent. La première ligne commence par le nom de la classe ou du groupe de contrôles à modifier. Les autres lignes contiennent les propriétés à modifier. Pour grouper les propriétés, on ouvre une accolade { après avoir nommé la classe une fois toutes les propriétés écrites, on ferme avec une accolade }. Par soucis de lisibilité il est conseillé de sauter une ligne entre chaque propriétés, attention à ne pas oublier le ; après chaque propriété sinon il y aura des erreurs. Vous pouvez aussi mettre une tabulation devant chaque propriété ça n'aura aucune incidence sur le fichier.



Propriétés



Que sont les propriétés? Depuis toute à l'heure on en parle, mais à quoi ça sert comment ça marche? Les propriétés définissent la mise en page, la couleur et la police du texte, son alignement aussi. On peut aussi s'en servir pour définir la couleur de fond d'un menu, d'une boîte de dialogue ou encore les bordures entre plusieurs contrôles. On ne les verra pas toutes ici, mais il y a un tutoriel complet sur le CSS , ça parle beaucoup de site web mais c'est normal, le QSS ressemble beaucoup au CSS qui définit la mise en page des sites web.



Positionnement



padding/margin



Il y a différentes marges à connaître pour positionner correctement un contrôle. La marge extérieure (en rouge sur le dessin) est située entre la bordure et les autres contrôles, elle est appelée margin. La marge intérieure (en vert sur le dessin) est située entre le texte/contrôle et la bordure, elle est appelée padding. Il y a différentes façon de donner une valeur aux marges.


margin: 2px; /*donne une valeur de 2 pixels à toutes les marges extérieures*/

margin-top: 2px; /*donne une valeur de 2 pixels à la marge extérieure supérieure*/

margin-right: 2px; /*donne une valeur de 2 pixels à la marge extérieure droite*/

margin-bottom: 2px; /*donne une valeur de 2 pixels à la marge extérieure inférieure*/

margin-left: 2px; /*donne une valeur de 2 pixels à la marge extérieure gauche*/



padding: 3px; /*donne une valeur de 3 pixels à toutes les marges intérieures*/

padding-top: 3px; /*donne une valeur de 3 pixels à la marge intérieure supérieure*/

padding-right: 3px; /*donne une valeur de 3 pixels à la marge intérieure droite*/

padding-bottom: 3px; /*donne une valeur de 3 pixels à la marge intérieure inférieure*/

padding-left: 3px; /*donne une valeur de 3 pixels à la marge intérieure gauche*/


Pour les bordures, on peut définir l'épaisseur, le style et la couleur. Par défaut les bordures sont rectangulaires mais on peut aussi arrondir les angles. Comme pour les marges on peut définir chaque côté séparemment ou tout d'un coup.


border: 2px solid white; /*donne une épaisseur de 2 pixels à toutes les bordures l'aspect solid et la couleur blanche*/

border-top: 2px solid white; /*donne une épaisseur de 2 pixels à la bordure supérieure l'aspect solid et la couleur blanche*/

border-radius: 2px; /*donne un rayon de 2 pixels à tous les coins de la bordure*/


Voici la liste des différents aspects des bordures et leurs noms



Style des bordures



Mise en page



Maintenant qu'on a vu comment mettre du texte en place, on va voir comment le mettre en page. On peut définir un grand nombre de paramètres en une seule fois.



font: bold italic 12px "Times New Roman"; /*définit du texte gras en italique de 12 pixels en times new roman*/



Ou on peut définir chaque paramètre séparemment.


font-family: "Times New Roman"; /*la police ici times new roman quand c'est un nom composé il faut le mettre en guillemets*/

font-family: Arial; /*ici pas besoin de guillemets c'est un nom simple*/

font-family: Arial,"Times New Roman"; /*on peut aussi définir plusieurs polices par ordre de préférence si la première n'est pas trouvée le programme va chercher la seconde et ainsi de suite s'il n'en trouve aucune il mettra la police par défaut*/

font-size: 12px; /*la taille du texte soit en pixels(px) soit en points(pt)*/

font-style: italic; /*le style de la police soit italic soit oblique (italic inversé soit normal*/

font-weight: bold; /*le poids du texte ici gras sinon par défaut normal*/

color: red; /*la couleur du texte ici rouge*/

text-align: left; /*alignement du texte ici collé à gauche il peut être soit top(en haut) bottom(en bas) right(à droite) center(centré ou une combinaison ex bottom center*/

text-decoration: underline; /*effets sur le texte ici souligné il peut être soit overline(surligné line-through(raturé ou none(aucun effet)*/


Image de fond



Vous pouvez mettre des images fond dans les menus, la fenêtre principale, les boîtes de dialogues enfin partout ou vous en aurez envie. Pour cela il vous suffit d'indiquer l'URL de l'image. Par exemple si vous avez créé un dossier images dans le dossier de votre thème son addresse sera "/images/votreImage.png". L'image sera en haut à gauche par défaut mais il est possible de la décaler. De même si l'image est trop petite, elle sera répétée vers la droite et/ou le bas. L'utilisation de svg vous évite ce genre de contraintes. On peut aussi définir ou commence l'image par défaut ce sera au niveau des bordures,mais on peut aussi définir qu'elle commence au niveau des marges extérieures ou intérieures.


background-image: url(:/images/votreImage.png); /*définit votreImage.png en tant qu'image de fond*/

background-position: bottom left; /*l'image sera placée en bas à gauche*/

background-repeat: repeat-y; /*l'image sera répétée verticalement*/

background-clip: padding; /*l'image sera à l'intérieur des marges intérieures*/


Couleur de fond



On peut aussi choisir de mettre juste de la couleur pour le fond. On peut même choisir la transparence. Il y a plusieurs façon de noter les couleurs.






  • le nom de la couleur ex: red


  • la notation rgb numérique (les valeurs vont de 0 à 255) ex: rgb(255, 0, 0)


  • la notation rgb en pourcent ex: rgb(100%, 0, 0)


  • la notation héxadécimale courte et longue ex: #F00 ou #FF0000



 



Chaque méthode a ses avantages et inconvénients. Par exemple noter le nom est plus facilement lisible mais propose moins de choix, en fait juste 16 couleurs. La notation RGB ou héxadécimale est plus précise mais moins lisible. Chacun sa méthode, pour connaître la valeur d'une couleur en RGB ou héxadécimale, j'utilise ce petit logiciel gratuit, simple et efficace la boîte à couleur. Voici quelques exemples:


background-color: red; /*la couleur de fond sera rouge*/

background-color: rgb(255, 0, 0); /*la couleur de fond sera rouge*/

background-color: rgba(255, 0, 0, 75%); /*la couleur de fond sera rouge mais opaque a 75% l'opacité se note en %*/


Bon juste parce que vous êtes sympas voici la liste des couleurs


liste des couleurs


Il y a encore d'autres propriétés dont on pourrait parler, mais celles que je viens de vous présenter sont les plus utiles et sûrement les seules dont vous aurez besoin. Une liste de toutes les propriétés est disponible ici attention le site est en anglais... Je vous aurai prévenu.



Voila qui cloture le chapitre sur les propriétés, maintenant que nous savons coment positionner mettre en page et appliquer une couleur/image de fond, il serait intéressant de savoir comment on va sélectionner les contrôles à modifier.



Contrôles



Petit exemple simple



Reprenons l'exemple de départ:


/* ceci est un commentaire */



QTreeView { /*classe ou groupe de contrôles à modifier*/

background-color: white ;/*propriété modifiées*/

color: black;

}



QTextBrowser {

background-color: #CCCCFF;

}



QMenuBar {

/* placez ici vos propriétés */

}



QMenu {

/* placez ici vos propriétés */

}


QTreeView, QTextBrowser, QMenuBar et QMenu sont des contrôles à modifier. Simple non ???



En fait oui et non. Tout dépend de ce que vous voulez faire. Si vous désirez mettre une image de fond dans la fenêtre principale, ça peut prendre quelques lignes, exemple:


/*modification de la fenêtre principale (n'hésitez pas à commenter ça aide pour la relecture */

QMainWindow { /*On précise que les modifications se font pour la fenêtre principale*/

background-image: url(:/images/votreImage.svg); /*on applique votreImage.svg pour le fond*/

}


Jusqu'ici rien de bien compliqué, on a précisé qu'on travaillait sur la fenêtre principale avec le contrôle QMainWindow {}. Ensuite, on a donné la valeur votreImage.svg à la propriété background-image. Il y a plus de commentaires que de code.



Un cran au dessus



Comme vu juste avant modifier la fenêtre principale n'a rien de compliqué. Maintenant si je veux modifier le fond de la fenêtre principale mais aussi celle de toutes les boîtes de dialogues. Il y a deux façons soit je les mets une par une soit je fais tout d'un coup. Quand on veut avoir des propriétés communes je conseille de tout mettre d'un coup. Comme ceci:


/*modification de la fenêtre principale et des boîtes de dialogues*/

QMainWindow, QDialog { /*On précise que les modifications se font pour la fenêtre principale, les boîtes de dialogues*/

background-image: url(:/images/votreImage.svg); /*on applique votreImage.svg pour le fond*/

}


Il suffit simplement de séparer les classes à modifier par une virgule. Encore plus simple, si on veut modifier un élément commun dans tout le programme, on met * {}. Exemple:


/*modification de la couleur de tous les textes*/

* { /*On précise que les modifications se font pour tout*/

color: red; /*la couleur du texte ici rouge*/

}


De la précision maintenant



Pour l'instant, on a vu comment modifier l'ensemble d'un contrôle. Par exemple, la fenêtre principale qui contient différents contrôles qui possèdent un type et un nom différents. Il y a le contrôle UserView (la fenêtre des salons) nommé qtvUsers, 2 QDockWidget pour l'historique et la barre de chat nommés qdwLog et qdwChat, le menu QMenuBar nommé menuBar et le menu QToolBar nommé qtIcon ToolBar (celui avec les icones). Ca commence à faire du monde dans une petite fenêtre. Surtout quand on sait que le QmenuBar est composé lui aussi de 4 QMenu nommés qmConfig, qmHelp, qmServer et qmSelf! Heureusement, les noms sont assez explicites et une liste de tous les contrôles est disponible ici. Un menu permet d'aller directement sur la fenêtre que l'on veut modifier.



Maintenant comment faire pour modifier juste la police du menu de la fenêtre principale?


/*modification de la police du menu de la fenêtre principale*/

QMenuBar#menuBar { /*On indique qu'on change un menu plus précisément le menu de la fenêtre principale*/

font: bold italic 12px "Times New Roman"; /*définit du texte gras en italique de 12 pixels en times new roman*/

}


Et voilà, il suffit de mettre le type de contrôle le symbole # et le nom du contrôle. Si on avait juste noté QMenuBar, on aurait modifié tous les contrôles de type QmenuBar du programme.



Toujours plus précis



On a vu comment modifier untype de contôle sur tout Mumble, comment modifier un contrôle particulier avec l'opérateur #, mais on peut être encore plus précis. Mais que vas t'on modifier? Des sous-contrôles... Mais qu'est ce donc, qu'un sous-contrôle? Un exemple simple: la barre de défilement peut être entièrement personalisée, voici une liste des sous-contrôles:




  • les flèches de défilements en haut/bas pour une barre verticale ou à droite/gauche pour une barre horizontale


  • le curseur


  • le fond



 


/*modification des barres de défilement*/

QScrollBar { /*On sélectionne le contrôle side bar*/

background-color: white ; /*On met le fond en blanc*/

}

QScrollBar::handle { /*On sélectionne le curseur*/

image: url(skin:images/handle.svg); /*On remplace l'image de base du curseur par handle.svg contenue dans le dossier images*/

}

QscrollBar::up-arrow { /*On sélectionne la flèche du haut de la barre de défilement*/

image: url(skin:images/arrow_up.svg); /*On remplace l'image de base de la flèche du haut par arrow_up.svg contenue dans le dossier images*/

}


Il suffit simplement de mettre le type de contrôle ensuite :: et le nom du sous-contrôle à changer. Une liste des types de contrôles et de leurs sous-contrôles modifiables sera disponible prochainement en annexe, en attendant voici la documentation Qt.



Ultime précision



Vous pensez qu'on a fait le tour? Vous croyez avoir modifié tout ce qui pouvez l'être? Et bien non !!!



Voici le dernier chapitre, la dernière petite précision. Ici, nous allons parler des pseudo-états. En effet, un contrôle peut avoir des apparences différentes selon qu'il soit dans une fenêtre active ou pas, que la souris passe au-dessus ou que l'on clique dessus, et un tas d'autres encore. Comme d'habitude, exemple:


/*Modification de l'aspect d'un élément du menu quand la souris est au-dessus*/

QMenuBar#menuBar::item:hover { /*On indique qu'on change un élément du menu principal quand la souris est au-dessus*/

font-weight: bold; /*le texte sera affiché en gras dans ce cas précis*/

}







Vous retrouverez l'integraliter de ce tuto ICI