Get Rid Of Obese Scrollbars on Ubuntu Natty

The default scrollbars for applications that don’t support the overlay scrollbar are too fat and ugly. They could certainly use a little workout to shave off a few excess weight. If you can’t wait for another six months for Ubuntu to roll-out support of the overlay scrollbars to all applications like me, well, let us at least force these obese scrollbars to become thinner.

HOW? Feed them a veggie-only diet? Perhaps. Workout at the gym? Not really. How about we edit the gtkrc file? YES!

I am sure we can override all themes to follow one scrollbar style, but for now, I am directly applying it on the Radiance theme. Last time, I had already started a few dirty “tweaks” on Nautilus under Radiance, I might as well continue it from there.

The procedure is simple.

(1) Go to /usr/share/themes/Radiance/gtk-2.0

(2) Make a backup of the gtkrc file in there

(3) Open the gtkrc file with your favorite editor

(3 & 1/2) Did I tell you that step #3 requires you to be privileged to edit the file directly? Run the following `gksudo gedit /usr/share/themes/Radiance/gtk-2.0/gtkrc`.

(4) Change the values of the following,

Find the line – GtkScrollbar::slider-width. There should only be one in that file. The default value is 13. Change that to a lower value. Mine is set to,

GtkScrollbar::slider-width = 6

Find the line – GtkScrollbar::trough-border. There should only be one in the file. The default value is 0. Change that to a higher value, but not too high or you will have a trough that looks as wide as a 8-lane highway. Mine is set to,

GtkScrollbar::trough-border = 3

Find the line – style “scrollbar” = “button”. That is your marker from where to start editing. Again there should be only one in that file. Change the values to look like the text in green highlights below. Add a ‘#’ before each line that is highlighted in orange.

style “scrollbar” = “button” {
xthickness = 1
ythickness = 1

bg[NORMAL] = @bg_color
bg[PRELIGHT] = shade (1.04, @selected_bg_color)
bg[ACTIVE] = shade (0.96, @selected_bg_color)

engine “murrine” {
border_shades = {0.95, 0.90}
roundness = 0
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}

(5) Reload the theme (in this case it is Radiance) by selecting another theme then re-select Radiance. BAM! Obese scrollbars no more. Now they look as sexy as their overlay scrollbar cousins. Or it could be said they look malnourished. Whichever point of view you look at it.

First, a little explanation.. .

  • GtkScrollbar::slider-width is the ‘slimming tea’ for our obese scrollbars. Works almost instantly!
  • xthickness and  ythickness control the border thickness of the scrollbars.
  • roundess when set to 0 makes the edges of the scrollbars flat, just like the overlay scrollbars have flat edges.
  • PRELIGHT color takes effect when you hover the mouse to the scrollbar whose parent window is not focused
  • ACTIVE color stays in effect as long as the scrollbar is clicked
  • GtkScrollbar::trough-border controls spacing between thumb/steppers and outer trough bevel. But really we just want it to have a wider look*
  • The ones in orange highlights – trough_shades and trough_border_shades – are commented out so that the trough effect that makes it look sunken are disabled. I wanted it that way so that the trough, wider than the scrollbar, does not stand out.

Now we have a more consistent look overall for our adorable Natty Narwhal desktop.

* Why make the trough appear wider? The effect of making the scrollbars too thin is that it affects how other widgets are displayed. For example, I found out that on a web page where there is a drop-down menu that does not follow a custom style sheet, it will adapt to the system default. What happens is that the button – where the down arrow usually is – becomes too thin and almost indistinguishable, making it not look like a drop-down menu.

Another drawback is that in LibreOffice Calc. If you are familiar with the tabs at the bottom – the ones that you click to go from one sheet to another – it is somehow dependent to the width of the scrollbars. If the scrollbars are too thin, the tabs become too short making the title on the sheets almost unreadable.

Similar Posts:

Notice: This article was published on May 19, 2011 and the content above may be out of date.