Prettying up Tk menubars for use in X11

(Written: October 2006.)

Introduction

Even if you're using a modern themes engine like Tile, chances are you're stuck with using the old menus from Tk. It's not such an issue on Mac OS X or MS Windows, where the Tk menu gets rendered using native widgets. It's on X11 that it looks ugliest.

Before

It's a horror from a by-gone era, isn't it? With tweaks from this page, you'll be able to turn it into something looking like this:

After

Just a few tweaks and you have a menu which fits in well with other modern X11 applications. No massive 3D effect, no menu item bolding. There's also the optical illusion of reduced y-axis padding too.

Click the images above to see the respective menus open with items. Note that terribly unfashionable 3D effect on highlighted menu items in the default X11 menu.

How you do it

First, we deal with the font situation. Being an old web coder, I like to name mine after HTML 1.0 tags. You don't have to.

You'll notice below that we apply our font_p as the standard to all the usual Tk widgets, just to be consistent.

# Set some default fonts for X11
variable family "Helvetica"
variable size {-12}
font configure font_h1    -family $family -size [expr $size - 4] -weight bold ;# Large heading.
font configure font_h2    -family $family -size [expr $size - 2]              ;# Medium heading.
font configure font_h3    -family $family -size [expr $size - 1]              ;# Small heading.
font configure font_p     -family $family -size $size -underline 0            ;# Our standard font.
font configure font_b     -family $family -size $size -weight bold            ;# Standard font with bold.
font configure font_small -family $family -size [expr $size + 1]              ;# Small font.
font configure font_tt    -family $family -size $size                         ;# Terminal font.

# Apply our nicer looking fonts to default Tk widgets, while we're here.
foreach class { Button Checkbutton Entry Label Listbox Menu Menubutton Message Radiobutton Scale MessageBox Text Dialog.msg } { 
	option add *$class.font font_p widgetDefault } 

Now for the menubar itself. You can do with entirely without the options database, just with command options.

# Menubar init.
menu .menubar         -tearoff 0 -relief groove -borderwidth 1 -activebackground #068 -activeforeground white -activeborderwidth 1 -selectcolor black
menu .menubar.file    -tearoff 0 -relief groove -borderwidth 1 -activebackground #068 -activeforeground white -activeborderwidth 1 -selectcolor black
menu .menubar.options -tearoff 0 -relief groove -borderwidth 1 -activebackground #068 -activeforeground white -activeborderwidth 1 -selectcolor black
menu .menubar.help    -tearoff 0 -relief groove -borderwidth 1 -activebackground #068 -activeforeground white -activeborderwidth 1 -selectcolor black

And that's pretty much it. You should now have a much better looking menubar.