Sunday, June 26, 2011

Customize the Appearance of Gnome Panel, all Ubuntus

If you want to set a custom background image or colors to the panels in classic Gnome, or if you want to make them completely transparent without having the default panel background overlaying them in the button areas, you may need to modify the respective settings of the used theme.

This is how to do that with the Ambiance theme in Natty 11.04, but you can easily adapt this to any other theme.

1. Backup the default panel configuration file:

sudo cp /usr/share/themes/Ambiance/gtk-2.0/apps/gnome-panel.rc /usr/share/themes/Ambiance/gtk-2.0/apps/gnome-panel-original.rc

2. Edit the panel configuration file:

gksudo gedit /usr/share/themes/Ambiance/gtk-2.0/apps/gnome-panel.rc

  • To disable the default background image, comment the red-marked entry as shown below.
  • To modify the background color in case you don't use any background image, modify the hex color code of the green-marked entry.
  • To modify the text colors of the panel items, add the blue-marked entries and modify the hex color codes.

# ==============================================================================
# GNOME PANEL SPECIFIC SETTINGS
# ==============================================================================

style "panel" = "dark"
{
        xthickness = 0
        ythickness = 0

        #bg_pixmap[NORMAL] = "img/panel.png"
        bg[NORMAL] = "#4b4a46"

        fg[NORMAL]        = @fg_color_dark
        fg[PRELIGHT]      = shade (1.15, @fg_color_dark)
        fg[ACTIVE]        = @fg_color_dark
        fg[SELECTED]      = @selected_fg_color_dark
        fg[INSENSITIVE]   = shade (0.5, @fg_color_dark)

        engine "murrine" {
                #contrast = 1.0
                textstyle = 2
                text_shade = 0.35
        }
}

To also modify the style of the "ACTIVE" and "PRELIGHT" task buttons (red-marked), you can either
  • set them transparent as well by applying the image set for the "NORMAL" and "INSENSITIVE" buttons (green-marked) to them.
  • add custom images to the subdirectory "gtk-2.0/apps/img" and apply them to them.
  • remove the respective image specs completely and set them just to colors by adding the blue-marked entries and modifying the hex color codes.

style "panel_task_button" = "dark"
{
        xthickness = 3
        xthickness = 3

        GtkWidget::focus-line-width        = 0
        GtkWidget::focus_padding           = 0
        GtkWidget::interior_focus          = 0
        GtkWidget::internal_padding        = 0

        GtkButton::child_displacement_x    = 0
        GtkButton::child_displacement_y    = 0
        GtkButton::default_border          = {0, 0, 0, 0}
        GtkButton::default_outside_border  = {0, 0, 0, 0}
        GtkButtonBox::child_internal_pad_x = 0
        GtkButtonBox::child_internal_pad_y = 0
        GtkButtonBox::child_min_heigth     = 0

        bg[NORMAL]        = @bg_color_dark
        bg[ACTIVE]        = shade (0.8, @bg_color_dark)
        bg[SELECTED]      = @selected_bg_color
        bg[PRELIGHT]      = shade (1.0, "#4D4C48")
        bg[INSENSITIVE]   = shade (0.85, @bg_color_dark)

        engine "pixmap" {
      
                image
                {
                        function                = BOX
                        recolorable             = TRUE
                        state                   = NORMAL
                        file                    = "img/panel-button-inactive.png"
                        border                  = { 1, 1, 1, 1 }
                        stretch                 = TRUE
                }
                
                image
                {
                        function                = BOX
                        recolorable             = TRUE
                        state                   = PRELIGHT
                        file                    = "img/panel-button-hover.png"
                        border                  = { 1, 1, 1, 1 }
                        stretch                 = TRUE
                }

                image
                {
                        function                = BOX
                        recolorable             = TRUE
                        shadow                  = OUT
                        state                   = PRELIGHT
                        file                    = "img/panel-button-hover.png"
                        border                  = { 1, 1, 1, 1 }
                        stretch                 = TRUE
                        
                }
                
                image
                {
                        function                = BOX
                        recolorable             = TRUE
                        shadow                  = IN
                        state                   = PRELIGHT
                        file                    = "img/panel-button-hover.png"
                        border                  = { 1, 1, 1, 1 }
                        stretch                 = TRUE
                         
                }
                
                image
                {
                        function                = BOX
                        recolorable             = TRUE
                        state                   = ACTIVE
                        file                    = "img/panel-button-active.png"
                        border                  = { 4, 4, 4, 4 }
                        stretch                 = TRUE
                }  
                image
                {
                        function                = BOX
                        recolorable             = TRUE
                        state                   = INSENSITIVE
                        file                    = "img/panel-button-inactive.png"
                        border                  = { 1, 1, 1, 1 }
                        stretch                  = TRUE
                }
        }
}

#widget_class "*Panel*"            style "panel"
widget "*PanelWidget*"            style "panel"
widget "*PanelApplet*"            style "panel"
widget "*fast-user-switch*"       style "panel" # workaround for Fast User Switch applet
widget "*CPUFreqApplet*"          style "panel" # workaround for CpuFreq Applet
class "PanelApp*"                 style "panel"
class "PanelToplevel*"            style "panel"
#widget_class "*Mail*"             style "panel"
widget_class "*notif*"            style "panel"

#widget_class "*?anel*utton"       style "panel_task_button" # causing problems to monodevelop
widget "*task*"                   style "panel_task_button"
widget "*.tasklist-button"        style "panel_task_button"
widget "*PanelApplet*TaskTitle*"  style "panel_task_button"

3. Save / Quit.

4. Re-apply the theme.

Have fun!

Related Posts:

Appearance , Gnome Panel , Themes