Personnaliser ton overlay de manette avec du CSS

L'éditeur couvre les couleurs, la taille, la disposition et les libellés. Quand tu veux quelque chose qu'il ne propose pas, comme un contour qui s'allume à l'appui, des libellés visibles seulement tant qu'un bouton est maintenu, ou ta propre police, le CSS personnalisé de Pro te laisse restyler n'importe quelle partie de l'overlay. Cette page liste tout ce que tu peux cibler et les quelques éléments à laisser tranquilles.

Où écrire le CSS

Ouvre ton overlay dans l'éditeur, va dans l'onglet CSS et choisis Écrire du CSS. Le CSS s'applique à l'overlay dans OBS, pas à l'aperçu de l'éditeur, et il arrive dans OBS dès l'enregistrement, sans actualiser la source. Garde l'aperçu de l'éditeur pour la disposition et vérifie le style dans OBS.

Laisse vide le champ CSS personnalisé dans les propriétés de la source Navigateur d'OBS. Il vise la même page, mais le CSS enregistré dans gamepad.lol voyage avec l'overlay dans chaque scène et chaque profil OBS qui utilise son lien.

L'overlay est un SVG

Chaque contrôle est une forme SVG à l'intérieur d'un unique élément svg. C'est ce qui décide des propriétés qui fonctionnent : les formes se colorent avec fill et stroke, pas avec background et border, et le texte se colore avec fill, pas avec color. Les tailles comme font-size et stroke-width se mesurent dans le dessin propre au skin, en 640 × 360, et suivent l'échelle de l'overlay, pas les pixels de l'écran.

Sélecteurs

Chaque contrôle a son propre id, et tous les contrôles d'un même type partagent une classe. Dans l'éditeur CSS, tape #, . ou [ pour obtenir la liste exacte de ton skin.

• Boutons de façade, nommés d'après les boutons du skin : #face-a, #face-b, #face-x, #face-y sur Xbox et Switch Pro ; #face-cross, #face-circle, #face-square, #face-triangle sur PlayStation ; #face-down, #face-right, #face-left, #face-up sur le skin neutre. Classe .gpl-button.
• Croix directionnelle : #dpad-up, #dpad-down, #dpad-left, #dpad-right. Classe .gpl-button.
• Tranches et boutons de menu : #bumper-l, #bumper-r, #select, #start. Classe .gpl-button.
• Sticks : #stick-l et #stick-r sont les têtes mobiles, #stick-l-ring et #stick-r-ring les anneaux autour. Classes .gpl-stick et .gpl-stick-ring.
• Gâchettes : #trigger-l et #trigger-r sont les remplissages, #trigger-l-track et #trigger-r-track les fonds. Classes .gpl-trigger et .gpl-trigger-track.
• Libellés et symboles : le texte d'un bouton libellé est son id suivi de -label, par exemple #face-a-label ou #bumper-l-label ; les symboles PlayStation sont #face-cross-glyph et ainsi de suite. Classes .gpl-label et .gpl-glyph. Ils n'existent que tant que les libellés des boutons sont activés.

Les ids des boutons de façade suivent les lettres, pas la position. Sur Xbox, A est en bas, sur Switch Pro il est à droite : une règle pour #face-a se déplace donc quand tu passes d'un skin à l'autre. Utilise les classes quand tu veux qu'une règle survive à un changement de skin.

L'état appuyé

Tant qu'un contrôle est maintenu, sa forme porte l'attribut data-pressed : les boutons pendant l'appui, les gâchettes dès qu'elles sont tirées, les sticks pendant le clic.

.gpl-button[data-pressed] {
  fill: #ffd60a;
}

Un libellé ou un symbole suit immédiatement son bouton : tu peux donc le styler depuis l'état du bouton avec +. Les libellés sont du texte et prennent fill ; les symboles PlayStation sont des tracés et prennent stroke :

.gpl-button[data-pressed] + .gpl-label {
  fill: #111111;
}

.gpl-button[data-pressed] + .gpl-glyph {
  stroke: #111111;
}

Ce qu'il ne faut pas toucher

L'overlay s'anime en écrivant des attributs SVG à chaque image : transform sur les têtes de stick, height et y sur les remplissages de gâchette. Le CSS l'emporte sur les attributs : définir ces propriétés sur ces éléments les fige sur place. Style tout le reste librement : fill, stroke, stroke-width, opacity, les polices.

Les couleurs suivent la même logique. Les couleurs Repos et Appuyé de l'éditeur sont elles aussi des attributs : dès que ton CSS définit fill sur un bouton, écris aussi une règle [data-pressed] pour lui, sinon il aura la même apparence appuyé et relâché.

Limites

• Pas de fichiers distants. @import et url() pointant vers une adresse web sont rejetés. Les images et les polices doivent être intégrées en URI data: base64.
• 20 000 caractères au total, images intégrées comprises. C'est largement assez pour le style et de petites icônes, pas pour des illustrations complètes.
• Pas d'antislash. Les échappements CSS sont rejetés, car ils peuvent écrire tout ce que les autres règles bloquent.
• Pro uniquement. Si ton abonnement se termine, ton CSS reste enregistré mais cesse d'être appliqué, et il revient si tu te réabonnes.

Si un enregistrement est rejeté, l'éditeur affiche un avertissement et garde la fenêtre ouverte : rien de ce que tu as tapé n'est perdu, et le CSS déjà en place dans OBS reste tel quel.

Exemples

Tes couleurs de marque

.gpl-button,
.gpl-stick {
  fill: #1f1f24;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  fill: #9146ff;
}

.gpl-trigger {
  fill: #9146ff;
}

Un contour qui s'allume à l'appui

.gpl-button {
  stroke: #9146ff;
  stroke-width: 0;
}

.gpl-button[data-pressed] {
  stroke-width: 4;
}

Discret jusqu'à l'appui

.gpl-button,
.gpl-stick,
.gpl-stick-ring,
.gpl-trigger-track {
  opacity: 0.35;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  opacity: 1;
}

Des libellés seulement pendant l'appui

.gpl-label,
.gpl-glyph {
  opacity: 0;
}

.gpl-button[data-pressed] + .gpl-label,
.gpl-button[data-pressed] + .gpl-glyph {
  opacity: 1;
}

Une police installée sur ton PC

Le navigateur d'OBS peut utiliser les polices installées sur l'ordinateur qui l'exécute : une police locale ne demande donc aucun envoi.

.gpl-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

Quiconque ouvre l'overlay sans cette police obtient la police de repli.

Pour déplacer ou masquer des éléments, utilise plutôt l'onglet Disposition : il enregistre les positions élément par élément et ne se bat pas avec l'animation.