Ubuntu 12.04에서 오버레이가 아닌 스크롤 막대의 색상과 너비를 변경하는 방법


13

많은 사람들이 기본 오버레이 스크롤 막대를 제거하거나 비활성화 한 후에도 최신 버전의 우분투에서 거의 보이지 않고 사용할 수없는 스크롤 막대에 대해 불평했다는 것을 알고 있습니다. 색상과 너비를 쉽게 변경하는 방법이 궁금합니다.

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

그놈 색상 선택기를 사용하여 Firefox, LibreOffice 및 기타 소프트웨어의 스크롤 막대를 이미 변경했습니다.

여기에 이미지 설명을 입력하십시오

그건 그렇고, 나는 Unity를 사용하고 있습니다. 감사!


1
스크린 샷이 좋을 것입니다.
Uri Herrera

1
이 경우에는 스크린 샷이 꼭 필요합니다. 제공된 답변이 원하는 것이 아니기 때문에.
Anwar

@UriHerrera와 Anwar 안녕하세요. 이미 이미지를 추가했습니다. 감사!
Chuqui

1
신의 사랑을 위해 시스템 설정에서 개발자가 쉽게 변경하지 못하는 이유는 무엇입니까?
neuronet

답변:


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

GTK 3 형식과 100 % 동일하게 보이지 않으므로 자유롭게 개선하십시오.


스크롤 막대를 클릭 할 수있게 만들기 (폭 증가)

프로덕션 환경에서 사용되지 않은 아주 작은 너비 를 늘리려면 동일한 파일을 다음과 같이 변경하십시오.

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

8

Unity를 언급했기 때문에 오버레이 스크롤 막대를 참조한다고 가정합니다. 너비를 변경하는 방법을 모르지만 확실히 색상을 변경할 수 있습니다. 색상이 충분히 뚜렷하면 호버에서 너비가 넓어지기 때문에 너비가 그렇게 큰 문제는 아니라고 생각합니다.

테마 폴더에서 gtkrc (gtk-2.0 폴더) 및 gtk-widgets.css (gtk-3.0 폴더) 라는 파일을 찾아야 합니다. 텍스트 편집기로이 파일을여십시오. 테마가 ~ / .themes가 아닌 / usr / share / themes gksudo gedit에있는 gedit경우 대신에 사용해야 할 수도 있습니다 . 그런 다음 오버레이 스크롤 막대 또는 오버레이 스크롤 막대 또는 이와 유사한 것을 검색 하여 해당 섹션에 지정된 색상으로 재생하십시오. 16 진 코드로 자신의 색상을 지정할 수도 있습니다.

원하는 경우 두 파일에서 서로 다른 색상을 설정할 수 있습니다.

변경 사항을 시각화하려면 다른 테마로 전환 한 다음 해당 파일을 변경하고 저장 한 후에 다시 전환해야 할 수도 있습니다.

당신이 만드는 변화 는 / usr / share는 / 테마는 시스템 전체 수와로 변경됩니다 ~ / .themes 사용자 고유의 것입니다.

이것이 PCManFM에서 오버레이 스크롤바와 같은 모양입니다.

오버레이 스크롤바

편집 : 기존 스크롤 막대를 사용하는 경우 gedit와 같은 gtk-3.0 앱에서 슬라이더와 여물통의 대비를 높이기 위해 위에서 언급 한 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;

여기 에서 음영을 변경하여 배경 이미지 의 값으로 재생할 수 있습니다 . 값이 클수록 밝고 낮을수록 어둡습니다.

배경 -에 나는 변화의 배경 이미지 : 좀 더 간단하게 뭔가를 선호하는 색상 과 단지 같은 색상 I 있습니다. 예를 들어 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필요한 항목이 있으면 수정하여 대비를 높일 수 있습니다. 두 경우 모두 섹션 스타일 "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"

(따옴표가 필요합니다.)


1
죄송합니다, @ vasa1! "Unsettings"또는 일부 명령을 사용하여 오버레이 스크롤 막대를 제거했음을 언급하지 않았습니다. 이제 좁고 대비가 낮은 스크롤 막대가 있습니다. 그게 내가 고쳐야 할 것입니다. (나는 이미 원래 질문을 편집했습니다).
Chuqui

@ Chuqui, 문제가있는 몇 가지 특정 앱을 언급 할 수 있습니까? 그리고 어떤 테마를 사용하고 있는지 언급하십시오. 스크롤바가 매우 얇은 테마를 하나 이상 알고 있습니다. 이 경우 다른 테마를 사용해 보는 것이 문제 일 수 있습니다.

@ vasa1 님 안녕하세요. 자세한 지침에 대해 다시 한 번 감사드립니다. 내 질문에 충분히 명확하지 않아서 죄송합니다. 위에서 스크롤바가 잘 보이지 않는 응용 프로그램의 이미지를 볼 수 있습니다 : 노틸러스, 누 볼라 플레이어 및 우분투 소프트웨어 센터. 반대로 Gnome Color Chooser를 사용하면 Firefox, Ubuntu One 및 LibreOffice와 같은 다른 소프트웨어의 스크롤 막대를 변경할 수 있습니다. 나는 기본 테마를 사용하고 있습니다 : 안스
Chuqui

1
내가 제공 한 편집 내용은 노틸러스와 USC의 경우에도 대비를 높일 수있는 방법을 알려줍니다. 누 볼라에 대해 모르겠습니다. Ambiance의 기본 스크롤 막대 너비 인 IMO는 그다지 나쁘지 않습니다 (한 번 대비를 조정).

아주 좋은 대답입니다. 응용 프로그램이 GTK 2 또는 GTK 3을 사용하는지 여부를 어떻게 알 수 있습니까? 예 : 노틸러스, gedit는 GTK 3을 사용하지만 firefox / thunderbird는 GTK 2를 사용합니다. 어떻게 찾을 수 있습니까?
Chandrayya GK

2

를 들어 우분투 14.04 (트러스티 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/ 

이러한 명령은 다운로드 한 파일 gtkrcgtk-widgets.css현재 디렉토리에 있어야합니다.


1
다른 답변을 편집하는 것이 더 좋지 않습니까?
Pavel V.

별도의 답변에 대한 나의 의도는 준비된 레이아웃 파일의 소비자가 혼란스럽지 않고 올바른 것을 신속하게 찾을 수 있도록 14.04와 14.04를 명확하게 분리하는 것이 었습니다. 그러나 ... 글쎄 ... 하나에 대해 논쟁 할 수 있습니다 ...;)
Nicolas
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.