web-dev-qa-db-fra.com

Comment changer la couleur ET la largeur des barres de défilement sans incrustation dans Ubuntu 12.04

Je sais que beaucoup de gens se sont plaints des barres de défilement presque invisibles et non utilisables dans les versions récentes d'Ubuntu, même après la suppression ou la désactivation des barres de défilement par défaut superposées. Je me demande comment puis-je changer facilement leur couleur ET leur largeur.

J'ai un moniteur de 13,3 pouces avec une résolution de 1600 * 900 et je peux à peine les voir, comme vous pouvez le voir sur ces images:

http://placerdigital.net/up/Dropbox_003.png

http://placerdigital.net/up/Nuvola.png

http://placerdigital.net/up/Ubuntu%20Software%20Center_004.png

J'ai déjà modifié Firefox, LibreOffice et les barres de défilement de certains logiciels à l'aide de GNOME Color Chooser:

enter image description here

Au fait, j'utilise Unity. Merci!

12.04colorsscrollbar
13
Chuqui

Remarque:

Les formatages dans cette réponse sont optimaux pour précision (Ubuntu 12.04) uniquement, voir la réponse suivante pour améliorer le formatage de trusty (Ubuntu 14.04).

Rendre les barres de défilement visibles (changer de couleur)

Sur la base des informations de vasa1 fournies ci-dessus, j'ai changé la couleur des barres de défilement classiques en la couleur de sélection par défaut, identique à celle utilisée par les barres de défilement en surimpression.

Pour les applications GTK 3, modifiez:

gksu gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

à partir de la ligne 1580 pour que cela ressemble à:

.scrollbar.slider,
.scrollbar.slider:hover,
.scrollbar.button,
.scrollbar.slider.vertical,
.scrollbar.button.vertical {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@selected_bg_color, 1.38)),
                                     to (shade (@selected_bg_color, 1.22)));
    border-style: solid;
    border-width: 1px;

    -unico-border-gradient: -gtk-gradient (linear, left top, right top,
                                           from (shade (@selected_bg_color, 1.14)),
                                           to (shade (@selected_bg_color, 1.14)));
    -unico-centroid-texture:  url("assets/scrollbar_handle_vertical.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, right top,
                                                 from (shade (@selected_bg_color, 1.46)),
                                                 to (shade (@selected_bg_color, 1.3)));
    -unico-inner-stroke-width: 1px;
}

.scrollbar.slider.vertical:hover {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@selected_bg_color, 1.28)),
                                     to (shade (@selected_bg_color, 1.02)));
    border-style: solid;
    border-width: 1px;

    -unico-border-gradient: -gtk-gradient (linear, left top, right top,
                                           from (shade (@selected_bg_color, 0.94)),
                                           to (shade (@selected_bg_color, 0.94)));
    -unico-centroid-texture:  url("assets/scrollbar_handle_vertical.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, right top,
                                                 from (shade (@selected_bg_color, 1.36)),
                                                 to (shade (@selected_bg_color, 1.1)));
    -unico-inner-stroke-width: 1px;
}

.scrollbar.slider.horizontal,
.scrollbar.button.horizontal {                                   
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.38)),
                                     to (shade (@selected_bg_color, 1.22)));

    -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                           from (shade (@selected_bg_color, 1.14)),
                                           to (shade (@selected_bg_color, 1.14)));
    -unico-centroid-texture:  url("assets/scrollbar_handle.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, left bottom,
                                                 from (shade (@selected_bg_color, 1.46)),
                                                 to (shade (@selected_bg_color, 1.3)));
}

.scrollbar.slider.horizontal:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.28)),
                                     to (shade (@selected_bg_color, 1.02)));

    -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                           from (shade (@selected_bg_color, 0.94)),
                                           to (shade (@selected_bg_color, 0.94)));
    -unico-centroid-texture:  url("assets/scrollbar_handle.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, left bottom,
                                                 from (shade (@selected_bg_color, 1.36)),
                                                 to (shade (@selected_bg_color, 1.1)));
}


.scrollbar.button,
.scrollbar.button:insensitive {
    -unico-outer-stroke-width: 0;
}

Cela devrait être par défaut.

Pour les applications GTK 2, modifiez:

gksu gedit /usr/share/themes/Ambiance/gtk-2.0/gtkrc

à partir de la ligne 223 pour que cela ressemble à:

style "scrollbar" = "button" {
    xthickness = 2
    ythickness = 2

    bg[NORMAL] = shade(1.3, @selected_bg_color)
    bg[PRELIGHT] = shade (1.04, @selected_bg_color)

    bg[ACTIVE] = shade (0.96, @selected_bg_color)

    engine "murrine"
    {
        border_shades = {1.15, 1.1}
        roundness = 20
        contrast = 1.0
        trough_shades = {0.92, 0.98}
        lightborder_shade = 1.3
        glowstyle = 5
        glow_shade = 1.02
        gradient_shades = {1.2, 1.0, 1.0, 0.86}
        trough_border_shades = {0.9, 0.98}
    }
}

Il ne semble pas identique à 100% au formatage GTK 3, alors n'hésitez pas à l'améliorer.

Rendre les barres de défilement cliquables (augmenter la largeur)

Pour augmenter la petite largeur stupide qui n'a jamais été conçue pour être utilisée en production, je suppose, apportez les modifications suivantes aux mêmes fichiers.

Pour les applications GTK 3:

gksu gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

modifiez la ligne 1550 afin qu'elle ressemble à:

.scrollbar {
    -GtkScrollbar-has-backward-stepper: 0;
    -GtkScrollbar-has-forward-stepper: 0;
    -GtkRange-slider-width: 16;

    border-radius: 20px;

    -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                           from (shade (@bg_color, 0.74)),
                                           to (shade (@bg_color, 0.74)));
}

Pour les applications GTK 2, modifiez:

gksu gedit /usr/share/themes/Ambiance/gtk-2.0/gtkrc

modifiez la ligne 34 pour qu'elle ressemble à:

GtkScrollbar::slider-width = 16

Pour ceux qui préfèrent les fichiers complets déjà édités, vous pouvez télécharger le mien ici:

GTK 3: gtk-widgets.css

GTK 2: gtkrc

Faites attention. Faire des sauvegardes.

Prendre plaisir! :)

4
Nicolas

Je suppose que vous faites référence aux barres de défilement de superposition parce que vous mentionnez Unity. Je ne sais pas comment changer la largeur, mais vous pouvez certainement changer la couleur. Si la couleur est suffisamment distincte, je pense que la largeur ne pose pas vraiment problème, car en vol stationnaire, elle devient très large.

Vous devez rechercher dans le dossier de votre thème des fichiers nommés gtkrc (dans le dossier gtk-2.0) et gtk-widgets.css (dans le dossier gtk-3.0). Ouvrez ces fichiers avec un éditeur de texte. Vous devrez peut-être utiliser gksudo gedit au lieu de gedit si votre thème est dans/usr/share/themes et non dans ~/.themes. Ensuite, recherchez barres de défilement superposées ou superposition-barre de défilement ou quelque chose de similaire et jouez avec les couleurs spécifiées dans ces sections. Vous pouvez même spécifier votre propre couleur en code hexadécimal.

Bien entendu, vous pouvez définir des couleurs différentes dans les deux fichiers si vous le souhaitez.

Pour visualiser les modifications, vous devrez peut-être basculer vers un autre thème et revenir après avoir effectué et enregistré les modifications apportées à ces fichiers.

Les modifications que vous apportez dans / usr/share/themes s’appliqueront à l’ensemble du système et les modifications apportées dans ~/.themes seront propres à l’utilisateur.

Voici à quoi ressemble ma barre de défilement en superposition dans PCManFM.

My overlay scrollbar

Edit: Dans le cas où l'on utilise des barres de défilement conventionnelles, puis pour augmenter le contraste entre le curseur et le creux dans les applications gtk-3.0 telles que gedit, il est possible d'éditer le gtk-widgets.css fichier mentionné ci-dessus. Pour ce faire, recherchez la section intitulée barre de défilement (ou quelque chose de similaire) et recherchez les lignes qui ont quelque chose comme:

.scrollbar.slider,
.scrollbar.slider:hover,
.scrollbar.button,
.scrollbar.slider.vertical,
.scrollbar.slider.vertical:hover,
.scrollbar.button.vertical {
    background-image: -gtk-gradient (linear, left top, right top,
                                 from (shade (@bg_color, 1.08)),
                                 to (shade (@bg_color, 0.92)));
    border-style: solid;
    border-width: 1px;

Ici, on peut jouer avec les valeurs de la image de fond en changeant la teinte. Plus la valeur est élevée, plus la valeur est basse, plus la valeur est sombre.

Je préfère faire quelque chose de plus simple: je change image de fond en arrière-plan -couleur et je viens d'avoir une couleur que j'aime bien. Ainsi, par exemple, background-color: red; donnerait probablement un contraste exceptionnel.

Mon code ressemble à ceci:

.scrollbar.slider,
.scrollbar.button,
.scrollbar.slider.vertical,
.scrollbar.button.vertical {
    background-color: #003263; /*@theme_bg_color;*/
    /**/
    /**/

De toute évidence, une sauvegarde avant édition est recommandée et vous pouvez commenter des éléments dans le fichier gtk-widgets.css au lieu de supprimer des éléments en utilisant /* et */.

(Je ne parviens pas à mettre en forme le format des guillemets tout en postant des réponses. Si quelqu'un nettoie les choses, je vous en serais reconnaissant.)

ne dernière modification (j'espère): Les utilisateurs de Chrome ou Chromium peuvent augmenter le contraste en modifiant leur fichier gtk-2.0/apps/chromium.rc si leur thème le fournit ou en le modifiant. gtk-2.0/gtkrc si ce qui est requis est présent ici. Dans les deux cas, il convient de rechercher une section intitulée style "chrome-gtk-frame". Ici encore, jouez avec la valeur de teinte dans cette ligne (ou similaire):

ChromeGtkFrame::scrollbar-slider-normal-color = shade (1.4, @panel_bg)

Ou on peut simplement spécifier une couleur comme celle-ci:

ChromeGtkFrame::scrollbar-slider-normal-color = "#003263"

ou

ChromeGtkFrame::scrollbar-slider-normal-color = "blue"

(Les citations sont obligatoires.)

8
user25656

Pour Ubuntu 14.04 (Trusty Tahr) , des modifications légèrement différentes sont nécessaires.

GTK 3: gtk-widgets.css va à: /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

GTK 2: gtkrc va à: /usr/share/themes/Ambiance/gtk-2.0/gtkrc

Faire des sauvegardes avant:

Sudo cp /usr/share/themes/Ambiance/gtk-2.0/gtkrc /usr/share/themes/Ambiance/gtk-2.0/gtkrc.bak
Sudo cp gtkrc /usr/share/themes/Ambiance/gtk-2.0/
Sudo cp /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css.bak
Sudo cp gtk-widgets.css /usr/share/themes/Ambiance/gtk-3.0/

Ces commandes attendent les fichiers téléchargés gtkrc et gtk-widgets.css dans le répertoire en cours.

2
Nicolas