Comment modifier les propriétés de style des thèmes de la coquille de gnome

Comment modifier les propriétés de style des thèmes de la coquille de gnome
Les thèmes de la coquille de gnome (GS) dépendent fortement de CSS pour styliser divers éléments de la coquille. Un fichier CSS typique inclus dans un thème GS peut avoir des milliers de propriétés. Cet article couvrira certains concepts que vous pouvez utiliser pour modifier les thèmes GS existants en créant un nouveau thème qui hérite des valeurs des thèmes originaux. Si vous connaissez un peu le fonctionnement du CSS, vous pouvez vous appuyer sur les exemples mentionnés ci-dessous pour modifier presque tous les aspects d'un thème GS.

Activer des thèmes de coquille de gnome personnalisés

Ubuntu, ainsi que de nombreuses autres distributions basées sur des gnomes, n'autorise pas les thèmes personnalisés fabriqués par défaut par défaut. Pour charger des thèmes d'utilisateur, une extension GS et un utilitaire de tweaks caché doivent être installés. Vous pouvez installer l'outil d'extension et de réglage GNOME requis dans Ubuntu en exécutant la commande suivante:

$ sudo apt install gnome-shell-extensions gnome-tweaks

Lancez l'application «Tweaks» à partir du lanceur d'applications et accédez à l'onglet «Extensions» dans la barre latérale. Activez l'extension «thèmes utilisateur», comme indiqué dans la capture d'écran ci-dessous. Assurez-vous que la baisse des «extensions» est activée en haut.

Une fois que vous avez terminé cette étape, fermez et relancez l'application Tweaks. Maintenant, vous pourrez changer le thème GS de l'onglet «Apparence».

Création des fichiers nécessaires pour la personnalisation du thème

Pour personnaliser un thème existant, vous devrez créer un nouveau thème GS qui s'appuie sur le thème original. De cette façon, vous ne pouvez modifier que des parties sélectionnées du thème, sans changer le thème entier. Toute partie intacte du thème original sera conservée telle quelle. L'exécution des commandes ci-dessous créera un nouveau thème personnalisé nommé «Mytheme» dans votre répertoire $ Home.

$ mkdir -p ~ /.thèmes / mytheme / gnome-shell /
$ touch ~ /.thèmes / mytheme / coquille de gnome / coquille de gnome.CSS

Vous pouvez utiliser n'importe quel éditeur de texte pour saisir vos propres personnalisations dans la «Shell Gnome.Fichier CSS »créé en exécutant la commande ci-dessus. Une fois que vous avez entré le code requis, vous pouvez sélectionner le thème «Mytheme» dans le menu déroulant dans l'application Tweaks, comme expliqué dans la première section de cet article. Notez que vous devrez vous connecter et vous reconnecter pour que les modifications prennent effet. Alternativement, vous pouvez également appuyer et saisir «R» dans la boîte d'entrée contextuelle pour recharger le shell Gnome.

Trouver le fichier CSS de base

Si vous souhaitez utiliser le fichier CSS d'origine comme référence, vous devrez d'abord le trouver et l'extraire. Les thèmes tiers peuvent inclure directement une «coquille de gnome.Fichier CSS », ce qui facilite l'utilisation comme base pour la personnalisation CSS. Cependant, les fichiers système par défaut peuvent inclure «le thème du gnome-shell.Fichiers Gresource »à la place. Vous pouvez trouver le thème GS du système par défaut situé sur le chemin «/ usr / share / gnome-shell / thème». À l'intérieur de ce répertoire, vous trouverez le fichier Gresource sous un autre dossier du même nom du thème système par défaut. Dans la dernière version d'Ubuntu, vous trouverez le fichier Gresource sur le chemin «/ usr / share / gnome-shell / thème / yaru». Copiez le fichier Gresource dans un autre dossier et exécutez la commande suivante:

$ list gresource gnome-shell-thème.gresour

Après avoir entré la commande ci-dessus, vous recevrez la sortie suivante:

/ org / gnome / shell / thème / yaru-dark / gnome-shell-high-contrast.CSS
/ org / gnome / shell / thème / yaru-dark / gnome-shell.CSS
/ org / gnome / shell / thème / yaru / gnome-shell-high-contrast.CSS
/ org / gnome / shell / thème / yaru / gnome-shell.CSS


La quatrième ligne de la sortie ci-dessus donne le chemin correct du fichier CSS. Pour l'extraire, exécutez une commande dans le format suivant:

$ gresource extrait gnome-shell-thème.Gresource / org / gnome / shell / thème / yaru / gnome-shell.CSS
> sortie.CSS

Vous pouvez maintenant vous référer à la «sortie.Fichier CSS »obtenu ci-dessus et l'utiliser comme base pour la personnalisation. Quelques exemples de personnalisation CSS sont mentionnés ci-dessous. Ces exemples ne couvrent pas tous les cas d'utilisation, mais vous donneront une idée de base pour savoir comment procéder. Notez qu'aucune explication ne sera donnée pour les règles du CSS mentionnées ci-dessous, car elles dépassent le cadre de cet article. Vous pouvez vous référer à la documentation de référence CSS de W3Schools ou Mozilla pour plus d'informations.

Changer les propriétés des polices du thème du système

Le code suivant modifiera les propriétés de la police du thème du système par défaut. Le style de police sera changé en Noto Sans et la taille de la police sera changée en 12 pt.

organiser
Font-Family: Noto Sans, Sans-Serif;
taille de police: 12pt;

Si vous utilisez un thème GS tiers, vous devrez peut-être importer son fichier CSS d'abord en spécifiant le chemin complet, comme indiqué dans l'exemple ci-dessous:

@Import URL ("Path / to / thème.css ");
organiser
Font-Family: Noto Sans, Sans-Serif;
taille de police: 12pt;

Si un fichier CSS n'est pas disponible pour l'importation, vous pouvez l'extraire du fichier Gresource, comme expliqué ci-dessus.

Modification de la couleur d'arrière-plan du panneau

Pour modifier la couleur d'arrière-plan du panneau en rouge, utilisez le code suivant:

#panel
Color d'arrière-plan: rouge;

Changer la largeur de l'interrupteur à bascule

Utilisez le code ci-dessous pour modifier la largeur des boutons à bascule:

.interrupteur à bascule
Largeur: 100px;

Conclusion

Avec une certaine connaissance des règles et propriétés CSS, vous pouvez facilement personnaliser presque tous les aspects d'un thème GS. Cependant, il est important de localiser le fichier CSS de base correct pour l'utiliser comme référence et d'éviter beaucoup de conjectures.