So ändern Sie Farbe und Breite von Nicht-Overlay-Bildlaufleisten in Ubuntu 12.04

13

Ich weiß, dass sich viele Leute über die fast unsichtbaren und nicht verwendbaren Bildlaufleisten in den letzten Versionen von Ubuntu beschwert haben, selbst nachdem die Standard-Overlay-Bildlaufleisten entfernt oder deaktiviert wurden. Ich frage mich, wie ich ihre Farbe UND Breite leicht ändern kann.

Ich habe einen 13,3-Zoll-Monitor mit einer Auflösung von 1600 * 900 und kann sie kaum sehen, wie Sie auf den folgenden Bildern sehen können:

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

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

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

Ich habe bereits Firefox, LibreOffice und einige andere Bildlaufleisten mit GNOME Color Chooser geändert:

Bildbeschreibung hier eingeben

Übrigens benutze ich Unity. Vielen Dank!

Chuqui
quelle
1
Screenshot wäre schön.
Uri Herrera
1
Ein Screenshot ist in diesem Fall ein Muss. Da die angegebene Antwort nicht das ist, was Sie wollten.
Anwar
Hallo @UriHerrera und Anwar, ich habe bereits einige Bilder hinzugefügt. Vielen Dank!
Chuqui
1
Bitte aus Liebe zu Gott, warum machen es die Entwickler nicht einfach, dies in den Systemeinstellungen zu ändern?
Neuronet

Antworten:

4

Hinweis:

Die Formatierungen in dieser Antwort sind nur für präzise (Ubuntu 12.04) optimal. In der nächsten Antwort finden Sie verbesserte Formatierungen für vertrauenswürdige (Ubuntu 14.04).


Bildlaufleisten sichtbar machen (Farbe ändern)

Basierend auf den oben angegebenen Informationen von vasa1 habe ich die Farbe der klassischen Bildlaufleisten in die Standardauswahlfarbe geändert - dieselbe, die auch Overlay-Bildlaufleisten verwenden.

Für GTK 3-Anwendungen ändern Sie:

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

ab Zeile 1580 so, dass es so aussieht:

.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;
}

Dies sollte Standard sein.

Für GTK 2-Anwendungen ändern Sie:

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

ab Zeile 223 so, dass es so aussieht:

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}
    }
}

Es sieht nicht 100% identisch mit der GTK 3-Formatierung aus. Sie können es also jederzeit verbessern.


Bildlaufleisten anklickbar machen (Breite erhöhen)

Ich gehe davon aus, dass die folgenden Änderungen an denselben Dateien vorgenommen werden, um die alberne, kleine Breite zu erhöhen , die niemals für die Verwendung in der Produktion vorgesehen war.

Für GTK 3-Anwendungen:

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

Ändere Zeile 1550 so, dass sie so aussieht:

.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)));
}

Für GTK 2-Anwendungen ändern Sie:

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

Ändere Zeile 34 so, dass es so aussieht:

GtkScrollbar::slider-width = 16

Für diejenigen, die die bereits bearbeiteten Dateien bevorzugen, können Sie meine hier herunterladen:

GTK 3: gtk-widgets.css

GTK 2: gtkrc

Achtung. Machen Sie Backups.

Genießen! :)

Nicolas
quelle
Für diejenigen, die meine Antwort bereits gelesen haben: Mit der letzten Bearbeitung habe ich die Formatierung stark verbessert. :)
Nicolas
8

Ich gehe davon aus, dass Sie sich auf die Overlay-Bildlaufleisten beziehen, weil Sie Unity erwähnen. Ich weiß nicht, wie man die Breite ändert, aber Sie können die Farbe zweifellos ändern. Wenn die Farbe deutlich genug ist, ist die Breite meines Erachtens kein so großes Problem, da sie beim Schweben anständig breit wird.

Sie müssen im Ordner Ihres Themas nach Dateien mit dem Namen gtkrc (im Ordner gtk-2.0) und gtk-widgets.css (im Ordner gtk-3.0) suchen . Öffnen Sie diese Dateien mit einem Texteditor. Möglicherweise müssen Sie gksudo geditanstelle von nur verwenden, geditwenn sich Ihr Thema in / usr / share / themes und nicht in ~ / .themes befindet. Suchen Sie dann nach Overlay-Bildlaufleisten oder Overlay-Bildlaufleisten oder ähnlichem und spielen Sie mit den in diesen Abschnitten angegebenen Farben. Sie können sogar Ihre eigene Farbe in Hex-Code angeben.

Natürlich können Sie in den beiden Dateien unterschiedliche Farben einstellen, wenn Sie dies wünschen.

Um die Änderungen zu visualisieren, müssen Sie möglicherweise zu einem anderen Thema und zurück wechseln, nachdem Sie die Änderungen an diesen Dateien vorgenommen und gespeichert haben.

Die Änderungen, die Sie in / usr / share / themes vornehmen , sind systemweit und Änderungen in ~ / .themes sind benutzerspezifisch.

So sieht meine Overlay-Bildlaufleiste in PCManFM aus.

Meine Overlay-Bildlaufleiste

Bearbeiten : Wenn Sie herkömmliche Bildlaufleisten verwenden, können Sie die oben erwähnte Datei gtk-widgets.css bearbeiten, um den Kontrast zwischen dem Schieberegler und der Wanne in gtk-3.0-Apps wie gedit zu erhöhen . Suchen Sie dazu nach dem Abschnitt mit der Überschrift Bildlaufleiste (oder ähnlichem) und suchen Sie nach den Zeilen, die ungefähr so ​​aussehen:

.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;

Hier kann man mit den Werten für das Hintergrundbild spielen, indem man den Farbton ändert. Ein höherer Wert ist heller, ein niedrigerer Wert ist dunkler.

Ich ziehe es etwas einfacher zu machen: Ich ändern Hintergrundbild zu Hintergrund- Farbe und haben nur eine Farbe , die ich wie. So zum Beispiel Hintergrundfarbe: rot; würde wahrscheinlich einen hervorragenden Kontrast ergeben.

Mein Code sieht so aus:

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

Offensichtlich ist ein Backup vor der Bearbeitung ratsam und man kann Sachen in der Datei gtk-widgets.css auskommentieren, anstatt Dinge mit /*und zu löschen */.

(Ich kann die Formatierung von Blockzitaten beim Posten von Antworten nicht zum Funktionieren bringen. Wenn jemand die Dinge aufräumen würde, wäre ich dankbar.)

Eine letzte Änderung (ich hoffe): Benutzer von Chrome oder Chromium können den Kontrast erhöhen, indem sie ihre gtk-2.0/apps/chromium.rcDatei bearbeiten , sofern sie von ihrem Thema bereitgestellt werden, oder indem Sie die gtk-2.0/gtkrcerforderlichen Änderungen vornehmen. In beiden Fällen sollte man nach einem Abschnitt mit der Überschrift "chrome-gtk-frame" suchen . Spielen Sie auch hier mit dem Schattenwert in dieser (oder einer ähnlichen) Zeile:

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

Oder man kann einfach eine Farbe wie diese festlegen:

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

oder

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

(Die Anführungszeichen sind erforderlich.)

Eliah Kagan
quelle
1
Es tut mir leid, @ vasa1! Ich habe vergessen zu erwähnen, dass ich die Overlay-Bildlaufleisten mit "Unsettings" oder einigen Befehlen entfernt habe. Jetzt habe ich schmale und kontrastarme Bildlaufleisten. Das muss ich reparieren. (Ich habe die ursprüngliche Frage bereits bearbeitet).
Chuqui
@Chuqui, könntest du bitte ein paar spezifische Apps erwähnen, die problematisch sind? Und erwähnen Sie, welches Thema Sie verwenden. Ich kenne mindestens ein Thema mit sehr dünnen Bildlaufleisten. In diesem Fall kann es nur darum gehen, ein anderes Thema auszuprobieren.
Hallo @ vasa1, ich möchte mich nochmals für die detaillierte Anleitung bedanken, die Sie mir gegeben haben. Es tut mir leid, dass ich in meiner Frage nicht klar genug war. Oben sehen Sie Bilder von Anwendungen, bei denen die Bildlaufleisten nur schwer zu sehen sind: Nautilus, Nuvola Player und Ubuntu Software Center. Im Gegenteil, mit Gnome Color Chooser könnte ich Firefox, Ubuntu One und andere Bildlaufleisten wie LibreOffice ändern. Ich verwende das Standardthema: Ambiance
Chuqui
1
Die von mir bereitgestellte Bearbeitung soll Ihnen zeigen, wie Sie den Kontrast auch für Nautilus und USC erhöhen können. Ich weiß nichts über Nuvola. IMO, die Standardbreite der Bildlaufleiste in Ambiance ist nicht schlecht (sobald Sie den Kontrast eingestellt haben).
Sehr nette Antwort. Woher wissen Sie, ob eine Anwendung GTK 2 oder GTK 3 verwendet? Ex nautilus verwendet gedit GTK 3, aber Firefox / Thunderbird verwendet GTK 2. Gibt es eine Möglichkeit, dies herauszufinden?
Chandrayya GK
2

Für Ubuntu 14.04 (Trusty Tahr) sind geringfügig andere Modifikationen erforderlich.

GTK 3: gtk-widgets.css ist zu finden unter: /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

GTK 2: gtkrc geht an: /usr/share/themes/Ambiance/gtk-2.0/gtkrc

Erstellen Sie Backups vor:

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/ 

Diese Befehle erwarten die heruntergeladenen Dateien gtkrcund gtk-widgets.cssim aktuellen Verzeichnis.

Nicolas
quelle
1
Wäre dies nicht besser, um Ihre andere Antwort zu bearbeiten?
Pavel V.
Meine Absicht für eine separate Antwort war es, 12.04-Inhalte klar von 14.04-Inhalten zu trennen, damit die Konsumenten meiner vorbereiteten Layout-Dateien die richtigen schnell und ohne Verwirrung finden können. Aber ... na ja ... darüber kann man sich streiten ...;)
Nicolas