[FR] 1.3 Le SSS (Sielo Style Sheet) : création de thème

Création de thème : le SSS (Sielo Style Sheet)

Définition

Pour créer des thèmes complets, Sielo permet de modifier l'interface grâce à un langage : le SSS. Ce langage est très proche du CSS et support une variété de propriétés, pseudos états et sous contrôles qui permettent de personnaliser l'interface.

Le SSS s'utilise vraiment comme du CSS. Il est donc important d'avoir des bases dans ce langage pour se lancer dans le SSS

Syntaxe

Choisir l'élément à personnaliser

Vous pouvez choisir de personnaliser un élément grâce à son identifiant ou le nom de sa classe C++. Par exemple, pour personnaliser les boutons de la classe QPushButton et la barre d'adresse qui a pour identifiant addressbar on fera

QPushButton {
    /* Personnalisation des boutons */
} 

#addressbar {
    /* Personalisation de la barre d'adresse */
} 

Il est aussi possible de ne personnaliser que les éléments enfants d'autres éléments en mettant l'élément enfants après l'élément parent. Par exemple, pour personnaliser uniquement les QPushButton des QDialog on fera

QDialog QPushButton {
    /* Personnalisation des boutons des dialogues */
} 

Liste des sous contrôles

Il est possible d'accéder à un "sous élément" d'un objet en faisant #object::sous-contrôle. Voici la liste des sous contrôles disponibles :

Sous contrôle	Description
::add-line	Le bouton pour ajouter une ligne d'une QScrollArea
::add-page	La surface entre la poignée et le add-line d'un QScrollArea
::branch	L'indicateur de branche d'un QTreeView
::chuck	Le "chuck" d'une QProgressBar
::down-arrow	La flèche vers le bas d'un QComboBox ou d'une QScrollBar
::down-button	Le bouton en bas d'une QScrollBar
::indicator	L'indicateur d'une QCheckBox, QRadioButton ou un item de QMenu cochable
::handle	La poignée d'une QScrollBar
::icon	Icône dans un QMenu
::item	Élément dans un QMenu
::left-arrow	Flèche vers la gauche d'une QScrollBar
::menu-arrow	Flèche de menu d'un bouton avec un menu
::menu-button	Bouton de menu d'un bouton avec un menu
::menu-indicator	Indicateur de menu d'un bouton avec un menu
::right-arrow	Flèche vers la droite d'une QScrollBar
::scroller	Scroller d'un QMenu
::separator	Separation dans un QMenu
::tab	Les onglets des espaces d'onglets
::title	Le titre d'une QGroupBox

List des pseudos états

La liste des pseudos états peut être trouvée sur cette page (en anglais).

Liste des propriétés

La liste des propriétés peut être trouvée sur cette page (en anglais).

Objets de Sielo

Objet	Comment le styliser
#addressbar	Supporte le box model. Barre d'adresse. Les boutons à l'intérieur sont du type QToolButton. Lorsque l'utilisateur utilise les bars d'outils plutôt que le bouton flottant, la barre d'adresse est enfant de #navigationbar.
#addressbar-completion	Pop-up affichant les suggestions pour la barre d'adresse.
#addressbar-button-go	Supporte le box model. Boutton de la barre d'adresse permettant de charger l'URL ou la rechercher.
#addressbar-button-reload	Supporte le box model. Bouton de la barre d'adresse permettant de recharger la page.
#addressbar-button-stop	Supporte le box model. Bouton de la barre d'addresse permettant de stoper le chargement d'une page web.
#autofill-manager	Supporte le box model. Page dans les preférences permettant de gérer ses mots de passes.
#bookmarks-toolbar	Supporte le box model. Correspond à la barre d'outil contenant la barre des favoris. Les favoris de cette barre sont du type QToolButton.
#button-clear	Supporte le box model. Bouton à côté d'une ligne de saisi, généralement dans un dialogue.
#exlineedit	Supporte le box model. Utilisé pour la saisi d'une recherche notamment.
#exlineedit-clearbutton	Supporte le box model.Bouton pour effacer le texte saisi.
#exlineedit-leftWidget	Supporte le box model. Icon à droite de la ligne de saisi, généralement utilisé pour l'icône.
#exlineedt-lineedit	Supporte le box model. Ligne permettant la saisie.
#fbutton-root	Supporte le box model. Bouton du milieu au bouton flottant.
#fbutton-home	Supporte le box model.
#fbutton-new-window	Supporte le box model.
#fbutton-new-tab	Supporte le box model.
#fbutton-next	Supporte le box model.
#fbutton-back	Supporte le box model.
#fbutton-history	Supporte le box model.
#fbutton-add-bookmark	Supporte le box model.
#fbutton-view-bookmarks	Supporte le box model.
#highlighted-new-tabsspace	Supporte le box model. C'est le carré permettant de pré-visualiser où sera créé un espace d'onglet au drop.
#mainwindow	Supporte le box model. C'est la que vous devriez définir la fond d'écran par défaut de votre thème avec background-image: url(...)
#main-menu	Supporte le box model. Menu principale de Sielo.
#navigationbar	Supporte le box model. Barre d'outil. Ces boutons sont du type QToolButton.
#navigation-button-back	Supporte le box model. Bouton retour de la barre d'outil.
#navigation-button-forward	Supporte le box model. Bouton suivant de la barre d'outil.
#navigation-button-home	Supporte le box model. Bouton pour aller sur la page d'accueil de la barre d'outil.
#navigation-button-view-bookmarks	Supporte le box model. Bouton pour afficher les favoris de la barre d'outil.
#navigation-button-add-bookmark	Supporte le box model. Bouton pour ajouter un favoris de la barre d'outil.
#navigation-button-view-history	Supporte le box model. Bouton pour voir l'historique de la barre d'outil.
#pinnedtabbar	Supporte le box model. Barre d'onglets des onglets pin.
#preferences-dialog	Supporte le box model. Popup de préférences.
#preferences-list	Supporte le box model. Liste des pages dans le dialog de préférences.
#preferences-title	Nom de la page active dans les préférences (affiché en haut).
#preferences-pages	Supporte le box model. Zone où sont rendu les différentes pages des préférences.
#preferences-line	Lignes présentent en haut et en bas du dialogue des préférences. On peut en personnaliser la couleur grâce à la propriété background-color: #000000.
#search-toolbar	Supporte le box model. Barre d'outil où sont faites les recherches sur les pages web. Les boutons sont du type QPushButton.
#tabs-closebutton	Supporte le box model. Bouton pour fermer un onglet.
#tab-icon	Supporte le box model. Icone dans un onglet.
#tabbarwidget	Supporte le box model. C'est la barre d'onglet.
#tabbar	Supporte le box model. C'est la barre d'onglets normaux. Sielo à une limitation qui rend les deux pixel du bas caché. Il est donc vivement conseillé d'y ajouter la propriété margin-bottom: 2px pour ne pas avoir de surprise.
#tabwidget-button-addtab	Supporte le box model. Bouton d'ajout d'un nouvelle onglet.
#tabwidget-button-closedtabs	Supporte le box model. Bouton affichant le menu des onglets fermés.
#tabwidget-button-leftscroll	Supporte le box model. Bouton utiliser lorsqu'il y a trop d'onglets pour les faire défiler vers la gauche.
#tabwidget-button-listtab	Supporte le box model. Bouton affichant le menu avec la liste des onglets ouverts.
#tabwidget-button-mainmenu	Supporte le box model. Bouton affichant le menu principale de Sielo.
#tabwidget-button-rightscroll	Supporte le box model. Bouton utiliser lorsqu'il y a trop d'onglets pour les faire défiler vers la droite.
#title-bar	Supporte le box model. Barre de titre de Sielo sur Windows. Les boutons enfants sont du type QToolButton
#titlebar-button-close	Supporte le box model. Bouton pour fermer la fenêtre.
#titlebar-button-minimize	Supporte le box model. Bouton pour minimiser la fenêtre.
#titlebar-button-maximize	Supporte le box model. Bouton pour maximiser la fenêtre.
#titlebar-reverse-maximize	Supporte le box model. Bouton pour rendre à la fenêtre sa taille normal.
#titlebar-title	Supporte le box model. Titre de la fenêtre.
#updater-dialog	Supporte le box model. Dialog apparaissant lors d'une mise à jour de Sielo, la barre de progression est du type QProgressBar
#vertical-splitter	Supporte le box model. Partie vertical des espaces d'onglets.
#web-inspector	Correspond à l'inspécteur web.
#webtab	Supporte le box model. Correspond aux onglets (la page web ainsi que la barre d'adresse)
#webtab-container	Supporte le box model. QSplitter contenant le #webtab.

Objets de Qt

Objet	Comment le styliser
QCheckBox	Supporte le box model. Représente les cases à cocher.
QComboBox	Supporte le box model. Représente les listes déroulantes.
QDialog	Supporte le box model. Représente les pop-up de Sielo (page de préférences, historiques, etc.).
QGroupBox	Supporte le box model. Représente les différents groupes de widgets avec un titre dans les préférences (ne pas confondre avec les pages).
QLabel	Supporte le box model. Représente les textes dans Sielo.
QLineEdit	Supporte le box model. Représente les lignes de saisie.
QListView	Supporte le box model. Représente les listes dans Sielo.
QListWidget	Supporte le box model. Représente les listes dans Sielo.
QMenu	Supporte le box model. Représente les menus de Sielo.
QProgressBar	Supporte le box model. Barre de progression dans Sielo.
QPushButton	Supporte le box model. Représente la majorité des boutons présent dans Sielo.
QRadioButton	Supporte le box model. Représente les cases à coché de façon unique.
QScrollBar	Supporte le box model. Représente les barres permettant de bouger une page trop grande.
QSplitterHandle	Représente la "poignée" qui permet de redimenssiner où cacher un espace d'onglet.
QTabbar	Supporte le box model.
QToolButton	Supporte le box model. Représente les boutons dans les barres d'outils généralement.

Sielo utilise donc Qt et une variété d'objet propre à ce framework. La majorité des objets utilisé dans Sielo sont ci-dessus mais vous pouvez trouver sur cette page (en anglais) un grand nombre d'autre éléments personnalisables.

Il est toutefois important de noter que Sielo ne les utilise pas tous, et certain sont hérité.

Quelques particularités

Le SSS permet aussi des choses que le CSS ne permet pas. Il existe notament des variable uniques à Sielo :

variable	valeur
$ulightness	Indique si le thème est en version sombre où foncé (vaut soit dark soit light).

Sielo permet aussi d'utiliser certaines fonctions :

la fonction scolor(nom, variance, alpha)

Cette fonction permet de récupupérer les couleurs définis par l'utilisateurs dans les paramètres. Nom doit être replacé par :

• "main" : couleur principale
• "second" : couleur secondaire
• "accent" : couleur d'accentuation
• "text" : couleur du texte.

La variance permet d'obtenir une couleur plus claire ou plus sombre. Elle est soit "dark" ou "light", soit "normal". Et enfin, l'alpha s'utilise normalement et est compris entre 0 et 255. Seul le nom est obligatoire, si vous ne précisez rien la variance sera "normal" et l'alpha a 255.