How to Make a Compact Gnome Theme

The themes Human Compact and Clearlooks Compact have been quite a success, and I got several requests to make a tutorial on how to create such a compact theme.

UPDATE: Human Compact Theme for Ubuntu 8.10 (Intrepid Ibex) is available!

Well, it is a bit difficult to create a step-by-step tutorial, but I will try anyways. Prepare to fiddle around with your configuration and try it out several times until you get the desired results.

  1. All your Gnome themes are located under /usr/share/themes. Find the theme of which you want to create a compact one, and copy it into your home directory with e.g.

  2. If there is a file index.theme, open it and change all the names (e.g. add “Compact” where appropriate). This file is necessary if you want to directly choose the theme from the Appearance Preferences; if it is not available you have to choose a theme and select “customize” to select the compact controls for it.
  3. Now to the fiddling part. Open gtk-2.0/gtkrc, and change lots of thickness and width settings… When you do this, always check how your changes work visibly, e.g. if the application still have usable borders etc. To help with the fiddling, I have added a diff of the Human vs. the Compact theme, you might be able to reuse some of the settings there.
  4. Once you are satisfied with your theme, you can create a .tar.bz2 distribution for backup or to be used by others, e.g. with this command:

  5. That’s it. Have fun with your theme!


Diff between “Human” and “Human Compact”

--- /usr/share/themes/Human/gtk-2.0/gtkrc	2008-07-03 18:13:20.000000000 +0200
+++ .themes/Human Compact/gtk-2.0/gtkrc 2008-05-22 21:11:07.000000000 +0200
@@ -10,29 +10,61 @@

gtk_color_scheme = "fg_color:#101010\nbg_color:#EFEBE7\nbase_color:#FFF\ntext_color:#000\nselected_bg_color:#FFD799\nselected_fg_color:#000\ntooltip_bg_color:#F5F5B5\ntooltip_fg_color:#000\norange_color:#FF6D0C\nmetacity_frame_color:#CC863E\nextra_view_widgets_color:#F5C07F"

-gtk-icon-sizes = "panel-menu=24,24"
+gtk-icon-sizes = "panel-menu=16,16 : gtk-menu=16,16 : gtk-button=16,16 : gtk-small-toolbar=16,16 : gtk-large-toolbar=16,16 : gtk-dialog=32,32 : gtk-dnd=32,32"

style "ubuntulooks-default"
{
- GtkButton ::default_border = { 0, 0, 0, 0 }
+ # base class for everything
+ # setting this to 0 has *very* tight packing. 1-2 looks better.
+ GtkWidget ::focus_padding = 0
+
+ GtkButton ::child-displacement-x = 1
+ GtkButton ::child-displacement-y = 1
+ GtkButton ::default-border = { 0, 0, 0, 0 }
+ GtkButton ::default-outside-border={ 0, 0, 0, 0 }
+
+ GtkButtonBox ::child_min_width = 0
+ GtkButtonBox ::child_min_heigth = 0
+ GtkButtonBox ::child_internal_pad_x = 0
+ GtkButtonBox ::child_internal_pad_y = 0
+
+ GtkPaned ::handle_size = 4
+
GtkRange ::trough_border = 0
- GtkPaned ::handle_size = 6
- GtkRange ::slider_width = 15
+ GtkRange ::slider_width = 14
GtkRange ::stepper_size = 15
+ GtkRange ::stepper_spacing = 0

- GtkScrollbar ::min_slider_length = 35
+ GtkScrollbar ::min_slider_length = 30
+ GtkScrolledWindow::scrollbar_spacing = 0
GtkCheckButton ::indicator_size = 14
GtkMenuBar ::internal-padding = 0
- GtkTreeView ::expander_size = 14
- GtkExpander ::expander_size = 16
- GtkScale ::slider-length = 31
+
+ GtkMenu ::horizontal-padding = 0
+ GtkMenu ::vertical-padding = 0
+
+ GtkOptionMenu ::indicator_size = 0
+ GtkOptionMenu ::indicator_spacing = 0
+
+
+ GtkTreeView ::expander_size = 11
+ GtkTreeView ::expander_spacing = 0
+ GtkTreeView ::vertical-separator = 0
+ GtkTreeView ::horizontal-separator = 0
+
+ GtkExpander ::expander_size = 11
+ GtkExpander ::expander_spacing = 0
+ GtkScale ::slider-length = 23
+ GtkScale ::value_spacing = 0
+
+ GtkToolbar ::internal-padding = 0
+ GtkToolbar ::space-size = 10
+
# GtkToolbar ::button-relief = GTK_RELIEF_NORMAL
# GtkMenuBar ::shadow-type = GTK_SHADOW_OUT
# GtkScrollbar ::has-secondary-forward-stepper = 1
# GtkScrollbar ::has-secondary-backward-stepper = 1

- GtkButton ::child-displacement-x = 0
- GtkButton ::child-displacement-y = 0

xthickness = 1
ythickness = 1
@@ -92,8 +124,8 @@

style "ubuntulooks-wide" = "ubuntulooks-default"
{
- xthickness = 2
- ythickness = 2
+ xthickness = 0
+ ythickness = 0
}

style "ubuntulooks-wide-orange" = "ubuntulooks-wide"
@@ -104,7 +136,7 @@
style "ubuntulooks-wider" = "ubuntulooks-default"
{
xthickness = 3
- ythickness = 3
+ ythickness = 2
}

style "ubuntulooks-wider-orange" = "ubuntulooks-wider"
@@ -114,12 +146,18 @@

style "ubuntulooks-button" = "ubuntulooks-wider-orange"
{
+ xthickness = 0
+ ythickness = 0
+
bg[PRELIGHT] = shade (1.02, @bg_color)
bg[ACTIVE] = shade (0.90, @bg_color)
}

style "ubuntulooks-notebook" = "ubuntulooks-wide-orange"
{
+ xthickness = 0
+ ythickness = 0
+
bg[NORMAL] = shade (0.99, @bg_color)
bg[ACTIVE] = shade (0.85, @bg_color)
bg[INSENSITIVE] = shade (0.99, @bg_color)
@@ -127,14 +165,14 @@

style "ubuntulooks-tasklist" = "ubuntulooks-default"
{
- xthickness = 5
- ythickness = 3
+ xthickness = 0
+ ythickness = 0
}

style "ubuntulooks-menu" = "ubuntulooks-default"
{
- xthickness = 2
- ythickness = 1
+ xthickness = 0
+ ythickness = 0
bg[NORMAL] = shade (1.04, @bg_color)
}

@@ -145,8 +183,9 @@

style "ubuntulooks-menu-item" = "ubuntulooks-default"
{
- xthickness = 2
- ythickness = 3
+ xthickness = 1
+ ythickness = 1
+
bg[SELECTED] = @selected_bg_color
fg[PRELIGHT] = @selected_fg_color
text[PRELIGHT] = @text_color
@@ -171,19 +210,26 @@

style "ubuntulooks-progressbar" = "ubuntulooks-wide-orange"
{
- xthickness = 2
- ythickness = 2
+ xthickness = 0
+ ythickness = 0
fg[PRELIGHT] = @base_color
}

style "ubuntulooks-treeview" = "ubuntulooks-wide-orange"
{
- xthickness = 2
- ythickness = 2
+ xthickness = 0
+ ythickness = 0
fg[NORMAL] = @text_color
fg[SELECTED] = @base_color
}

+# style are overriden again.
+style "ubuntulooks-treeview-header" = "ubuntulooks-default"
+{
+ xthickness = 0
+ ythickness = 0
+}
+
style "ubuntulooks-combo" = "ubuntulooks-button"
{
}

Any questions, comments?

12 Comments on "How to Make a Compact Gnome Theme"

Notify of
avatar

trackback

[…] Si tienes algún otro tema que te guste, pero tiene el mismo problema que Human, encontré un tutorial en donde se explica la forma en la que se puede hacer más compacto. Lo puedes consultar aquí. […]

trackback

[…] This is a new release of the compact theme, based on the original Ubuntu 8.10 (Intrepid) theme. It was created by Jan Sur almost a month ago, based on my little howto. […]

Bart
Guest
7 years 2 months ago

Martin thanks a lot for this little howto! I’m using Ubuntu 9.04 with the New Wave theme and Eikon icons. Adding

gtk-icon-sizes = “panel-menu=16,16 : gtk-menu=16,16 : gtk-button=16,16 : gtk-small-toolbar=16,16 : gtk-large-toolbar=20,20 : gtk-dialog=32,32 : gtk-dnd=32,32”

to the gtkrc and changing font sizes saves a lot of screen space 🙂

bornagainpenguin
Guest
bornagainpenguin
6 years 4 months ago

Is there a way to semi automate this for various themes?

I love the way it works in Human, but would like to be able to apply it to other themes from gnome-look.org instead of having to stay with Human all the time just in order to keep things sized right for my eeepc. Thanks@

–bornagainpenguin

Andrzej Taramina
Guest
Andrzej Taramina
6 years 3 months ago

Good stuff! I’ve been trying to vertically shrink down treeviews so that they are a lot more compact.

The examples above helped a lot, but I’m still not as compact as Windoze treeviews.

Are there some gtkrc settings that will reduce the whitespace padding/borders further for each treeview entry? Maybe some settings for cells or icons or some such?

Thanks!

Peter_Peng
Guest
Peter_Peng
6 years 3 months ago
Thanks for your sharing with us on how to make a compact theme. A way to enable compact style with all themes is found,as following source code shows.Put following code into ~/gtkrc-2.0,the current theme you are using will be compacted. How to write following code? I just copy the gtkrc in your “Clear Look Compact”,and then remove all the code related to color,keeping all the code related to ajusting border,thickness,and so on 🙂 # This library is free software; you can redistribute it and/or # modify it under the terms of the GNU Lesser General Public # License as published… Read more »
snusmumrik
Guest
snusmumrik
6 years 2 months ago

What else should I do to apply changes after creating gtkrc-2.0 file and putting code there?

Rio
Guest
6 years 2 months ago

I made a compact version of the default Ambiance theme in Lucid Lynx. You can download a tarball or contribute to the source from the github page: http://github.com/Rio517/AmbianceCompact

Thanks!

kholis
Guest
6 years 2 months ago

i’ve made another ambiance compact theme version. enjoy 🙂

http://www.4shared.com/file/SvOxW05h/gtkrc-AmbienceCompacttar.html

trackback

[…] accounting app, or the the very beautiful web client, GTK just looked old.  So I headed over to Martin Ankerl‘s site and dragged and dropped the Clearlooks Compact theme in to my Ubuntu appearance.  […]

trackback
trackback
wpDiscuz