Como alterar a cor e a largura das barras de rolagem não sobrepostas no Ubuntu 12.04

13

Sei que muitas pessoas se queixaram das barras de rolagem quase invisíveis e não utilizáveis ​​nas versões recentes do Ubuntu, mesmo depois de remover ou desativar as barras de rolagem de sobreposição padrão. Eu me pergunto como posso alterar facilmente sua cor e largura.

Eu tenho um monitor de 13,3 polegadas com uma resolução de 1600 * 900 e mal consigo vê-los, como você pode ver nestas imagens:

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

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

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

Eu já mudei o Firefox, o LibreOffice e as barras de rolagem de outros softwares usando o GNOME Color Chooser:

insira a descrição da imagem aqui

A propósito, estou usando o Unity. Obrigado!

12.04 colors scrollbar Chuqui
fonte
1
A captura de tela seria legal.
Uri Herrera
1
Uma captura de tela é uma obrigação que eu acho neste caso. Como a resposta fornecida não é o que você queria.
Anwar
Olá @UriHerrera e Anwar, já adicionei algumas imagens. Obrigado!
Chuqui
1
Por favor, pelo amor de Deus, por que os desenvolvedores não facilitam a alteração nas configurações do sistema?
rede neural

Respostas:

4

Nota:

As formatações nesta resposta são ideais apenas para precisão (Ubuntu 12.04); consulte a próxima resposta para obter melhores formatações para o trusty (Ubuntu 14.04).

Tornar as barras de rolagem visíveis (mudar de cor)

Com base nas informações do vasa1 fornecidas acima, mudei a cor das barras de rolagem clássicas para a cor de seleção padrão - a mesma que as barras de rolagem de sobreposição também estão usando.

Para aplicativos GTK 3, modifique:

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

a partir da linha 1580, para que se pareça com:

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

Isso deve ser o padrão.

Para aplicativos GTK 2, modifique:

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

a partir da linha 223 para que se pareça com:

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

Ele não parece 100% idêntico à formatação GTK 3, portanto, fique à vontade para aprimorá-la.

Tornar as barras de rolagem clicáveis ​​(aumentar a largura)

Para aumentar a pequena largura boba que nunca foi usada para produção, presumo, faça as seguintes alterações nos mesmos arquivos.

Para aplicativos GTK 3:

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

modifique a linha 1550 para que se pareça com:

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

Para aplicativos GTK 2, modifique:

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

modifique a linha 34 para que se pareça com:

GtkScrollbar::slider-width = 16

Para aqueles que preferem os arquivos completos já editados, você pode baixar o meu aqui:

GTK 3: gtk-widgets.css

GTK 2: gtkrc

Seja cuidadoso. Faça backups.

Desfrutar! :)

Nicolas
fonte
Para quem já leu minha resposta: com a última edição, melhorei bastante a formatação. :)
Nicolas
8

Suponho que você esteja se referindo às barras de rolagem sobrepostas porque menciona o Unity. Não sei como alterar a largura, mas você certamente pode mudar a cor. Se a cor é suficientemente distinta, sinto que a largura não é um grande problema, porque, ao passar o mouse, ela se torna decentemente larga.

Você precisa procurar na pasta do seu tema por arquivos chamados gtkrc (na pasta gtk-2.0) e gtk-widgets.css (na pasta gtk-3.0). Abra esses arquivos com um editor de texto. Você pode precisar usar em gksudo geditvez de apenas geditse o seu tema estiver em / usr / share / themes e não em ~ / .themes. Em seguida, pesquise barras de rolagem de sobreposição ou barra de rolagem de sobreposição ou algo semelhante e brinque com as cores especificadas nessas seções. Você pode até especificar sua própria cor em código hexadecimal.

Obviamente, você pode definir cores diferentes nos dois arquivos, se assim desejar.

Para visualizar as alterações, pode ser necessário mudar para outro tema e voltar depois de fazer e salvar as alterações nesses arquivos.

As alterações feitas em / usr / share / themes serão abrangentes ao sistema e as alterações em ~ / .themes serão específicas do usuário.

É assim que minha barra de rolagem de sobreposição se parece no PCManFM.

Minha barra de rolagem de sobreposição

Editar : Caso esteja usando barras de rolagem convencionais, para aumentar o contraste entre o controle deslizante e a calha em aplicativos gtk-3.0 como o gedit, é possível editar o arquivo gtk-widgets.css mencionado acima. Para fazer isso, procure a seção barra de rolagem (ou algo semelhante) e procure as linhas com algo parecido com isto:

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

Aqui, pode-se brincar com os valores da imagem de fundo alterando a tonalidade. Um valor mais alto é mais brilhante, um valor mais baixo é mais escuro.

Prefiro fazer algo mais simples: altero a imagem de fundo para a cor de fundo e tenho apenas uma cor que gosto. Então, por exemplo, cor de fundo: vermelho; provavelmente daria um contraste notável.

Meu código fica assim:

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

Obviamente, um backup antes da edição é aconselhável e pode-se comentar coisas no arquivo gtk-widgets.css em vez de excluir as coisas usando /*e */.

(Não consigo que a formatação das aspas de bloco funcione enquanto publico respostas. Se alguém limpasse as coisas, ficaria agradecido.)

Uma última edição (espero): os usuários do Chrome ou Chromium podem aumentar o contraste editando seu gtk-2.0/apps/chromium.rcarquivo se o tema o fornecer ou editando gtk-2.0/gtkrcse o necessário for apresentado lá. Nos dois casos, deve-se procurar uma seção com o estilo "chrome-gtk-frame" . Aqui, novamente, brinque com o valor de sombra nesta linha (ou similar):

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

Ou pode-se simplesmente especificar uma cor como esta:

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

ou

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

(As cotações são obrigatórias.)

Eliah Kagan
fonte
1
Me desculpe, @ vasa1! Esqueci de mencionar que removi as barras de rolagem de sobreposição usando "Unsettings" ou alguns comandos. Agora eu tenho barras de rolagem estreitas e de baixo contraste. É isso que eu preciso consertar. (Eu já editei a pergunta original).
Chuqui
@Chuqui, você poderia mencionar alguns aplicativos específicos que são problemáticos? E mencione qual tema você está usando. Eu sei de pelo menos um tema que tem barras de rolagem muito finas. Nesse caso, pode ser apenas uma questão de tentar outro tema.
Olá @ vasa1, quero agradecer novamente pelas instruções detalhadas que você me deu. Sinto muito por não ter sido suficientemente claro na minha pergunta. Acima, você pode ver imagens de aplicativos onde as barras de rolagem são difíceis de ver: Nautilus, Nuvola Player e Ubuntu Software Center. Pelo contrário, usando o Gnome Color Chooser, eu poderia mudar o Firefox, o Ubuntu One e as barras de rolagem de outros softwares, como o LibreOffice. Estou usando o tema padrão: Ambiente
Chuqui
1
A edição que forneci deve indicar como você pode aumentar o contraste, mesmo para o Nautilus e USC. Eu não sei sobre o Nuvola. Na IMO, a largura da barra de rolagem padrão no Ambiance não é muito ruim (depois que você ajusta o contraste).
Resposta muito boa. Como saber se um aplicativo usa GTK 2 ou GTK 3? Ex nautilus, o gedit usa GTK 3, mas o firefox / thunderbird usa o GTK 2. Existe alguma maneira de descobrir isso?
Chandrayya GK
2

Para o Ubuntu 14.04 (Trusty Tahr), são necessárias modificações ligeiramente diferentes.

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

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

Faça backups antes:

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/

Esses comandos esperam os arquivos baixados gtkrce gtk-widgets.cssno diretório atual.

Nicolas
fonte
1
Isso não seria melhor como uma edição para sua outra resposta?
Pavel V.
Minha intenção de uma resposta separada era separar claramente o material 12.04 do 14.04, para que os consumidores dos meus arquivos de layout preparados possam encontrar os corretos rapidamente e sem serem confundidos. Mas ... bem ... pode-se argumentar sobre ...;)
Nicolas