Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

[tuto] Personnaliser gnome-shell

feuloren

Salut,
si vous êtes comme moi fan de gnome-shell cette astuce est faite pour vous !

Les couleurs sont stockées un fichier gnome-shell.css et parfois hardcodées dans les fichiers javascript.
Par contre /!\ il est plus facile de changer le thème si gnome-shell est installé par jhbuild (pas la version des dépôts) puisque tous les fichiers sont stockés dans ~/gnome-shell/source/gnome-shell.
Si vous l'avez installé par les dépôts les fichiers sont dans /usr/share/gnome-shell mais vous avez besoin des droits superutilisateur pour les éditer.

Le fichier le plus important est gnome-shell.css que vous trouverez dans data/theme.
C'est un simple fichier css; les couleurs peuvent être en notation HTML ( #FFFFFF pour le blanc ) ou en... je sais pas comment ça s'appelle 😃 -> rgba(255, 255, 255, 1) pour le blanc opaque.
Malheureusement tout n'est pas stocké là et vous devrez aussi éditer des fichiers javascript stockés dans js/ui. Les couleurs sont notées en hexadecimal et toujours de cette façon

const NOM_COULEUR = new Clutter.Color();
NOM_COULEUR.from_pixel(0xFFFFFFFF); // donne du blanc opaque

Maintenant passons aux choses intéressantes 🙂
Pour changer la couleur de fond du panel, éditez le fichier panel.js :
* PANEL_FOREGROUND_COLOR pour la couleur du texte "Activités"
* BACKGROUND_TOP et BACKGROUND_BOTTOM pour le fond
* PRESSED_BUTTON_BACKGROUND_COLOR pour la couleur du bouton "Activités" actif
et le fichier gnome-shell.css:
* .panel-button:active mettez la même couleur que PANEL_FOREGROUND_COLOR
* .calendar-change-month:hover et .calendar-change-month:hover : mettez la même couleur que PANEL_FOREGROUND_COLOR
* panel-button : même couleur que PANEL_FOREGROUND_COLOR

Ensuite pour l'overview, éditez overview.js
* ROOT_OVERVIEW_COLOR : la couleur de fond
Puis gnome-shell.css
* #searchEntry : pour le champ de recherche
* #dash : la barre sur le côté avec les apps...

Pour voir les changements faites Alt+F2, tapez "restart" puis Entrée. (ça ne redémarre que le shell 😉)

Voilà ! il y a encore beaucoup de changement possibles mais je ne vais pas tout présenter; je n'ai même pas tout essayé d'ailleurs.

Pour finir une petite chose qui n'a pas de rapport avec les couleurs : vous pouvez choisir le temps que met l'overview à s'afficher, dans overview.js c'est la variable ANIMATION_TIME

J'espère que ça vous a plus, si vous avez des problèmes ou que vous souhaitez indiquer vos propres astuces, poster vos thèmes... n'hésitez pas !

Ferod

Ca serait sympa de mettre des images avant / après qu'on puisse se rendre compte... 🙂
Ca donnerait envie ! 😛

feuloren

Bonne idée !

Avant :

(extrait des notes de version de gnome 2.28)

Après:

feuloren

Pour info (et parceque je vais mettre à jour gnome shell) voillà ce que j'ai modifié

gnome-shell.css

/* Copyright 2009, Red Hat, Inc.
 *
 * Portions adapted from Mx's data/style/default.css
 *   Copyright 2009 Intel Corporation
 *
 * This program is free software; you can redistribute it and/or modify it
 * under the terms and conditions of the GNU Lesser General Public License,
 * version 2.1, as published by the Free Software Foundation.
 *
 * This program is distributed in the hope it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for
 * more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
 */

StScrollBar
{
  padding: 0px;
}

StScrollView
{
  scrollbar-width: 16px;
  scrollbar-height: 16px;
}

StButton#up-stepper
{
  border-image: url("scroll-button-up.png") 5;
}

StButton#up-stepper:hover,
StButton#up-stepper:active
{
  border-image: url("scroll-button-up-hover.png") 5;
}

StButton#down-stepper
{
  border-image: url("scroll-button-down.png") 5;
}

StButton#down-stepper:hover,
StButton#down-stepper:active
{
  border-image: url("scroll-button-down-hover.png") 5;
}

StScrollBar StButton#vhandle
{
  border-image: url("scroll-vhandle.png") 5;
}

StScrollBar StButton#vhandle:hover
{
  border-image: url("scroll-vhandle.png") 5;
}

StTooltip {
    border: 1px solid rgba(79,111,173,0.9);
    border-radius: 5px;
    padding: 4px;
    background-color: rgba(143,95,74,0.9);
    color: #ffffff;
}

/* Panel */

.panel-button {
    padding: 4px 12px 3px;
    border-radius: 5px;
    font: 16px sans-serif;
    color: #000000;
}

.panel-button:active, .panel-button:checked {
    background-color: #6E4837;/*#314a6c;*/
}

/* Overlay */

.workspaces {
    color: white;
}

.window-caption {
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(128,128,128,0.40);
    border-radius: 10px;
    font-size: 12px;
    padding: 2px 8px;
    -shell-caption-spacing: 4px;
}

.window-close {
    background-image: url("close-window.svg");
    height: 24px;
    width: 24px;
    -shell-close-overlap: 16px;
}

/* Dash */

#dash {
    color: #5f5f5f;
    background-color: rgba(0,0,0,0);
    padding: 0px 14px;
}

#dashSections {
    spacing: 12px;
}

.dash-search-section-header {
    padding: 6px 0px;
    spacing: 4px;
    font-size: 12px;
    color: #bbbbbb;
}

.dash-search-section-title, dash-search-section-count {
    font-weight: bold;
}

#searchEntry {
    padding: 4px;
    background-color: #E6DDD5;
    border: 1px solid #262626;
}

#searchEntry:active {
    background-color: #D6C6B8;
}

.dash-section {
    spacing: 8px;
}

.section-header {
    background-gradient-direction: vertical;
    background-gradient-start: #E6DDD5;
    background-gradient-end: #E4D5C6;
    font-weight: bold;
    font-size: 12px;
}

.section-header-inner {
    padding: 0px 4px;
    spacing: 4px;
}

.section-text-content {
    padding: 4px 0px;
}

.section-header-back {
    padding: 0px 4px 0px 0px;
    border-right: 1px solid #262626;
}

.section-header-back-image {
    background-image: url("section-back.svg");
    width: 12px;
    height: 16px;
}

.section-count {
}

.dash-section-content {
    font-size: 14px;
    color: #000000;
    spacing: 8px;
}

.more-link {
}

.more-link-expander {
    background-image: url("section-more.svg");
    width: 9px;
    height: 9px;
}

.dash-pane {
    background-color: rgba(255,255,255,0.95);
    border: 1px solid #262626;
    padding: 4px;
    spacing: 4px;
}

.dash-pane-close {
    background-image: url("close.svg");
    width: 16px;
    height: 16px;
}

/* GenericDisplay */

.generic-display-container {
    spacing: 4px;
}

.generic-display-item {
    height: 50px;
    border-radius: 4px;
    color: black;
    font-size: 14px;
    spacing: 4px;
}

.generic-display-item:selected {
    background-color: rgba(79,111,173,0.66);
}

.generic-display-item-text {
    spacing: 4px;
}

.generic-display-item-description {
    font-size: 12px;
    color: #000000;
}

.generic-display-details {
    font-size: 14px;
    color: #000000;
}

.generic-display-details-name {
    font-weight: bold;
}

/* AppIcon */

.app-icon-label {
    font-size: 12px;
}

/* Places */

.places-actions {
    spacing: 4px;
}

#placesDevices {
    padding-top: 4px;
}

/* LookingGlass */

#LookingGlassDialog
{
  background-color: rgba(0,0,0,0.85);
  spacing: 4px;
  padding: 4px;
  border: 1px solid rgba(0,0,172,0.85);
  border-radius: 4px;

  color: #88ff66;
}

#LookingGlassDialog > #Toolbar
{
  border: 1px solid grey;
  border-radius: 4px;
}

#LookingGlassDialog StLabel
{
  color: #88ff66;
}

#LookingGlassDialog StEntry
{
  color: #88ff66;
}

#LookingGlassDialog StBoxLayout#EvalBox
{
  padding: 4px;
  spacing: 4px;
}

/* Calendar popup */

#calendarPopup {
    border-radius: 5px;
    background: rgba(230,221,213,0.9);
    border: 1px solid rgba(128,128,128,0.45);
    color: black;
}

#calendarPopup .calendar {
    padding: 10px;
}

.calendar {
    spacing-rows: 5px;
    spacing-columns: 3px;
}

.calendar-change-month {
    padding: 2px;
}

.calendar-change-month:hover {
    background: #6E4837;
    border-radius: 5px;
}

.calendar-change-month:active {
    background: #6E4837;
    border-radius: 5px;
}

.calendar-day {
    padding: 1px 2px;
}

.calendar-today {
    font-weight: bold;
    background: #ffffff;
    color: black;
    border-radius: 5px;
}

.calendar-other-month-day {
    color: #dddddd;
}

/* App Switcher */
.switcher-list {
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(128,128,128,0.40);
    border-radius: 8px;
    padding: 18px;

    font: 12px sans-serif;
    color: white;
}

.switcher-list .item-box {
    padding: 8px;
    border-radius: 4px;
}

.switcher-list .thumbnail-box {
    padding: 2px;
    spacing: 4px;
}

.switcher-list .outlined-item-box {
    padding: 6px;
    border: 2px solid rgba(85,85,85,1.0);
    border-radius: 4px;
}

.switcher-list .selected-item-box {
    padding: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.33);
}

.switcher-list .separator {
    width: 1px;
    background: rgba(255,255,255,0.33);
}

/* Status Menu */
#StatusMenu {
    spacing: 4px;
    font: 16px sans-serif;
    color: black;
}

panel.js

const BACKGROUND_TOP = new Clutter.Color();
BACKGROUND_TOP.from_pixel(0xE6DDD5FF);
const BACKGROUND_BOTTOM = new Clutter.Color();
BACKGROUND_BOTTOM.from_pixel(0xE6DDD5FF);

const PANEL_FOREGROUND_COLOR = new Clutter.Color();
PANEL_FOREGROUND_COLOR.from_pixel(0x000000ff);
const SN_BACKGROUND_COLOR = new Clutter.Color();
SN_BACKGROUND_COLOR.from_pixel(0xffff00a0);

const TRANSPARENT_COLOR = new Clutter.Color();
TRANSPARENT_COLOR.from_pixel(0x000000ff);

// Don't make the mouse hover effect visible to the user for a menu feel.
const PANEL_BUTTON_COLOR = new Clutter.Color();
PANEL_BUTTON_COLOR.from_pixel(0x00000000);

// Lighten pressed buttons; darkening has no effect on a black background.
const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0x6E4837ff);//554138

pour overview.js

const ROOT_OVERVIEW_COLOR = new Clutter.Color();
ROOT_OVERVIEW_COLOR.from_pixel(0xE6DDD5ff);

// Time for initial animation going into Overview mode
const ANIMATION_TIME = 0.05;

pour dash.js

const BACKGROUND_COLOR = new Clutter.Color();
BACKGROUND_COLOR.from_pixel(0x000000c0);

const PRELIGHT_COLOR = new Clutter.Color();
PRELIGHT_COLOR.from_pixel(0x4f6fadaa);

const TEXT_COLOR = new Clutter.Color();
TEXT_COLOR.from_pixel(0x5f5f5fff);
const BRIGHTER_TEXT_COLOR = new Clutter.Color();
BRIGHTER_TEXT_COLOR.from_pixel(0xbbbbbbff);
const BRIGHT_TEXT_COLOR = new Clutter.Color();
BRIGHT_TEXT_COLOR.from_pixel(0xffffffff);
const SEARCH_TEXT_COLOR = new Clutter.Color();
SEARCH_TEXT_COLOR.from_pixel(0x333333ff);

const SEARCH_CURSOR_COLOR = BRIGHT_TEXT_COLOR;
const HIGHLIGHTED_SEARCH_CURSOR_COLOR = SEARCH_TEXT_COLOR;

const SEARCH_BORDER_BOTTOM_COLOR = new Clutter.Color();
SEARCH_BORDER_BOTTOM_COLOR.from_pixel(0x191919ff);

const BROWSE_ACTIVATED_BG = new Clutter.Color();
BROWSE_ACTIVATED_BG.from_pixel(0x6E4837dd);

UbunAdict

feuloren, c'est super bien ce que tu nous donnes malheureusement pour moi :/, çà ne marche qu'à moitié.
J'ai fait l'install de gnome-shell à partir des dépôts.
J'ai donc bricolé en tant que ROOT dans /usr/share/gnome-shell/

J'ai changé exactement ce que tu proposes, le bandeau de gauche reste gris foncé, si je clique sur "more" le panneau qui apparaît reste total NOIR.
Les écritures dans le panneau de gauche restent blanches, les reste prend bien une jolie couleur CRÈME.

WHY ! j'ai çà moi :mad:

desmogone

C'est bien sympa tout ça ...

C'est dommage que je n'arrive pas à le faire tourner dans une VM ...

Desmogone, en plein questionnement DE/WM ...

UbunAdict

feuloren, t'es sûr de n'avoir rien oublié 😛

UbunAdict

BACKGROUND_TOP.from_pixel(0xE6DDD5FF)

C'est de l'Hexadécimal codé sur 8 chiffres ? jusqu'à présent je le trouvais sur 6 chiffres !!!
Y a un rapport entre un CPU fonctionnant en 64 bits et un 32 bits ?

mika

UbunAdict a écritBACKGROUND_TOP.from_pixel(0xE6DDD5FF)

C'est de l'Hexadécimal codé sur 8 chiffres ? jusqu'à présent je le trouvais sur 6 chiffres !!!
Y a un rapport entre un CPU fonctionnant en 64 bits et un 32 bits ?

Je pense plutôt que c'est l'alpha (transparence). Codage couleur classique sur 6 caractères plus 2 pour la transparence.
A confirmer...

Mon problème moi, c'est que j'ai deux écrans et que bien sur le panel est pas sur le bon 🙂 Quelqu'un à une idée ?

UbunAdict

Yes merci mika tu dois avoir raison.
Ton problème est apparu avec la modif, ou bien as-tu ce problème depuis la première install de gnome-shell ?
Install à partir des dépôts ?

mika

non installé via les sources, apparu depuis peu puisqu'avant la barre s'étendait sur les deux écrans.

UbunAdict

Et tu peux te souvenir de l'évènement qui a précédé ce changement ? une mise à jour ?

mika

Bah pas d'inquiétude merci de ton aide, je teste toutes les versions, je l'utilise pas quotidiennement. Ça ne me gène que moyennement.

feuloren

@UbunAdict : le problème c'est que j'utilise la version de développement et il y a beaucoup de changement, par exemple, récemment les couleurs du panel sont passées dans le fichier .css .

Je vais essayer de voir où est le problème si ça t'intéresse toujours; par contre je ne suis pas du tout sûr d'avoir mis toutes les modifications que j'ai fait.

@mika : aucune idée désolé.

UbunAdict

ANÉFET feuloren celà ne semble pas si simple, j'ai réussit à corriger en partie mon problème sur le fichier

dash.js

const BACKGROUND_COLOR = new Clutter.Color();
BACKGROUND_COLOR.from_pixel(0xE6DDD5c0);

const PRELIGHT_COLOR = new Clutter.Color();
PRELIGHT_COLOR.from_pixel(0x4f6fadaa);

const TEXT_COLOR = new Clutter.Color();
TEXT_COLOR.from_pixel(0x5f5f5fff);
const BRIGHTER_TEXT_COLOR = new Clutter.Color();
BRIGHTER_TEXT_COLOR.from_pixel(0xbbbbbbff);
const BRIGHT_TEXT_COLOR = new Clutter.Color();
BRIGHT_TEXT_COLOR.from_pixel(0xffffffff);
const SEARCH_TEXT_COLOR = new Clutter.Color();
SEARCH_TEXT_COLOR.from_pixel(0x333333ff);

const SEARCH_CURSOR_COLOR = BRIGHT_TEXT_COLOR;
const HIGHLIGHTED_SEARCH_CURSOR_COLOR = SEARCH_TEXT_COLOR;

const SEARCH_BORDER_BOTTOM_COLOR = new Clutter.Color();
SEARCH_BORDER_BOTTOM_COLOR.from_pixel(0x191919ff);

const BROWSE_ACTIVATED_BG = new Clutter.Color();
BROWSE_ACTIVATED_BG.from_pixel(0x6E4837dd);

Par contre rien à faire avec le TEXTE, il reste toujours très clair, quelque soit mes changement dans dash.js, alors ce ne doit pas être à cet endroit.
La structure est certainement moins directe.
Bon c'est pas grave, j'espère qu'un script verra le jour pour modifier à volonté toutes ces couleurs.

pdm

Bonsoir,

je déterre ce fil plutôt qu'en ouvrir un autre. J'ai un souci pour modifier la taille de la police du panel. Je ne trouve pas comment faire. Et ça reste bien trop gros à mon goût.

Une idée ?

pdm

Bon, je cherche, je ne trouve pas, je poste et... je trouve !

Pour info donc, la taille de la police du panel n'est pas dans la partie #panel de gnome-shell.css (même si ça semble y être puiqu'il y a une ligne :

font-size: 8px;

Mais non ! c'est dans... la partie .panel-button, il y a une ligne font qui permet de changer la police et sa taille.

Après avoir réduit la police on peut vouloir réduire la taille des icônes et la hauteur du panel.

Fastoche ! On ferme gone-shell.css et on va dans panel.js et là on trouve tout intuitivement (enfin, je me comprends !) Pourquoi pas tout dans le même fichier ? Bonne question !

Gageons qu'à l'avenir des interfaces graphiques permettront de changer l'apparence de tout ça mais pour le moment il faut pas mal tâtonner...

Me reste le souci de ne pas voir les supports amovibles dans le panneau de gauche à leur insertion. Il faut lancer nautilus pour qu'ils apparaissent. Mais c'est une autre histoire.

surbun

Bonjour,

J'utilise GNOME 3 (gnome-shell) depuis la sortie de NATTY. J'ai l'interface classique. Je souhaiterais savoir comment peut-on avoir l'interface de feuloren (voir plus haut).

Merci à toute personne qui pourra m'aider car l'interface que je souhaite me convient plus pour mon travail.

Bonne journée.

Bunty

UBUNTU NATTY AMD64 - LibO3.4
GNOME 3.0.2

pdm

Bonjour,

l'interface dont tu parles est une ancienne version de gnome-shell, une version beta si tu préfères.

surbun

Bonjour pdm,

Je te remercie pour ta réponse rapide. C'est dommage qu'on ne peut pas avoir cette interface (par une extension ou autre version). Celle-ci m'aurait convenue bien mieux.
Attendons voir, peut être qu'il y a une possibilité. Quelqu'un peut avoir une réponse, du moins je l'espère.

Merci encore

Page suivante »