How to Make a Compact Gnome Theme

Share

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.
    cp -r /usr/share/themes/Human ~/.themes/Human-Compact
  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:
    cd ~/.themes
    tar cjvf ~/Human-Compact.tar.bz2 Human-Compact
  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:#101010nbg_color:#EFEBE7nbase_color:#FFFntext_color:#000nselected_bg_color:#FFD799nselected_fg_color:#000ntooltip_bg_color:#F5F5B5ntooltip_fg_color:#000norange_color:#FF6D0Cnmetacity_frame_color:#CC863Enextra_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?

Share
  • Pingback: Tema Human Compact para Ubuntu | DESCARGAR DESCARGAS GRATIS

  • Pingback: Martin Ankerl » Blog Archive » Human Compact Themes (for Ubuntu 8.10)

  • http://my.opera.com/area42/blog/ Bart

    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

    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

    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

    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 by the Free Software Foundation; either
    # version 2.1 of the License, or (at your option) any later version.
    #
    # This library is distributed in the hope that it will be useful,
    # but WITHOUT ANY WARRANTY; without even the implied warranty of
    # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    # Lesser General Public License for more details.
    #
    # You should have received a copy of the GNU Lesser General Public
    # License along with this library; if not, write to the Free Software
    # Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
    #
    #
    # changes:
    #
    #
    #
    # April 9th, 2009
    # a bit smaller checkbox + selection box, less blurry and smaller progress bar.
    #
    # April 5th, 2009
    # added LGPL, index.theme, version number.
    #
    # April 11th, 2008
    # Small panel menu
    #
    # November 11th, 2007
    # Major update: Smaller handlers sizes, smaller scrollbars, no scrollbar spacing, less overall padding, and some more.
    #
    # November 7th, 2007
    # Now even more compact by reducing the default icon size to 16×16 pixels.
    #
    # November 4th, 2007
    # First release of Clearlooks Compact.
    #

    # Set GtkSettings color scheme property.
    # This can be overriden (via an xsetting) with eg. the gnome-appearance-properties.

    # gtk-icon-sizes = “gtk-button=16,16″

    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″
    # gtk-icon-sizes = “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 “clearlooks-default”
    {
    # 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

    GtkProgressBar ::min-horizontal-bar-height = 15
    GtkProgressBar ::min-horizontal-bar-width = 90
    GtkProgressBar ::min-vertical-bar-height = 60
    GtkProgressBar ::min-vertical-bar-width = 13

    GtkCheckButton ::indicator-size = 12
    # GtkCheckButton ::indicator-spacing = 1

    GtkPaned ::handle-size = 4

    GtkRange ::trough-border = 0
    GtkRange ::slider-width = 14
    GtkRange ::stepper-size = 15
    GtkRange ::stepper_spacing = 0

    GtkScale ::slider-length = 23
    GtkScale ::trough-side-details = 1
    GtkScale ::value_spacing = 0

    GtkScrollbar ::min-slider-length = 30
    GtkScrolledWindow::scrollbar_spacing = 0

    # expander in e.g. save dialog to see details
    GtkExpander ::expander-size = 11
    GtkExpander ::expander_spacing = 0

    # e.g. eclipse package view
    GtkTreeView ::expander-size = 11
    GtkTreeView ::vertical-separator = 0
    GtkTreeView ::horizontal-separator = 0

    # handler size between button bars
    GtkToolbar ::internal-padding = 0
    GtkToolbar ::space-size = 10

    GtkMenuBar ::internal-padding = 0
    GtkMenu ::horizontal-padding = 0
    GtkMenu ::vertical-padding = 0

    GtkOptionMenu ::indicator_size = 0
    GtkOptionMenu ::indicator_spacing = 0

    # Glow the tasklist by changing the color, instead of overlaying it with a rectangle
    WnckTasklist ::fade-overlay-rect = 0

    xthickness = 1
    ythickness = 1

    }

    style “clearlooks-wide”
    {
    xthickness = 0
    ythickness = 0
    }

    style “clearlooks-wider”
    {
    xthickness = 3
    ythickness = 2
    }

    style “clearlooks-button”
    {
    xthickness = 0
    ythickness = 0

    }

    style “clearlooks-notebook”
    {
    xthickness = 0
    ythickness = 0

    }

    style “clearlooks-tasklist”
    {
    xthickness = 0
    ythickness = 0
    }

    style “clearlooks-menu”
    {
    xthickness = 0
    ythickness = 0

    }

    style “clearlooks-menu-item”
    {
    xthickness = 1
    ythickness = 1

    }

    # Based on the default style so that the colors from the button
    # style are overriden again.
    style “clearlooks-treeview-header” = “clearlooks-default”
    {
    xthickness = 0
    ythickness = 0
    }

    style “clearlooks-tooltips”
    {
    xthickness = 4
    ythickness = 4

    }

    style “clearlooks-progressbar”
    {
    xthickness = 1
    ythickness = 1

    }

    #########################################
    # Matches
    #########################################

    # Clearlooks default style is applied to every widget
    class “GtkWidget” style “clearlooks-default”

    # Increase the x/ythickness in some widgets
    class “GtkToolbar” style “clearlooks-default”
    class “GtkRange” style “clearlooks-wide”
    class “GtkFrame” style “clearlooks-wide”
    class “GtkSeparator” style “clearlooks-wide”
    class “GtkEntry” style “clearlooks-wider”

    # General matching following, the order is choosen so that the right styles override each other
    # eg. progressbar needs to be more important then the menu match.

    widget_class “*” style “clearlooks-button”
    widget_class “*” style “clearlooks-notebook”
    widget_class “*” style “clearlooks-progressbar”

    widget_class “**” style “clearlooks-menu”
    widget_class “**” style “clearlooks-menu-item”

    # Treeview header
    widget_class “*..” style “clearlooks-treeview-header”
    widget_class “*..” style “clearlooks-treeview-header”
    widget_class “*..” style “clearlooks-treeview-header”
    widget_class “*..” style “clearlooks-treeview-header”

    # The window of the tooltip is called “gtk-tooltip”
    ################################
    # FIXME:
    # This will not work if one embeds eg. a button into the tooltip.
    # As far as I can tell right now we will need to rework the theme
    # quite a bit to get this working correctly.
    # (It will involve setting different priorities, etc.)
    ################################
    widget “gtk-tooltip*” style “clearlooks-tooltips”

    ###################################################
    # Special cases and work arounds
    ###################################################

    # Special case the nautilus-extra-view-widget
    # ToDo: A more generic approach for all applications that have a widget like this.

    # Work around for http://bugzilla.gnome.org/show_bug.cgi?id=382646
    # Note that the work around assumes that the combobox is _not_ in
    # appears-as-list mode.
    # Similar hack also in the menuitem style.

  • snusmumrik

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

  • http://orbitalvoice.com/ Rio

    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!

  • http://kholis.web.id kholis

    i’ve made another ambiance compact theme version. enjoy :)

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

  • Pingback: Open For Small Business » Theming OpenERP

  • Pingback: How to change the X-Windows default border width for all window frames in Ubuntu using Gnome 2.28