Как изменить цвет и ширину неперекрывающихся полос прокрутки в Ubuntu 12.04

13

Я знаю, что многие люди жаловались на почти невидимые и неиспользуемые полосы прокрутки в последних версиях Ubuntu, даже после удаления или отключения накладных полос прокрутки по умолчанию. Интересно, как я могу легко изменить их цвет и ширину.

У меня 13,3-дюймовый монитор с разрешением 1600 * 900, и я едва вижу их, как вы можете видеть на следующих изображениях:

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

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

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

Я уже изменил полосы прокрутки Firefox, LibreOffice и некоторых других программ, используя GNOME Color Chooser:

введите описание изображения здесь

Кстати, я использую Unity. Благодарность!

12.04 colors scrollbar Chuqui
источник
1
Скриншот был бы хорош.
Ури Эррера
1
Скриншот является обязательным в этом случае. Поскольку предоставленный ответ не то, что вы хотели.
Анвар
Привет @ UriHerrera и Анвар, я уже добавил несколько изображений. Благодарность!
Chuqui
1
Пожалуйста, ради любви к Богу, почему разработчики не могут легко изменить это в настройках системы?
Нейросеть

Ответы:

4

Замечания:

Форматирование в этом ответе является оптимальным только для точного (Ubuntu 12.04), см. Следующий ответ для улучшенного форматирования для верного (Ubuntu 14.04).

Сделать полосы прокрутки видимыми (изменить цвет)

Основываясь на информации, предоставленной vasa1 выше, я изменил цвет классических полос прокрутки на цвет выделения по умолчанию - такой же, как и наложенные полосы прокрутки.

Для приложений GTK 3 измените:

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

начиная со строки 1580, чтобы она выглядела так:

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

Это должно быть по умолчанию.

Для приложений GTK 2 измените:

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

начиная со строки 223, чтобы она выглядела так:

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

Он не выглядит на 100% идентичным форматированию GTK 3, поэтому смело улучшайте его.

Сделайте полосы прокрутки кликабельными (увеличение ширины)

Я предполагаю, что для увеличения глупой небольшой ширины, которая никогда не предназначалась для использования в производстве, внесите следующие изменения в те же файлы.

Для приложений GTK 3:

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

измените строку 1550 так, чтобы она выглядела так:

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

Для приложений GTK 2 измените:

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

измените строку 34 так, чтобы она выглядела так:

GtkScrollbar::slider-width = 16

Для тех, кто предпочитает полностью отредактированные файлы, вы можете скачать мой отсюда:

GTK 3: gtk-widgets.css

GTK 2: gtkrc

Быть осторожен. Делать резервные копии.

Наслаждайтесь! :)

никола
источник
Для тех, кто уже читал мой ответ: с последним редактированием я значительно улучшил форматирование. :)
Николас
8

Я предполагаю, что вы имеете в виду оверлейные полосы прокрутки, потому что вы упоминаете Unity. Я не знаю, как изменить ширину, но вы, конечно, можете изменить цвет. Если цвет достаточно отчетливый, я чувствую, что ширина не такая уж большая проблема, потому что при наведении она становится достаточно широкой.

Вам нужно поискать в папке вашей темы файлы gtkrc (в папке gtk-2.0) и gtk-widgets.css (в папке gtk-3.0). Откройте эти файлы в текстовом редакторе. Возможно, вам придется использовать gksudo geditвместо, geditесли ваша тема находится в / usr / share / themes, а не в ~ / .themes. Затем найдите оверлейные полосы прокрутки или оверлейную полосу прокрутки или что-то подобное и поиграйте с цветами, указанными в этих разделах. Вы даже можете указать свой собственный цвет в шестнадцатеричном коде.

Очевидно, что вы можете установить разные цвета в двух файлах, если вы того пожелаете.

Для визуализации изменений вам может потребоваться переключиться на другую тему и вернуться после внесения и сохранения изменений в этих файлах.

Изменения, которые вы вносите в / usr / share / themes, будут общесистемными, а изменения в ~ / .themes будут зависеть от пользователя.

Вот как выглядит моя полоса прокрутки в PCManFM.

Моя полоса прокрутки наложения

Редактировать : В случае, если вы используете обычные полосы прокрутки, то для увеличения контраста между ползунком и впадиной в приложениях gtk-3.0, таких как gedit, можно отредактировать файл gtk-widgets.css, упомянутый выше. Для этого найдите раздел с заголовком полосы прокрутки (или что-то похожее) и найдите строки, которые выглядят примерно так:

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

Здесь можно поиграть со значениями для фонового изображения , изменив оттенок. Чем выше значение, тем ярче, чем ниже значение, тем темнее.

Я предпочитаю делать что-то более простое: я меняю background-image на background- color и просто выбираю цвет, который мне нравится. Так, например, background-color: red; вероятно, даст выдающийся контраст.

Мой код выглядит так:

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

Очевидно, что перед редактированием рекомендуется сделать резервную копию, и можно закомментировать материал в файле gtk-widgets.css вместо того, чтобы удалять его с помощью /*и */.

(Я не могу заставить работать форматирование блочных кавычек во время публикации ответов. Если кто-то что-то очистит, я буду благодарен.)

Последнее редактирование (я надеюсь): пользователи Chrome или Chromium могут увеличить контраст, редактируя свой gtk-2.0/apps/chromium.rcфайл, если его тема предоставляет, или редактируя, gtk-2.0/gtkrcесли там присутствует то, что требуется. В обоих случаях следует искать раздел с названием «chrome-gtk-frame» . Здесь, опять же, поиграйте со значением оттенка в этой (или аналогичной) строке:

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

Или можно просто указать такой цвет:

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

или

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

(Цитаты обязательны.)

Элия ​​Каган
источник
1
Прости, @ vasa1! Я забыл упомянуть, что удалил оверлейные полосы прокрутки, используя «Unsettings» или некоторые команды. Теперь у меня есть узкие и малоконтрастные полосы прокрутки. Вот что мне нужно исправить. (Я уже редактировал оригинальный вопрос).
Chuqui
@Chuqui, не могли бы вы упомянуть несколько конкретных приложений, которые являются проблематичными? И не забудьте упомянуть, какую тему вы используете. Мне известна хотя бы одна тема с очень тонкими полосами прокрутки. В этом случае, это может быть просто вопрос другой темы.
Привет @ vasa1, еще раз хочу поблагодарить тебя за подробные инструкции, которые ты мне дал. Мне жаль, что я не был достаточно ясен в своем вопросе. Выше вы можете видеть изображения приложений, где полосы прокрутки трудно увидеть: Nautilus, Nuvola Player и Ubuntu Software Center. Напротив, используя Gnome Color Chooser, я мог изменить Firefox, Ubuntu One и другие полосы прокрутки программного обеспечения, такие как LibreOffice. Я использую тему по умолчанию: Ambiance
Chuqui
1
Редактирование, которое я предоставил, должно указать вам, как вы можете увеличить контраст даже для Nautilus и USC. Я не знаю насчет Нуволы. IMO, ширина полосы прокрутки по умолчанию в Ambiance не так уж плоха (как только вы настроите контраст).
Очень хороший ответ. Как узнать, использует ли приложение GTK 2 или GTK 3? Например, nautilus, gedit использует GTK 3, а firefox / thunderbird использует GTK 2. Есть ли способ узнать это?
Чандрайя Г.К.
2

Для Ubuntu 14.04 (Trusty Tahr) нужны немного другие модификации.

GTK 3: gtk-widgets.css находится по адресу : /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

GTK 2: gtkrc переходит на: /usr/share/themes/Ambiance/gtk-2.0/gtkrc

Сделайте резервные копии до:

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/

Эти команды ожидают загруженных файлов gtkrcи gtk-widgets.cssв текущем каталоге.

никола
источник
1
Разве это не было бы лучше, как редактирование вашего другого ответа?
Павел В.
Мое намерение было получить отдельный ответ, чтобы четко отделить материал 12.04 от 14.04, чтобы потребители моих готовых файлов макетов могли быстро найти нужные файлы без путаницы. Но ... ну ... можно спорить о ...;)
Николя