如何在Ubuntu 12.04中更改非覆盖滚动条的颜色和宽度

13

我知道很多人抱怨在最新版本的Ubuntu中几乎看不见且无法使用的滚动条，即使删除或禁用了默认的覆盖滚动条也是如此。我想知道如何轻松更改其颜色和宽度。

我有一台分辨率为1600 * 900的13.3英寸显示器，几乎看不到它们，如您在以下图像中所看到的：

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

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

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

我已经使用GNOME Color Chooser更改了Firefox，LibreOffice和其他软件的滚动条：

在此处输入图片说明

顺便说一句，我正在使用Unity。谢谢！

12.04  colors  scrollbar 
— 楚基
source
1
屏幕截图会很好。
— Uri Herrera 2012年
1
在这种情况下，必须考虑截图。由于提供的答案不是您想要的。
— 安瓦尔2012年
@UriHerrera和Anwar，您好，我已经添加了一些图片。谢谢！
— Chuqui 2012年
1
请为上帝的爱而努力，为什么开发人员不仅仅在系统设置下轻松更改此设置？
— Neuronet

Answers:

4

注意：

此答案中的格式仅对于精确（Ubuntu 12.04）是最佳的，请参阅下一个答案，以获取关于Trusty（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}
    }
}

它看起来与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

小心。进行备份。

请享用！:)

— 尼古拉斯
source
对于已经读完我的答案的人：在上一次编辑中，我大大改善了格式。:)
— Nicolas
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-color：红色；可能会提供出色的对比。

我的代码如下所示：

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

（引号是必需的。）

— 埃利亚·卡根（Eliah Kagan）
source
1
抱歉，@ vasa1！我忘了提到我使用“取消设置”或某些命令删除了覆盖滚动条。现在，我有窄和低对比度的滚动条。这就是我需要解决的问题。（我已经编辑了原始问题）。
— Chuqui 2012年
@Chuqui，能否请您提及一些有问题的特定应用程序？并提及您使用的主题。我知道至少一个主题具有非常薄的滚动条。在这种情况下，可能只是尝试另一个主题。
@ vasa1，您好，我想再次感谢您提供给我的详细说明。对不起，我的问题还不够清楚。在上面，您可以看到很难看到滚动条的应用程序图像：Nautilus，Nuvola Player和Ubuntu Software Center。相反，使用Gnome Color Chooser，我可以更改Firefox，Ubuntu One和其他软件的滚动条，例如LibreOffice。我使用的是默认主题：氛围
— Chuqui
1
我提供的编辑应该为您指出即使Nautilus和USC也可以增加对比度。我不知道Nuvola。IMO，Ambiance中的默认滚动条宽度还不错（一旦您调整了对比度）。
很好的答案。如何知道应用程序是使用GTK 2还是GTK 3？在Nautilus中，gedit使用GTK 3，而firefox / thunderbird使用GTK2。有什么方法可以找到它吗？
— Chandrayya GK 2015年
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在当前目录中。

— 尼古拉斯
source
1
作为对其他答案的编辑，这会更好吗？
— Pavel V.
我想要一个单独的答案的目的是将12.04的内容与14.04的内容明确分开，以使准备好的布局文件的使用者能够快速找到正确的内容，而不会感到困惑。但是...好吧...有人可以争论...;）
— Nicolas
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.