LXPanel Theming

From LXDE.org
Jump to: navigation, search
Note:
This article has been written by someone who is still learning how GTK themes work. Information can be inaccurate or simply wrong. Please, help to improve this article and/or fix the mistakes you find.

As of version 0.7.0, LXPanel has gained theming support via custom gtkrc file. Themes are associated with profiles, so they must be located in the used profile directory. They're searched in the locations set in the environment variables $XDG_CONFIG_HOME first, and then (from left to right) in $XDG_CONFIG_DIRS. For organization reasons, if the theme uses images it's advisable to create a subdirectory in the profile folder for them. To check the profile in use, look the line "@lxpanel --profile LXDE" in the file "$HOME/.config/lxsession/autostart".

gtkrc files are a complex subject, so to keep things easy this guide aims only to style the panel content, i.e. the panel and its plug-ins. Menus and configuration dialogues are not taken into account.

Panel Theming

To use a custom gtkrc, System theme must be selected in the tab Appearance of the Panel Preferences dialogue.

Supposing $HOME/.config/lxpanel/LXDE as the profile in use, lets create the gktrc file in that folder. We'll use some pixmaps too, so lets create a folder for them named images. Following is an example gtkrc content with comments.

#
# Global style for the panel
#

style "panel" {
   # BACKGROUND COLOURS

   # background of the components
   bg[NORMAL] = "red"
   # background of selected components
   bg[SELECTED] = "red"
   # background of components when the mouse is over
   bg[PRELIGHT] = "red"
   # background of components when the mouse is clicked
   bg[ACTIVE] = "red"
   # background of disabled components
   bg[INSENSITIVE] = "red"

   # FOREGROUND COLOURS

   # - foreground of the components
   fg[NORMAL] = "red"
   # - foreground of selected components
   fg[SELECTED] = "red"
   # - foreground of components when the mouse is over
   fg[PRELIGHT] = "red"
   # - foreground of components when the mouse is clicked
   fg[ACTIVE] = "red"
   # - foreground of disabled components
   fg[INSENSITIVE] = "red"

   # There are no areas with editable text, so text[xxx] 
   # doesn't apply

   # FONT
   # It's only honoured by 'Temperature monitor' and 'Weather'
   # plug-ins. Size, if present, must appear the last.

   font_name = "Sans italic bold 16"

   # This is necessary for the systray icons, otherwise they use
   # the panel background colour instead of the background pixmap.
   # This image doesn't stretches when the panel height changes.

   bg_pixmap[NORMAL] = "images/background.png"

   # This is to set the pixmap for the panel background. The 
   # pixmap is stretched when the panel height changes if the 
   # 'stretch' value is TRUE.

   engine "pixmap" {
      image {
         function = FLAT_BOX
         file     = "images/background.png"
         # Set the border to zero here to avoid problems
         border   = { 0, 0, 0, 0 }
         stretch  = TRUE
      }
   }
}

#
# Task Bar (Window List) style
#

style "taskbar-style" {
   # -thinkness defines the inside border of widgets. For example,
   # in this case it is the separation between the task bar buttons
   # border and the content inside the buttons (icon and text)
   xthickness = 4
   ythickness = 4

   # You can override the previously defined colours here
   # bg_pixmap and font_name doesn't apply here

   # This is to set the appearance of the buttons that represents
   # the tasks
   engine "pixmap" {
      image {
         function = BOX
         state    = NORMAL
         file     = "images/bt_normal.png"
         border   = { 4, 4, 4, 4 }
         stretch  = TRUE
      }

      image {
         function = BOX
         state    = ACTIVE
         file     = "images/bt_active.png"
         border   = { 4, 4, 4, 4 }
         stretch  = TRUE
      }

      image {
         function = BOX
         state    = PRELIGHT
         file     = "images/bt_prelight.png"
         border   = { 4, 4, 4, 4 }
         stretch  = TRUE
      }
   }
}

#
# Digital Clock settings
#

style "dclock-style"
{
   # Only the normal state colour apply here
   fg[NORMAL] = "#FF0000"

   # Only font family is honoured. Font style (bold, italic, etc.) and 
   # size are ignored.
   font_name = "monospace"

   # Lets use a different background for the clock
   engine "pixmap" {
      image {
         function = FLAT_BOX
         file     = "images/dclock-background.png"
         border   = { 4, 4, 4, 4 }
         stretch  = TRUE
      }
   }
}

#
# Application Launch Bar style
#

style "launchbar-style"
{
   # In this case the style is not applied to the whole launch bar but to
   # every item it contains. They are like a row of buttons.
   engine "pixmap" {
      image {
         function = FLAT_BOX
         file     = "images/launchbar-background.png"
         border   = { 4, 4, 4, 4 }
         stretch  = TRUE
      }
   }
}

#
# Menu and Directory Menu style
#

style "menu-style"
{
   engine "pixmap" {
      image {
         function = FLAT_BOX
         file     = "images/menu-background.png"
         border   = { 4, 4, 4, 4 }
         stretch  = TRUE
      }
   }
}


# Once the styles are defined, lets indicate we want to use them
widget "*Panel*"     style "panel"
widget "*taskbar*"   style "taskbar-style"
widget "*clock*"     style "dclock-style"
widget "*launchbar*" style "launchbar-style"
widget "*menu*"      style "menu-style"
Note:
If pixmaps and background colours are use together, colours are hidden by the images.

Other themeable items

Every item in the panel is a plug-in, and almost all of them can have their own style. Some of them do accept all the properties seem in the example; others only accept (some) colours, pixmaps (via bg_pixmap, engine "pixmap" or both), etc. Experimentation is needed. Take into account that some plug-ins have their own configuration dialogue and it's easier to use them than it is to use the gtkrc options. The following list summarizes the widgets names that can be used in the widget "*plug-in name*" style "plug-in style":

  • batt: Battery Monitor
  • cpufreq: CPU Usage Monitor
  • dclock: Digital Clock
  • deskno: Desktop Number / Workspace Name
  • dirmenu: Directory Menu
  • kbled: Keyboard LED
  • launchbar: Applicacion Lauch Bar
  • menu: Menu
  • monitors: Resource monitors
  • netstat: Manage Networks
  • netstatus: Network Status Monitor
  • pager: Desktop Pager
  • taskbar: Task Bar (Window List)
  • thermal: Temperature Monitor
  • volumealsa: Volume Control
  • wincmd: Minimise All Windows
  • xkb: Keyboard Layout Handler

Notes

  • At the time of writing this article, LXPanel version is 0.7.1 and themes are not searched in the filesystem hierarchy. They are found and used if and only if they are in your ~/.config/lxpanel/<in-use-profile-name>. A feature request is open for this subject.
  • Some settings performed from the panel plug-ins configurations dialogues will override themes settings (dclock font color, for example).

Styling all the elements

If you want to style all of the elements (panel, menus, dialogues, etc.), then the easiest way is to search a theme and copy the content of the gtk-2.0 directory in the profile folder. When all is in its place, edit the gtkrc file to make the changes you want to.

This may or may not be a good idea because menus and dialogues will differ from the system selected theme and the result could not be the expected. It also takes more time than the needed to style only the panel.

See also