Cách thay đổi màu VÀ độ rộng của thanh cuộn không lớp phủ trong Ubuntu 12.04


13

Tôi biết nhiều người đã phàn nàn về các thanh cuộn gần như vô hình và không thể sử dụng được trong các phiên bản gần đây của Ubuntu, ngay cả sau khi gỡ bỏ hoặc vô hiệu hóa các thanh cuộn lớp phủ mặc định. Tôi tự hỏi làm thế nào tôi có thể dễ dàng thay đổi màu sắc VÀ chiều rộng của họ.

Tôi có một màn hình 13,3 inch với độ phân giải 1600 * 900 và tôi hầu như không thể nhìn thấy chúng, như bạn có thể thấy trong những hình ảnh này:

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

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

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

Tôi đã thay đổi Firefox, LibreOffice và một số thanh cuộn của phần mềm khác bằng Trình chọn màu Gnome:

nhập mô tả hình ảnh ở đây

Nhân tiện, tôi đang sử dụng Unity. Cảm ơn!


1
Ảnh chụp màn hình sẽ tốt đẹp.
Uri Herrera

1
Một ảnh chụp màn hình là phải tôi nghĩ trong trường hợp này. Vì câu trả lời được cung cấp không phải là những gì bạn muốn.
Anwar

Xin chào @UriHerrera và Anwar, tôi đã thêm một số hình ảnh. Cảm ơn!
Chuqui

1
Xin vui lòng cho tình yêu của thần tại sao các nhà phát triển sẽ không dễ dàng thay đổi trong cài đặt hệ thống?
nơ ron

Câu trả lời:


4

Ghi chú:

Các định dạng trong câu trả lời này chỉ tối ưu cho chính xác (Ubuntu 12.04), xem câu trả lời tiếp theo để biết các định dạng được cải thiện cho độ tin cậy (Ubuntu 14.04).


Hiển thị thanh cuộn (thay đổi màu sắc)

Dựa trên thông tin của vasa1 được cung cấp ở trên, tôi đã thay đổi màu của thanh cuộn cổ điển thành màu lựa chọn mặc định - giống như màu của thanh cuộn lớp phủ đang sử dụng.

Đối với các ứng dụng GTK 3 sửa đổi:

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

bắt đầu từ dòng 1580 sao cho giống như:

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

Điều này nên được mặc định.

Đối với các ứng dụng GTK 2 sửa đổi:

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

bắt đầu từ dòng 223 sao cho giống như:

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

Nó trông không giống 100% với định dạng GTK 3, vì vậy hãy thoải mái cải thiện nó.


Tạo thanh cuộn có thể nhấp (tăng chiều rộng)

Để tăng chiều rộng nhỏ ngớ ngẩn không bao giờ được sử dụng trong sản xuất, tôi giả sử, thực hiện các thay đổi sau cho cùng một tệp.

Đối với các ứng dụng GTK 3:

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

sửa đổi dòng 1550 để nó trông giống như:

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

Đối với các ứng dụng GTK 2 sửa đổi:

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

sửa đổi dòng 34 sao cho giống như:

GtkScrollbar::slider-width = 16

Đối với những người thích các tập tin hoàn chỉnh đã được chỉnh sửa, bạn có thể tải xuống của tôi từ đây:

GTK 3: gtk-widget.css

GTK 2: gtkrc

Hãy cẩn thận. Tạo bản sao lưu.

Thưởng thức! :)


Đối với những người đã đọc câu trả lời của tôi: với lần chỉnh sửa cuối cùng, tôi đã cải thiện phần lớn định dạng. :)
Nicolas

8

Tôi giả sử bạn đang đề cập đến thanh cuộn lớp phủ vì bạn đề cập đến Unity. Tôi không biết cách thay đổi chiều rộng nhưng bạn chắc chắn có thể thay đổi màu sắc. Nếu màu sắc đủ khác biệt, tôi cảm thấy chiều rộng không phải là vấn đề vì khi di chuột, nó trở nên rộng.

Bạn cần tìm trong thư mục chủ đề của mình để tìm các tệp có tên gtkrc (trong thư mục gtk-2.0) và gtk- widget.css (trong thư mục gtk-3.0). Mở các tệp này bằng một trình soạn thảo văn bản. Bạn có thể cần sử dụng gksudo geditthay vì chỉ geditkhi chủ đề của bạn nằm trong / usr / share / Themes chứ không phải trong ~ / .theme. Sau đó, tìm kiếm thanh cuộn lớp phủ hoặc thanh cuộn lớp phủ hoặc thứ gì đó tương tự và chơi với các màu được chỉ định trong các phần đó. Bạn thậm chí có thể chỉ định màu của riêng bạn trong mã hex.

Rõ ràng, bạn có thể đặt các màu khác nhau trong hai tệp nếu bạn chọn.

Để trực quan hóa các thay đổi, bạn có thể cần phải chuyển sang chủ đề khác và quay lại sau khi bạn đã thực hiện và lưu các thay đổi vào các tệp này.

Các thay đổi bạn thực hiện trong / usr / share / theme sẽ là toàn hệ thống và các thay đổi trong ~ / .theme sẽ dành riêng cho người dùng.

Đây là những gì thanh cuộn lớp phủ của tôi trông giống như trong PCManFM.

Thanh cuộn lớp phủ của tôi

Chỉnh sửa : Trong trường hợp, một người đang sử dụng thanh cuộn thông thường, sau đó để tăng độ tương phản giữa thanh trượt và máng trong các ứng dụng gtk-3.0 như gedit, người ta có thể chỉnh sửa tệp gtk-widget.css đã đề cập ở trên. Để làm như vậy, tìm kiếm phần có tiêu đề thanh cuộn (hoặc một cái gì đó tương tự) và tìm kiếm các dòng có cái gì đó như thế này:

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

Ở đây, người ta có thể chơi với các giá trị cho ảnh nền bằng cách thay đổi sắc thái. Giá trị cao hơn sáng hơn, giá trị thấp hơn tối hơn.

Tôi thích làm một cái gì đó đơn giản hơn: Tôi thay đổi hình nền thành màu nền và chỉ có một màu tôi thích. Vì vậy, ví dụ, màu nền: đỏ; có lẽ sẽ cho độ tương phản nổi bật.

Mã của tôi trông như thế này:

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

Rõ ràng, nên sao lưu trước khi chỉnh sửa và người ta có thể nhận xét nội dung trong tệp gtk-widget.css thay vì xóa mọi thứ bằng cách sử dụng /**/.

(Tôi không thể định dạng các trích dẫn khối để hoạt động trong khi đăng câu trả lời. Nếu ai đó dọn dẹp mọi thứ, tôi sẽ rất biết ơn.)

Lần chỉnh sửa cuối cùng (tôi hy vọng): Người dùng Chrome hoặc Chromium có thể tăng độ tương phản bằng cách chỉnh sửa gtk-2.0/apps/chromium.rctệp của họ nếu chủ đề của họ cung cấp hoặc bằng cách chỉnh sửa gtk-2.0/gtkrcnếu có yêu cầu ở đó. Trong cả hai trường hợp, người ta nên tìm kiếm kiểu đầu "chrome-gtk-frame" . Ở đây, một lần nữa, chơi với giá trị bóng trong dòng này (hoặc tương tự):

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

Hoặc người ta có thể chỉ đơn giản là cụ thể một màu như thế này:

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

hoặc là

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

(Các trích dẫn được yêu cầu.)


1
Tôi xin lỗi, @ vasa1! Tôi quên đề cập rằng tôi đã xóa các thanh cuộn lớp phủ bằng cách sử dụng "Hủy cài đặt" hoặc một số lệnh. Bây giờ tôi có thanh cuộn hẹp và độ tương phản thấp. Đó là những gì tôi cần sửa chữa. (Tôi đã chỉnh sửa câu hỏi ban đầu).
Chuqui

@Chuqui, bạn có thể vui lòng đề cập đến một vài ứng dụng cụ thể có vấn đề không? Và hãy đề cập đến chủ đề bạn đang sử dụng. Tôi biết ít nhất một chủ đề có thanh cuộn rất mỏng. Trong trường hợp đó, nó có thể chỉ là vấn đề thử một chủ đề khác.

Xin chào @ vasa1, tôi muốn cảm ơn bạn một lần nữa vì những hướng dẫn chi tiết mà bạn đã cho tôi. Tôi xin lỗi tôi đã không đủ rõ ràng trong câu hỏi của tôi. Ở trên, bạn có thể thấy hình ảnh của các ứng dụng mà thanh cuộn khó nhìn thấy: Nautilus, Nuvola Player và Trung tâm phần mềm Ubuntu. Ngược lại, bằng cách sử dụng Trình chọn màu Gnome, tôi có thể thay đổi thanh cuộn của Firefox, Ubuntu One và các phần mềm khác, như LibreOffice. Tôi đang sử dụng chủ đề mặc định: Ambiance
Chuqui

1
Bản chỉnh sửa tôi cung cấp sẽ chỉ cho bạn cách bạn có thể tăng độ tương phản ngay cả đối với Nautilus và USC. Tôi không biết về Nuvola. IMO, chiều rộng thanh cuộn mặc định trong Ambiance không quá tệ (một khi bạn điều chỉnh độ tương phản).

Câu trả lời rất hay. Làm thế nào để biết liệu một ứng dụng sử dụng GTK 2 hay GTK 3? Ex nautilus, gedit sử dụng GTK 3 nhưng firefox / thunderbird sử dụng GTK 2. Có cách nào để tìm ra nó không?
Chandrayya GK

2

Đối với Ubuntu 14.04 (Trusty Tahr), cần phải sửa đổi một chút.

GTK 3: gtk-widget.css chuyển đến: /usr/share/theme/Ambiance/gtk-3.0/gtk-widgets.css

GTK 2: gtkrc chuyển đến: /usr/share/theme/Ambiance/gtk-2.0/gtkrc

Tạo bản sao lưu trước:

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/ 

Những lệnh này mong đợi các tệp được tải xuống gtkrcgtk-widgets.csstrong thư mục hiện tại.


1
Điều này sẽ không tốt hơn khi chỉnh sửa câu trả lời khác của bạn chứ?
Pavel V.

Ý định của tôi cho một câu trả lời riêng biệt là phân tách rõ ràng 12.04 nội dung từ 14.04 để người tiêu dùng các tệp bố cục được chuẩn bị của tôi có thể tìm thấy đúng và nhanh chóng mà không bị nhầm lẫn. Nhưng ... chà ... người ta có thể tranh luận về ...;)
Nicolas
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.