Cara mengubah warna DAN lebar bilah gulir non-overlay di Ubuntu 12.04

13

Saya tahu banyak orang mengeluh tentang scrollbar yang hampir tidak terlihat dan tidak dapat digunakan di Ubuntu versi terbaru, bahkan setelah menghapus atau menonaktifkan scrollbar overlay default. Saya bertanya-tanya bagaimana saya bisa dengan mudah mengubah warna dan lebar mereka.

Saya memiliki monitor 13,3 inci dengan resolusi 1600 * 900 dan saya hampir tidak dapat melihatnya, seperti yang Anda lihat dalam gambar-gambar ini:

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

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

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

Saya sudah mengubah Firefox, LibreOffice dan beberapa scrollbar perangkat lunak lain menggunakan GNOME Color Chooser:

masukkan deskripsi gambar di sini

Omong-omong, saya menggunakan Unity. Terima kasih!

12.04  colors  scrollbar 
— Chuqui
sumber
1
Tangkapan layar akan menyenangkan.
— Uri Herrera
1
Tangkapan layar harus saya pikir dalam kasus ini. Karena jawaban yang diberikan bukan yang Anda inginkan.
— Anwar
Hai @ Unrierrera dan Anwar, saya sudah menambahkan beberapa gambar. Terima kasih!
— Chuqui
1
Tolong untuk cinta tuhan mengapa para dev tidak hanya membuat ini mudah untuk berubah di bawah pengaturan sistem?
— neuronet

Jawaban:

4

catatan:

Format dalam jawaban ini hanya optimal untuk tepat (Ubuntu 12,04) saja, lihat jawaban berikutnya untuk format yang ditingkatkan untuk tepercaya (Ubuntu 14,04).

Jadikan scrollbar terlihat (ubah warna)

Berdasarkan informasi vasa1 yang disediakan di atas, saya mengubah warna scrollbar klasik ke warna pilihan default - sama dengan yang digunakan juga oleh scrollbar overlay.

Untuk memodifikasi aplikasi GTK 3:

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

mulai dari baris 1580 sehingga terlihat seperti:

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

Ini harusnya default.

Untuk memodifikasi aplikasi GTK 2:

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

mulai dari baris 223 sehingga terlihat seperti:

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

Itu tidak terlihat 100% identik dengan format GTK 3, jadi silakan memperbaikinya.

Jadikan bilah gulir dapat diklik (menambah lebar)

Untuk menambah lebar kecil konyol yang tidak pernah dimaksudkan untuk digunakan dalam produksi, saya berasumsi, membuat perubahan berikut pada file yang sama.

Untuk aplikasi GTK 3:

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

ubah baris 1550 sehingga terlihat seperti:

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

Untuk memodifikasi aplikasi GTK 2:

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

ubah baris 34 sehingga terlihat seperti:

GtkScrollbar::slider-width = 16

Bagi mereka yang lebih memilih file lengkap yang sudah diedit, Anda dapat mengunduh file saya dari sini:

GTK 3: gtk-widgets.css

GTK 2: gtkrc

Hati-hati. Buat cadangan.

Nikmati! :)

— Nicolas
sumber
Bagi mereka yang sudah membaca jawaban saya: dengan edit terakhir saya meningkatkan format sebagian besar. :)
— Nicolas
8

Saya berasumsi Anda mengacu pada bilah gulir hamparan karena Anda menyebut Unity. Saya tidak tahu bagaimana mengubah lebar tetapi Anda tentu bisa mengubah warnanya. Jika warnanya cukup berbeda, saya merasa lebarnya tidak terlalu menjadi masalah karena pada hover itu menjadi lebar.

Anda perlu mencari di folder tema Anda untuk file yang disebut gtkrc (di folder gtk-2.0) dan gtk-widgets.css (dalam folder gtk-3.0). Buka file-file ini dengan editor teks. Anda mungkin perlu menggunakan gksudo geditalih-alih hanya geditjika tema Anda ada di / usr / share / tema dan bukan di tema ~ /. Kemudian, cari overbar scrollbar atau overlay-scrollbar atau yang serupa dan mainkan dengan warna yang ditentukan di bagian tersebut. Anda bahkan dapat menentukan warna Anda sendiri dalam kode hex.

Jelas, Anda dapat mengatur warna yang berbeda di dua file jika Anda mau.

Untuk memvisualisasikan perubahan, Anda mungkin perlu beralih ke tema lain dan kembali setelah Anda membuat dan menyimpan perubahan ke file-file ini.

Perubahan yang Anda buat di / usr / share / tema akan menjadi seluruh sistem dan perubahan dalam tema ~ /. Akan spesifik untuk pengguna.

Inilah tampilan bilah gulir hamparan saya di PCManFM.

Bilah gulir hamparan saya

Sunting : Dalam kasus, seseorang menggunakan scrollbar konvensional, kemudian untuk meningkatkan kontras antara slider dan palung di aplikasi gtk-3.0 seperti gedit, seseorang dapat mengedit file gtk-widgets.css yang disebutkan di atas. Untuk melakukannya, cari bagian berjudul scrollbar (atau yang serupa) dan cari baris yang memiliki sesuatu seperti ini:

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

Di sini, seseorang dapat bermain dengan nilai-nilai untuk gambar latar belakang dengan mengubah warna. Nilai yang lebih tinggi lebih cerah, nilai yang lebih rendah lebih gelap.

Saya lebih suka melakukan sesuatu yang lebih sederhana: Saya mengubah background-image ke background- color dan hanya memiliki warna yang saya sukai. Jadi, misalnya, warna latar: merah; mungkin akan memberikan kontras yang luar biasa.

Kode saya terlihat seperti ini:

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

Jelas, cadangan sebelum mengedit disarankan dan orang dapat berkomentar hal-hal dalam file gtk-widgets.css daripada menghapus sesuatu dengan menggunakan /*dan */.

(Saya tidak dapat memformat kutipan blok agar berfungsi saat memposting jawaban. Jika seseorang mau membereskan semuanya, saya akan berterima kasih.)

Satu suntingan terakhir (saya harap): Pengguna Chrome atau Chromium dapat meningkatkan kontras dengan mengedit gtk-2.0/apps/chromium.rcfile mereka jika tema mereka menyediakannya atau dengan mengedit gtk-2.0/gtkrcjika apa yang diperlukan ada di sana. Dalam kedua kasus, seseorang harus mencari gaya menuju bagian "chrome-gtk-frame" . Di sini, sekali lagi, mainkan dengan nilai teduh di baris (atau serupa) ini:

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

Atau seseorang dapat dengan mudah menentukan warna seperti ini:

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

atau

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

(Kutipan diperlukan.)

— Eliah Kagan
sumber
1
Maaf, @ vasa1! Saya lupa menyebutkan bahwa saya menghapus bilah gulir hamparan menggunakan "Ketidaktetapan" atau beberapa perintah. Sekarang saya memiliki scrollbar sempit dan kontras rendah. Itulah yang perlu saya perbaiki. (Saya sudah mengedit pertanyaan asli).
— Chuqui
@ Cuhuqui, dapatkah Anda menyebutkan beberapa aplikasi spesifik yang bermasalah? Dan sebutkan tema mana yang Anda gunakan. Saya tahu setidaknya satu tema yang memiliki scrollbar yang sangat tipis. Dalam hal ini, mungkin hanya masalah mencoba tema lain.
Hai @ vasa1, saya ingin mengucapkan terima kasih sekali lagi untuk instruksi terperinci yang Anda berikan kepada saya. Maaf saya tidak cukup jelas dalam pertanyaan saya. Di atas Anda dapat melihat gambar-gambar aplikasi di mana scrollbar sulit dilihat: Nautilus, Nuvola Player dan Ubuntu Software Center. Sebaliknya, dengan menggunakan Gnome Color Chooser saya dapat mengubah Firefox, Ubuntu One, dan scrollbar perangkat lunak lain, seperti LibreOffice. Saya menggunakan tema default: Ambiance
— Chuqui
1
Hasil edit yang saya berikan harus menunjukkan kepada Anda bagaimana Anda dapat meningkatkan kontras bahkan untuk Nautilus dan USC. Saya tidak tahu tentang Nuvola. IMO, lebar bilah gulir default di Ambiance tidak terlalu buruk (setelah Anda mengubah kontrasnya).
Jawaban yang sangat bagus Bagaimana mengetahui apakah aplikasi menggunakan GTK 2 atau GTK 3? Ex nautilus, gedit menggunakan GTK 3 tetapi firefox / thunderbird menggunakan GTK 2. Apakah ada cara untuk mengetahuinya?
— Chandrayya GK
2

Untuk Ubuntu 14.04 (Trusty Tahr) diperlukan modifikasi yang sedikit berbeda.

GTK 3: gtk-widgets.css pergi ke: /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

GTK 2: gtkrc pergi ke: /usr/share/themes/Ambiance/gtk-2.0/gtkrc

Buat cadangan sebelumnya:

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/

Perintah-perintah itu mengharapkan file yang diunduh gtkrcdan gtk-widgets.cssdi direktori saat ini.

— Nicolas
sumber
1
Bukankah ini lebih baik sebagai edit untuk jawaban Anda yang lain?
— Pavel V.
Niat saya untuk jawaban yang terpisah adalah untuk dengan jelas memisahkan 12,04 barang dari 14,04 sehingga konsumen file tata letak yang saya siapkan dapat menemukan yang tepat dengan cepat dan tanpa bingung. Tapi ... yah ... orang bisa berdebat tentang ...;)
— Nicolas
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.