วิธีการเปลี่ยนสีและความกว้างของแถบเลื่อนที่ไม่ใช่โอเวอร์เลย์ใน 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:

ป้อนคำอธิบายรูปภาพที่นี่

อย่างไรก็ตามฉันใช้ Unity ขอบคุณ!

12.04  colors  scrollbar 
— Chuqui
แหล่งที่มา
1
ภาพหน้าจอจะดี
— Uri Herrera
1
ภาพหน้าจอเป็นสิ่งที่ฉันต้องคิดในกรณีนี้ เนื่องจากคำตอบที่ให้ไม่ใช่สิ่งที่คุณต้องการ
— Anwar
สวัสดี @UriHerrera และ Anwar ฉันได้เพิ่มรูปภาพไปแล้ว ขอบคุณ!
— Chuqui
1
ได้โปรดรักพระเจ้าทำไม devs ไม่เพียงแค่ทำให้ง่ายต่อการเปลี่ยนแปลงภายใต้การตั้งค่าระบบ?
— เซลล์ประสาท

คำตอบ:

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

แก้ไข line 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

ฉันสมมติว่าคุณกำลังอ้างถึงแถบเลื่อนซ้อนทับเพราะคุณพูดถึงความสามัคคี ฉันไม่รู้วิธีเปลี่ยนความกว้าง แต่คุณสามารถเปลี่ยนสีได้อย่างแน่นอน ถ้าสีแตกต่างกันมากพอฉันรู้สึกว่าความกว้างไม่ใช่ปัญหามากนักเพราะเมื่อวางไว้มันจะกว้างพอสมควร

คุณต้องดูในไฟล์ของธีมของคุณสำหรับไฟล์ที่เรียกว่าgtkrc (ในโฟลเดอร์ gtk-2.0) และgtk-widgets.css (ในโฟลเดอร์ gtk-3.0) เปิดไฟล์เหล่านี้ด้วยโปรแกรมแก้ไขข้อความ คุณอาจต้องใช้gksudo geditแทนgeditหากธีมของคุณอยู่ใน / usr / share / themes และไม่อยู่ใน ~ / .themes จากนั้นค้นหาแถบเลื่อนแบบซ้อนทับหรือแถบเลื่อนแบบซ้อนทับหรือสิ่งที่คล้ายกันแล้วเล่นกับสีที่ระบุในส่วนเหล่านั้น คุณสามารถระบุสีของคุณเองในรหัสฐานสิบหก

เห็นได้ชัดว่าคุณสามารถตั้งค่าสีที่แตกต่างกันในสองไฟล์ถ้าคุณเลือก

เพื่อให้เห็นภาพการเปลี่ยนแปลงคุณอาจต้องเปลี่ยนไปใช้ชุดรูปแบบอื่นและย้อนกลับไปหลังจากที่คุณทำและบันทึกการเปลี่ยนแปลงในไฟล์เหล่านี้

การเปลี่ยนแปลงที่คุณทำใน/ usr / share / ธีมจะเป็นทั้งระบบและการเปลี่ยนแปลงใน~ / .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-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หากสิ่งที่จำเป็นต้องมีอยู่ที่นั่น ในทั้งสองกรณีหนึ่งควรค้นหาส่วนหัวสไตล์ "โครเมี่ยม GTK กรอบ" ที่นี่อีกครั้งเล่นกับค่าที่ร่มในบรรทัดนี้ (หรือคล้ายกัน):

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

หรืออย่างใดอย่างหนึ่งสามารถระบุสีเช่นนี้:

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

หรือ

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

(ต้องใช้เครื่องหมายคำพูด)

— Eliah Kagan
แหล่งที่มา
1
ฉันขอโทษ @ vasa1! ฉันลืมที่จะพูดถึงว่าฉันลบแถบเลื่อนด้านบนออกโดยใช้ "Unsettings" หรือคำสั่งบางอย่าง ตอนนี้ฉันมีแถบเลื่อนแคบและความคมชัดต่ำ นั่นคือสิ่งที่ฉันต้องแก้ไข (ฉันแก้ไขคำถามเดิมแล้ว)
— Chuqui
@Chuqui คุณช่วยกรุณาพูดถึงแอพบางตัวที่มีปัญหาได้ไหม และอย่าพูดถึงธีมที่คุณใช้ ฉันรู้อย่างน้อยหนึ่งธีมที่มีแถบเลื่อนที่บางมาก ในกรณีนี้อาจเป็นเรื่องของการลองใช้ชุดรูปแบบอื่น
สวัสดี @ vasa1 ฉันอยากจะขอบคุณอีกครั้งสำหรับคำแนะนำโดยละเอียดที่คุณให้ฉัน ฉันขอโทษฉันไม่ชัดเจนพอในคำถามของฉัน ด้านบนคุณจะเห็นภาพของแอพพลิเคชั่นที่แถบเลื่อนมองเห็นได้ยาก: Nautilus, Nuvola Player และ Ubuntu Software Center ในทางตรงกันข้ามการใช้ Gnome Color Chooser ฉันสามารถเปลี่ยน Firefox, Ubuntu One และแถบเลื่อนของซอฟต์แวร์อื่น ๆ เช่น LibreOffice ฉันใช้ชุดรูปแบบเริ่มต้น: Ambiance
— Chuqui
1
การแก้ไขที่ฉันให้ไว้ควรชี้ให้คุณเห็นว่าคุณจะเพิ่มความเปรียบต่างได้อย่างไรสำหรับ Nautilus และ USC ฉันไม่รู้เกี่ยวกับ Nuvola IMO ความกว้างของแถบเลื่อนเริ่มต้นใน Ambiance นั้นไม่ได้แย่เกินไป (เมื่อคุณปรับความคมชัด)
คำตอบที่ดีมาก จะรู้ได้อย่างไรว่าแอปพลิเคชันใช้ GTK 2 หรือ GTK 3 หรือไม่ nautilus, gedit ใช้ GTK 3 แต่ firefox / thunderbird ใช้ GTK 2 มีวิธีใดบ้างที่จะค้นพบมัน
— Chandrayya GK
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
สิ่งนี้จะไม่ดีไปกว่าการแก้ไขคำตอบอื่น ๆ ของคุณ?
— Pavel V.
ความตั้งใจของฉันสำหรับคำตอบที่แยกต่างหากคือการแยกสิ่งต่าง ๆ 12.04 จาก 14.04 อย่างชัดเจนเพื่อให้ผู้บริโภคของแฟ้มเค้าโครงที่ฉันเตรียมไว้สามารถค้นหาสิ่งที่ถูกต้องได้อย่างรวดเร็วและไม่สับสน แต่ ... อืม ... มีใครสามารถโต้แย้งเกี่ยวกับ ... ;)
— Nicolas
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.