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

13

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 avoir supprimé ou désactivé les barres de défilement de superposition par défaut. Je me demande comment 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à changé Firefox, LibreOffice et les barres de défilement d'autres logiciels en utilisant le sélecteur de couleurs GNOME:

entrez la description de l'image ici

Au fait, j'utilise Unity. Merci!

12.04  colors  scrollbar 
— Chuqui
source
1
La capture d'écran serait bien.
— Uri Herrera
1
Une capture d'écran est un must je pense dans ce cas. Étant donné que la réponse fournie n'est pas ce que vous vouliez.
— Anwar
Salut @UriHerrera et Anwar, j'ai déjà ajouté quelques images. Merci!
— Chuqui
1
S'il vous plaît, pour l'amour de Dieu, pourquoi les développeurs ne facilitent-ils pas simplement la modification dans les paramètres système?
— neuronet

Réponses:

4

Remarque:

Les formats de cette réponse sont optimaux pour précis (Ubuntu 12.04 uniquement), voir la réponse suivante pour des formats améliorés pour 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 - la même que les barres de défilement de superposition utilisent également.

Pour les applications GTK 3, modifiez:

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

à partir de la ligne 1580 pour qu'elle 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 qu'elle 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 100% identique 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 idiote 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 pour 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. Faites des sauvegardes.

Prendre plaisir! :)

— Nicolas
source
Pour ceux qui ont déjà lu ma réponse: avec la dernière modification, j'ai grandement amélioré le formatage. :)
— Nicolas
8

Je suppose que vous faites référence aux barres de défilement de superposition, car 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 n'est pas vraiment un problème car en vol stationnaire, elle devient assez large.

Vous devez rechercher dans le dossier de votre thème des fichiers appelé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 geditau lieu de simplement geditsi votre thème est dans / usr / share / themes et non dans ~ / .themes. Ensuite, recherchez les barres de défilement de superposition ou la barre de défilement de superposition 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.

De toute évidence, vous pouvez définir différentes couleurs 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 dans ces fichiers.

Les modifications que vous apportez dans / usr / share / themes seront à l'échelle du système et les modifications dans ~ / .themes seront spécifiques à l'utilisateur.

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

Ma barre de défilement de superposition

Modifier : 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, on peut modifier le fichier gtk-widgets.css 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 ceci:

.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 l' image de fond en changeant la teinte. Une valeur supérieure est plus lumineuse, une valeur inférieure est plus sombre.

Je préfère faire quelque chose de plus simple: je change l'image d'arrière-plan en couleur d' arrière-plan et j'ai juste une couleur que j'aime. Ainsi, par exemple, couleur de fond: rouge; 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 modification est recommandée et on peut commenter les éléments du fichier gtk-widgets.css au lieu de supprimer des éléments en utilisant /*et */.

(Je n'arrive pas à faire fonctionner la mise en forme des citations en bloc lors de la publication des réponses. Si quelqu'un nettoyait les choses, je lui en serais reconnaissant.)

Une dernière modification (j'espère): les utilisateurs de Chrome ou de Chromium peuvent augmenter le contraste en modifiant leur gtk-2.0/apps/chromium.rcfichier si leur thème le fournit ou en modifiant gtk-2.0/gtkrcsi ce qui est requis y est présent. Dans les deux cas, il faut rechercher un style de section "chrome-gtk-frame" . Ici, encore une fois, jouez avec la valeur de l'ombre 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 devis sont obligatoires.)

— Eliah Kagan
source
1
Je suis désolé, @ vasa1! J'ai oublié de mentionner que j'ai supprimé les barres de défilement de superposition en utilisant "Unsettings" ou certaines commandes. J'ai maintenant des barres de défilement étroites et à faible contraste. C'est ce que je dois corriger. (J'ai déjà édité la question d'origine).
— Chuqui
@Chuqui, pourriez-vous s'il vous plaît mentionner quelques applications spécifiques qui posent problème? Et mentionnez le thème que vous utilisez. Je connais au moins un thème qui a des barres de défilement très fines. Dans ce cas, il s'agit peut-être simplement d'essayer un autre thème.
Salut @ vasa1, je tiens à vous remercier encore pour les instructions détaillées que vous m'avez données. Je suis désolé de ne pas avoir été assez clair dans ma question. Ci-dessus, vous pouvez voir des images d'applications où les barres de défilement sont difficiles à voir: Nautilus, Nuvola Player et Ubuntu Software Center. Au contraire, en utilisant Gnome Color Chooser, je pouvais changer Firefox, Ubuntu One et les barres de défilement d'autres logiciels, comme LibreOffice. J'utilise le thème par défaut: Ambiance
— Chuqui
1
La modification que j'ai fournie devrait vous indiquer comment augmenter le contraste, même pour Nautilus et USC. Je ne sais pas pour Nuvola. IMO, la largeur de barre de défilement par défaut dans Ambiance n'est pas trop mauvaise (une fois que vous avez modifié le contraste).
Très belle réponse. Comment savoir si une application utilise GTK 2 ou GTK 3? Ex nautilus, gedit utilise GTK 3 mais firefox / thunderbird utilise GTK 2. Existe-t-il un moyen de le savoir?
— Chandrayya GK
2

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

Faites 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 gtkrcet gtk-widgets.cssdans le répertoire courant.

— Nicolas
source
1
Cela ne serait-il pas préférable de modifier votre autre réponse?
— Pavel V.
Mon intention pour une réponse distincte était de séparer clairement les éléments 12.04 de 14.04 afin que les consommateurs de mes fichiers de mise en page préparés puissent trouver les bons rapidement et sans se tromper. Mais ... eh bien ... on peut discuter de ...;)
— Nicolas
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.