PERSONNALISATION UBUNTU 16.04 ou 14.04
avec UNITY

Dans cette page, vous trouverez toutes les personnalisations de UBUNTU 16.04 ou 14.04 - avec Unity ! - que j'ai réussies à faire.

Si vous voulez m'imiter, il vous faudra installer :

  1. Synaptic : C'est un gestionnaire de paquets (je sais, il n'est pas vraiment obligatoire, mais la logithèque Ubuntu me sort par le nez). Pour l'installer, il faut de toute façon utiliser la logithèque Ubuntu (tapez synaptic dans le champ de recherche => cliquez dans la ligne de même nom qui vient de s'afficher => Installer...). Une fois fait, pour toutes les installations suivantes, vous aurez le choix entre Synaptic et la logithèque Ubuntu (sans oublier la ligne de commande pour les inconditionnels).
  2. Cairo-Dock : Une barre de lancement d'applications à la MAC, avec icones animés et desklets, légère, pratique, ludique...
  3. gksu : C'est une interface graphique pour "su". Nous en aurons besoin pour des lanceurs personnalisés.
  4. gnome-search-tools : C'est un outil pour chercher des fichiers ET dans les fichiers. INDISPENSABLE !
  5. dconf editor : Éditeur de la configuration de l'environnement de votre bureau.
  6. gnome-tweak-tool : Outil permettant d'ajuster plusieurs options avancées de Gnome.
  7. Unity Tweak Tool : Gestionnaire de nombreux paramètres d'Unity.
  8. Compiz Config Setting Manager : Gestionnaire de configuration de Compiz.
  9. gtk-theme-config : Gnome Theme Configuration permet de changer certains élèments d'un thème GTK (2 ou 3).
  10. numlockx : Active la touche de verrouillage du pavé numérique.

CAIRO DOCK (et UNITY)

Grâce à ce dock, nous allons séparer les applications actives de leurs lanceurs.

Pour finir cette première personnalisation, nous allons supprimer tous les boutons lanceurs d'application présents dans le lanceur d'Unity, pour ne conserver à cette barre qu'une fonction "barre des tâches actives" => clic du droit sur un bouton => "Retirer du lanceur"

GEDIT et NAUTILUS en root

Nous allons ajouter 2 lanceurs au dock de Cairo. Ces 2 lanceurs utilisent Zenity (il est installé par défaut sur la 14.04) qui permet d'ouvrir une fenêtre de type boite de dialogue (entre autre).

On refait la même chose avec Gedit :

Pour avoir une différence visuelle entre Gedit en simple utilisateur et Gedit en root :
Edition => Préférences => onglet "Police et couleurs" => Prendre un Jeu de couleurs pour l'un et un différent pour l'autre, tout simplement !

Pour Nautilus, la barre de menu est intégrée à la barre de titre en simple utilisateur, alors qu'elle est sous la barre de titre en root. Tant que nous sommes dans Nautilus, on peut ajouter "Ouvrir en root" dans son menu contextuel, voir cette page.

Pour changer pas mal de couleurs

  1. dconf editor => org => gnome => desktop => interface... et dans le champ "gtk-color-scheme", mettre, séparés par un ";" ou un "\n" :
    base_color:#C4B190; le fond des champs de formulaires
    bg_color:#D4C1A0; semble ne plus prendre le dessus (le fond et la décoration des fenêtres)
    fg_color:black; le texte des titres des champs de formulaires
    tooltip_bg_color:#644600; le fond des boites de dialogue et des info-bulles
    tooltip_fg_color:#fff; le texte des boites de dialogue et des info-bulles
    selected_bg_color:#644600; le fond des curseurs, bordures des champs de formulaires
    selected_fg_color:orange; le texte sélecté dans les champs de formulaires
    text_color:#543 le texte dans les champs de formulaires
    Ce qui donne en ce qui me concerne :
    base_color:#C4B190;bg_color:#D4C1A0;fg_color:black;tooltip_bg_color:#644600; tooltip_fg_color:#fff;selected_bg_color:#644600;selected_fg_color:orange;text_color:#543
  2. Dans ce qui suit, je nomme mon thème "RadianceJPB", vous lui donnez le nom que vous voulez bien sûr.
    C'est une simple copie dans votre dossier personnel du répertoire /usr/share/themes/Radiance
    Vous pouvez la faire par votre explorateur de fichier (Nautilus) en "root" puisque la source est dans un répertoire système... ou en ligne de commande. Démarrer le terminal (Ctrl+Alt+T) :
    • Créez dans votre home un dossier caché ayant obligatoirement "themes" pour nom : mkdir ~/.themes
    • Créez dans ce dossier caché un sous-dossier ayant le nom que vous avez choisi pour votre thème :
      mkdir ~/.themes/RadianceJPB
    • Copiez-y le thème que vous voulez modifier : sudo cp /usr/share/themes/Radiance ~/.themes/RadianceJPB
    Une fois la copie faite, il faut changer le propriétaire et les droits de ce nouveau dossier. Le plus simple, c'est en ligne de commande :
    sudo chown "nom_de_session:groupe" -R ~/.themes/RadianceJPB
    puis changez les droits : sudo chmod ug+rwx -R ~/.themes/RadianceJPB
  3. ~/.themes/RadianceJPB/gtk-3.0/gtk-main.css Comme au-dessus, je vous mets les lignes où j'ai pu constater que la modification que je venais de faire avait eu une influence sur la présentation du bureau (ce qui veut dire que certaines modifications ont peut-être provoqué un changement, mais il m'a échappé).
    /* default color scheme */
    @define-color base_color #D4C1A0; couleur de la zone principale de nautilus et sans doute d'autres...
    @define-color text_color #3C3C3C; couleur du texte de la zone principale de nautilus...
    @define-color bg_color #C4B190; couleur de la barre latérale, des onglets, des espaces entre la fenêtre et la bordure, du fond des fichiers sélectés...
    @define-color fg_color #000000; couleur du texte des zones vues en bg_color
    @define-color tooltip_bg_color #775500; le texte des info-bulles de la barre des outils
    @define-color tooltip_fg_color #ffffff; le fond des info-bulles de la barre des outils
    @define-color selected_bg_color #D76842; couleur du fond du texte sélecté dans nautilus et autres...
    @define-color selected_fg_color #fff; couleur texte sélecté dans nautilus et autres...
    /* theme common colors */
    @define-color button_bg_color shade (@bg_color, 1.02); font des menus déroulants
    @define-color notebook_button_bg_color shade (@bg_color, 1.02); ?
    @define-color button_insensitive_bg_color mix (@button_bg_color, @bg_color, 0.6); ?
    @define-color dark_bg_color #C4B190; le fond de la barre de menu, du bandeau haut (pas toujours)...
    @define-color dark_fg_color #000; la couleur de la date dans le bandeau du haut (pas toujours), le texte de la barre de menu, de la barre d'outils
    @define-color backdrop_fg_color mix (@bg_color, @fg_color, 0.8); ?
    @define-color backdrop_text_color mix (@base_color, @text_color, 0.8); ?
    @define-color backdrop_dark_fg_color mix (@dark_bg_color, @dark_fg_color, 0.75); ?
    /*@define-color backdrop_dark_bg_color mix (@dark_bg_color, @dark_fg_color, 0.75);*/ (ce n'est pas moi qui l'est mis en commentaire)
    @define-color backdrop_selected_bg_color shade (@bg_color, 0.92); ?
    @define-color backdrop_selected_fg_color @fg_color; ?
  4. ~/.themes/RadianceJPB/gtk-3.0/gtk-widgets.css
    couleur du texte de certains éléments actifs : onglets, n° de ligne, barre d'état...
    GtkWindow {
          color: @fg_color;
          background-color: @bg_color;
    }

    le fond des onglets inactifs dans Gedit et autres
    GtkPaned {
          background-color: #AB9774;
    }

    couleur du texte de certains éléments inactifs : onglets, n° ligne, barre d'état...
    GtkWindow:backdrop {
          color: @backdrop_fg_color;
    }

    La barre d'état
    .background {
          background-color: @bg_color;
          border-width: 0;
    }

    Couleur du X pour fermer l'onglet, autre texte barre d'état, intitulé colonne... (fenêtre active)
    GtkSwitch.slider,
    .button {
    ...(je n'ai rien modifié, c'est simplement pour référence)
    }

    Couleur du X pour fermer l'onglet, autre texte barre d'état, intitulé colonne... (fenêtre inactive)
    GtkSwitch.slider:backdrop,
    .button:backdrop {
    ...
    }

    Le fond de la rangée sélectée d'un tableau (fenêtre active)
    row:selected {
    ...
    }

    Le fond de la rangée sélectée d'un tableau (fenêtre inactive)
    row:selected:backdrop {
    ...
    }

    Le fond du titre des colonnes d'un tableau (fenêtre active)
    column-header .button {
    ...
    }

    Le fond du titre des colonnes d'un tableau (fenêtre inactive)
    column-header .button:backdrop {
    ...
    }

    /* progressbar and scale (ligne 1307) */
    Les différents éléments des menus ouverts, les items de la barre de menu (sauf lorsqu'elle est intégrée dans la barre de titre), le centre de la barre de progression (exemple : gestionnaire de MAJ)
    .menubar .menuitem .scale.highlight.left,
    .scale.highlight.left,
    .progressbar,
    ...
    .progressbar row:nth-child(odd) {
          background-color: red; (oui, j'ai mis rouge, ce n'est pas un oubli ;-) )
    }

    La couleur du séparateur horizontal dans les items ouverts de la barre de menu
    GtkTreeMenu .menuitem.separator,
    .toolbar .primary-toolbar .menuitem.separator,
    ...
    .menuitem.separator {
          border-color: shade (@dark_bg_color, 0.99);
          border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
          border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
    }

    la couleur du fond des n° de lignes (Gedit)
    GtkTextView {
          background-color: @bg_color;
    }

    /* primary-toolbar (ligne 1926) */
    Le fond de la barre d'outils de la fenêtre active (mis en mono couleur identique aux autres fonds de même type, la valeur d'origine a été mise en commentaire)
    .primary-toolbar,
    .primary-toolbar,
    .primary-toolbar .toolbar,
    .menubar.toolbar,
    .header-bar {
          -GtkWidget-window-dragging: true;
          background-image: none;
          background-color: @dark_bg_color;
          /* background-image: -gtk-gradient (linear, left top, left bottom,
               from (#C4B190),
               to (#C4B190)); */
    ...
    }

    Le fond de la barre d'outils des fenêtres inactives
    .primary-toolbar .toolbar:backdrop,
    .primary-toolbar.toolbar:backdrop,
    .menubar.toolbar .toolbar:backdrop,
    .menubar.toolbar.toolbar:backdrop,
    .header-bar:backdrop {
          background-image: none;
          background-color: @dark_bg_color;
    ...
    }

    le texte des items de la barre d'outils
    .primary-toolbar GtkComboBox:backdrop,
    .primary-toolbar .button:backdrop,
    .menubar.toolbar GtkComboBox:backdrop,
    .menubar.toolbar .button:backdrop,
    .header-bar GtkComboBox:backdrop,
    .header-bar .button:backdrop {
          color: @backdrop_dark_fg_color;
          text-shadow: 0 -1px shade (@dark_bg_color, 0.9);
    ...
    }

    la couleur du fond des items de la barre d'outils lors de leur survol
    .primary-toolbar .raised .button,
    .primary-toolbar .raised.button,
    ...
    .header-bar .button:insensitive {
          background-image: -gtk-gradient (linear, left top, left bottom,
          from (shade (@dark_bg_color, 1.2)),
          to (shade (red, 1.1)));
    ...
    }

    (oui, rouge est très joli... mais comme j'ai eu droit à un dégât colatéral, il m'a fallu modifier le CSS de Nautilus (voir plus loin))


    la couleur des séparateurs de la barre d'outils
    ..primary-toolbar GtkSeparatorToolItem,
    .primary-toolbar .separator,
    ...
    .header-bar .separator:insensitive {
          border-color: alpha (shade (cyan, 0.94), 0.35);
          border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
          border-right-color: alpha (shade (cyan, 1.26), 0.5);
    ...
    }

    (il faut préciser "border-right-color" bien qu'avec "border-color" ce soit implicite. Pourquoi ? Je n'en sais rien !)

  5. ~/.themes/RadianceJPB/gtk-3.0/apps/unity.css
    les couleurs de la barre de titre de la fenêtre active
    UnityDecoration.top {
    ...
          background-image: -gtk-gradient (linear, left top, left bottom,
               from (shade (#FA0, 1.06)),
               to (#644600));
          color: #000;
          text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06),
               0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06);
    }

    les couleurs de la barre de titre des fenêtres inactives
    UnityDecoration.top:backdrop {
    ...
          background-image: -gtk-gradient (linear, left top, left bottom,
               from (shade (#B9985F, 0.96)),
               to (@dark_bg_color)); /* #edebe6 */
    ...
          color: #555;
    }
  6. ~/.themes/RadianceJPB/gtk-3.0/gtk-widgets-borders.css
    (j'en avais marre des bordures noires autour des noms des répertoires dans la pseudo barre d'adresse de Nautilus, j'ai donc remplacé les images. Pour voir les images originales, ouvrez le fichier /usr/share/themes/Radiance/gtk-3.0/gtk-widgets-borders.css)
    .primary-toolbar .button,
    .menubar.toolbar .button,
    .header-bar .button {
          border-image: url("assets/backdrop-button-active-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch;/* button-toolbar */
    }
    .primary-toolbar .button:focused,
    .menubar.toolbar .button:focused,
    .header-bar .button:focused {
          border-image: url("assets/backdrop-button-active-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch;/* button-toolbar-focused */
    }
    .primary-toolbar .button:active,
    .menubar.toolbar .button:active,
    .header-bar .button:active {
          border-image: url("assets/backdrop-button-active.png") 10 12 10 12 / 10px 12px 10px 12px stretch;/* button-toolbar-active */
    }
    .primary-toolbar .button:active:focused,
    .menubar.toolbar .button:active:focused,
    .header-bar .button:active:focused {
          border-image: url("assets/backdrop-button-active-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch;
    }/* button-toolbar-active-focused */
    .primary-toolbar .button:backdrop,
    .menubar.toolbar .button:backdrop,
    .header-bar .button:backdrop {
          border-image: url("assets/backdrop-button-active-disabled.png") 10 12 10 12 / 10px 12px 10px 12px stretch; /* backdrop-button-toolbar.png */
    }
    .primary-toolbar .button:active:backdrop,
    .menubar.toolbar .button:active:backdrop,
    .header-bar .button:active:backdrop {
          border-image: url("assets/backdrop-button-active.png") 10 12 10 12 / 10px 12px 10px 12px stretch;/* backdrop-button-toolbar-active.png */
    }
  7. Pour avoir de beaux boutons de contrôle (à la MAC)
    1. Ils sont dans ~/themes/RadianceJPB/unity
    2. rechercher sur Internet des boutons super méga extra chouette (j'ai récupéré une copie d'écran d'une fenêtre MAC)
    3. au besoin, dans "The Gimp", faire des modifs de saturation, contraste, teinte, balance des couleurs... pour avoir un jeu de boutons actifs et un autre pressés (pour les boutons inactifs, j'ai laissé le jeu par défaut, ça augmente le contraste).
    4. dans The gimp, ouvrir un de ces jeux, sélectionner le premier bouton avec l'outil de sélection elliptique, le copier dans une nouvelle image, lui donner pour taille 15x15 px et pour canevas 19x19
    5. au besoin (mais normalement, ce ne sera pas nécessaire), rendre le fond transparent : couleur => couleur vers alpha
    6. non obligatoire : j'ai ajouté un tiret, un carré et une croix aux boutons actifs (pas les survolés ni pressés)
    7. enregistrer chaque image dans le dossier ~/themes/RadianceJPB/unity sous le nom voulu (le bouton "fermer", quand on le survole, s'appelle "close_focused_prelight" ; fermer "pressé" => close_focused_pressed ; fermer "actif" => "close" et "close_focused_normal" (j'ai donné la même image aux 2) ; agrandir => "maximize" ; ... )
  8. ~/.themes/RadianceJPB/gtk-3.0/apps/nautilus.css
    La modification de la couleur du fond des items de la barre d'outils lors de leur survol a eu aussi pour effet de colorier de la même couleur 3 boutons de la barre d'adresse de Nautilus. Pas grave, il suffit d'éditer le fichier propre à cette application :
    NautilusWindow .header-bar .raised .button,
    NautilusWindow .header-bar .raised.button,
    NautilusWindow .header-bar .button:hover,
    NautilusWindow .header-bar .button:active,
    NautilusWindow .header-bar .button:insensitive {
          background-image: -gtk-gradient (linear, left top, left bottom,
               from (shade (@dark_bg_color, 1.2)),
               to (shade (@dark_bg_color, 1.1)));
          /*border-width: 1px;*/
    }

    (j'ai fait un banal copier/coller du code modifié dans "gtk-widgets.css", puis j'ai ajouté devant chaque sélecteur de classe le sélecteur d'élément "NautilusWindow" (ils auraient pu/dû mettre à la place de ce sélecteur d'élément un sélecteur d'ID "#NautilusWindow", cela aurait fait plus "strict"). Oui, j'aurai aussi pu mettre ce code dans "gtk-widgets.css" mais ça aurait fait moins propre).

  9. Pour que ces changements soient immédiatement pris en compte
    La première fois :
    Démarrez "Gnome Tweak Tool" => Appearance => GTK+ => choisir votre theme
    Si vous ne voyez pas votre thème, regardez le nom du propriétaire et les droits de tous les dossiers et fichiers

    Ensuite :
    Gnome Tweak Tool => Appearance => GTK+ => choisir un autre thème => puis revenir au votre

    (vous pouvez aussi faire ce changement via "Unity Tweak Tool" => Thème > ...)

  10. Ne pas oublier de faire une sauvegarde de ce dossier ~/.themes/RadianceJPB
  11. Pour avoir de belles couleurs dans la barre supérieure (Panel/Unity Global Menu) et dans le lanceur d'Unity
    Unity Tweak Tool => Lanceur => Couleur personnalisée (j'ai mis #221100 car elle va bien avec mon fond d'écran "balazan_4_3") => Niveau transparence : 75% à peu près => Masquer automatiquement coché
    Unity Tweak Tool => Barre de menu => Transparence : 50% à peu près
  12. On peut ajouter une ombre à la fenêtre active
    CCSM => Ubuntu Unity Plugin => onglet "Décorations" => Active windows shadow color...
    Pour que ce soit immédiatement pris en compte, il faut cocher "Override theme settings"
    Au même endroit, on peut aussi changer la couleur de l'ombre des fenêtres inactives.
  13. Les couleurs du terminal (Ctrl+Alt+T)
    Édition => Préférences du profil => Couleurs => Texte => #FFFFFF
    Édition => Préférences du profil => Couleurs => Arrière-plan => #281A02
    Édition => Préférences du profil => Arrière-plan => Arrière-plan transparent => 75%
  14. Dernier raffinement pour les couleurs : le remplacement de la couleur orange
    "Gnome Theme Configuration" => c'est le premier choix (j'ai mis #8F5902, toujours pour être en concordance avec mon papier-peint).
    Sur un poste, ça marche ; sur l'autre pas !?!

Pour avoir le verrouillage du pavé numérique actif au démarrage

Ne pas créer le fichier /etc/lightdm/lightdm.conf comme pour les versions antérieures, sinon lightdm ne se lancera pas !
Éditez /usr/share/lightdm/lightdm.conf.d/50-unity-greeter.conf
Ajouter à la fin de la section [SeatDefaults]
greeter-setup-script=/usr/bin/numlockx on

Pour avoir les menus dans la barre de titre des applications et non dans la barre supérieure (Panel/Unity Global Menu)

Clic du droit dans le bureau => Modifier l'arrière plan du bureau => Onglet "Comportement" => Afficher les menus pour une fenêtre => Dans la barre de titre de la fenêtre.