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

Question

我知道很多人对最近版本的Ubuntu中几乎看不见且无法使用的滚动条提出了抱怨，即使在移除或禁用默认的覆盖式滚动条后仍然如此。我想知道如何轻松地改变它们的颜色和宽度。

我有一台13.3英寸的显示器，分辨率为1600*900，我几乎看不见它们，就像你在这些图片中看到的那样：

我已经通过GNOME Color Chooser更改了Firefox、LibreOffice和其他一些软件的滚动条。

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

- Chuqui

---

截图会很好。 - Uri Herrera

在这种情况下，我认为截图是必须的。因为提供的答案不是你想要的。 - Anwar

嗨 @UriHerrera 和 Anwar，我已经添加了一些图片。谢谢！ - Chuqui

拜托，开发人员能不能让这在系统设置下更容易修改一些？求求了，真的。 - neuronet

Answer 1

我猜你是在提到覆盖滚动条，因为你提到了Unity。 我不知道如何改变宽度，但你肯定可以改变颜色。如果颜色足够鲜明，我觉得宽度并不是那么大的问题，因为在悬停时它会变得相当宽。

你需要在主题文件夹中查找名为（在gtk-2.0文件夹中）和（在gtk-3.0文件夹中）的文件。用文本编辑器打开这些文件。如果你的主题位于/usr/share/themes而不是~/.themes中，你可能需要使用而不仅仅是。 然后，在这些部分中搜索或或类似的内容，并调整这些部分指定的颜色。你甚至可以使用十六进制代码指定自己的颜色。

显然，如果你愿意，你可以在这两个文件中设置不同的颜色。

在你对这些文件进行更改并保存后，你可能需要切换到另一个主题，然后再切回来以可视化这些更改。

你在/usr/share/themes中所做的更改将影响整个系统，而在~/.themes中所做的更改将只影响当前用户。

这是我在PCManFM中的叠加滚动条的样子。

编辑：如果使用传统的滚动条，那么为了增加gtk-3.0应用程序（如gedit）中滑块和槽之间的对比度，可以编辑上述提到的gtk-widgets.css文件。要这样做，请搜索标题为scrollbar（或类似的内容）的部分，并查找具有以下类似内容的行：

.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-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文件（如果所需内容已经存在）来增加对比度。 在这两种情况下，都应该搜索一个名为style "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"

（需要引号。）

- user25656

---

对不起，@vasa1！我忘了提到我使用"Unsettings"或一些命令来移除了叠加滚动条。现在我的滚动条变窄且对比度较低。这就是我需要修复的问题。（我已经编辑了原始问题）。 - Chuqui

@Chuqui，你能否列举一些有问题的具体应用程序？并且请说明你正在使用哪个主题。我知道至少有一个主题有非常细的滚动条。在这种情况下，可能只需要尝试另一个主题。 - user25656

嗨@vasa1，我想再次感谢你给我的详细指导。很抱歉我的问题表达不够清楚。上面你可以看到一些应用程序的截图，其中滚动条很难看清：Nautilus、Nuvola Player和Ubuntu软件中心。相反，使用Gnome Color Chooser时，我可以改变Firefox、Ubuntu One和其他软件的滚动条，比如LibreOffice。我正在使用默认主题：Ambiance。 - Chuqui

我提供的编辑应该指导您如何增加Nautilus和USC的对比度。我不知道Nuvola。在我看来，Ambiance主题中默认的滚动条宽度还不错（一旦您调整了对比度）。 - user25656

非常好的答案。你怎么知道一个应用程序使用 GTK 2 还是 GTK 3？比如，Nautilus 和 Gedit 使用 GTK 3，而 Firefox 和 Thunderbird 使用 GTK 2。有没有办法找出来呢？ - Chandrayya G K

Answer 2

注意：

此答案中的格式适用于精确版本（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 请小心操作，并备份文件。

祝你使用愉快！ :)

- Nicolas

---

对于那些已经阅读了我的回答的人：通过最后一次编辑，我大大改善了格式。 :) - Nicolas

Answer 3

对于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。

- Nicolas

---

这样作为对你其他回答的修改会不会更好呢？ - Pavel V.

我的打算是为了清楚地将12.04的内容与14.04分开，以便使用我准备的布局文件的消费者能够快速找到正确的文件，而不会感到困惑。但是...嗯...可以对此进行争论... ;) - Nicolas