How to take 15 years off NEdit's looks

Joachim Lous

contents

• introduction
• X resources
• shading
• colors
• after

before

after

introduction

While NEdit has an extremely tidy and well-designed user interface, its standard Motif trimmings can sometimes be a bit unfair to it and make it look dull and old-fashioned on a modern desktop, beside all those new and shiny applications and window managers.

The good news is that there is quite a bit we can do with Nedit to provide the aesthetically minded geek with a more relaxed day in front of his screen. If you are a NEdit evangelist, you might also find that a rejuvenating facelift may dampen reservations with your target users, and lets the true ease and power of NEdit shine through more clearly.

Now don't get me wrong: I generally like things as simple and clear as possible when it comes to interfaces. I have no intention of adding themes or skins and turn NEdit into a christmas tree with an integrated mp3 player. However, there are a number of ways to polish up its looks to reflect what a thoroughly modern editor it really is, without sacrificing any desirable qualities. Some of the changes even markedly improve clarity, in my very personal opinion, of course.

This article describes a few easy makeup tricks anyone can use, without having to mess with the code, recompile, or ask any sysadmins for favors. You do risk learning a little bit about Motif X-resources though, so even if the actual settings in the examples below may not be to your taste, I think many will find something of interest.

Disclaimer: These tricks have only been tried on my local Motif 2.x. Other versions, in particular LessTif, may not behave exactly as advertised. But it's still worth a try. Feedback on such issues is most welcome.

X resources

Motif does not support much in the way of themes and other fancy bells and whistles, but it is still much more user-customizable than most users are aware of. All such customising is controlled through the mechanism of X resources, so a little technical background is unavoidable at this point. If you already know all about twiddling resources, skip on to the next chapter.

A full guide to resources is beyond the scope here, but in short they are name/value pairs managed by the X server, and provide settings and data to various X components, including Motif widgets, which are the the building blocks that make up NEdit's GUI (buttons, menus, sliders etc.).

Resources are used to control all sorts of behaviour and properties, but here we will concentrate on the visual aspects. Resources can be defined in many places: There are builtin default resources in X and Motif themselves, NEdit has builtin defaults tailored to its needs, there can be text files that override resources at the system level, and finally, of interest to us: most resources can be overridden by user-supplied resource files. Some of NEdit's most useful resources are described in the "X resources" section of the builtin help, which is well worth a read, but most of the ones we will use here are not listed there; they are resources that are not unique to nedit, and thus described in the Motif documentation.

A convenient way for beginners to set X resources is to use a general resource file in the home directory. Your personal resource file is usually called either '.Xresources' or '.Xdefaults'. If it is not there, create it (ask your admin or local guru for the correct name, or just try both in turn and see which one works). This file is read when X is started, but you can force changes to take effect at any time using the "xrdb" command.

To get started with customising, open the resource file in NEdit. Leave anything already there alone unless you know what you're doing. It is a good idea to mark your changes by adding a comment like "! My NEdit settings" (comments in resource files begin with '!') at the bottom of the file, and add all your new settings below that. For each change you want to test, remember to:

• Save your changes to the resource file
• Run "xrdb -merge <filename>"
• Start a new NEdit instance to see the new settings in action. Changes will only affect new processes, not running programs, so use "nedit", not "nc", for your preview.

To avoid silly mistakes, a couple of things are worth noting about the format of X resources:

• Resource names are case sensitive. Capitalised words refer to a class of components, while non-capitalised ones refer to named component instances.
• The difference between '.' and '*' is significant. The latter is a wildcard that will match dotted substrings with any number of components, down to and including a single dot.
• Whitespace between the resource name and its value is ignored, but whitespace after the value is not, and should be avoided altogether.

shading

The single most dramatic modernising effect at our disposal is to adjust the 3D shading effects. The standard 2-pixel-wide shading in Motif tends to look rather clunky in our day and age; I find that making them narrower and thus 'flatter' makes everything look much sleeker. It also makes the image less noisy and distracting, letting you focus more easily on the content. NEdit already does this to good effect for the menu bar, but we'll take it a step further.

Notes: If you use a newer CDE installation, the settings described here will already be standard and you can skip to the next chapter, but for most of us it requires some changes.
Also, these settings may not work, or may render slightly buggy, on some older Motif versions.

general

For narrow shading as a general default, add to your resource file:

    nedit*enableThinThickness:     True

Here, and in the rest of the settings, you can drop the 'nedit' part if you want it to affect all motif apps (or at least ones that don't override it with their own setting), but for the rest of the examples I will continue to restrict effects to NEdit only.

toggle and radio buttons

The above should make almost all shading 1 pixel wide except, for some reason (or possibly none) for radio buttons. Fortunately, there is a way to fix them too:

    nedit*enableToggleVisual:      True

This has the side effect of making radio and toggle buttons use a small image similar to Window's ones for indicating the status, in stead of just reversing the shading. Personally I find that an improvement, but if you disagree, I'm afraid you'll have to choose between that and keeping "thick" radio button shadows.

Assuming you go with the graphic, the colors used inside is by default still based on the general shading colors and not very clearly visible with the new rendering. To let them use a separate color for the graphics and stand out properly, add:

    nedit*enableToggleColor:       True

Of course, we are never really happy with anything, and the new style of the buttons and the dark markings may make some of them look very big and dominating compared to before, and to the general style of things. We will compensate by adjusting the size down. I find this value to provide a good balance, but the ideal size is of course matter of taste and maybe even system differences:

    nedit*XmToggleButton.indicatorSize: 11

menus

One place where the narrow shading has a negative effect is on menus. The thin border is a little too weak for making the selection in a menu stand out properly from the menu itself. Apparently the Motif people thought so too, so there is a separate setting for using a different and more pronounced rendering style for menu selections:

    nedit*enableEtchedInMenu:      True

This not only renders the selected menu item sunken instead of raised, but also colors it darker than the rest, so it stands out well without clashing with other shading.

Finally, for the perfectionist, the thin shading reduces the dotted tear-off indicators to single-pixel height, and they lose their 3D effect. This is easily rectified by setting the shading back to 2 for this particular type of component:

    nedit*XmMenuShell*XmTearOffButton*ShadowThickness:   2

colors

Now that we've smoothed out the wrinkles a bit, let's have a look at some actual make-up to put on top.

I will make some suggestions about colors in the following examples, but if you want different ones, it is useful to know that you can use all the color names listed in the file called rgb.txt (usually located in a place like /usr/X11R6/lib/X11/ or /local/X11R6/lib/X11/, but this can vary), or you can specify your own RGB colors by using the hex format #RRGGBB (for example #FF0000 for bright red)

edit area

The color you see most of in NEdit is the background color in the editing pane itself. By default it is intentionally a slight shade of gray in order to lower eye strain. That is of course a valid concern, but if you're generally happy with the white that most other editors and web pages use (and would rather adjust your monitor if necessary), using the same in NEdit too will help it blend in and avoid that slightly sullen look in their company:

    nedit*text.background:          white

The standard gray selection color is also a bit anonymous and boring, some even find it hard to read the selected text. So we'll change that too. The classic black reverse video is not really a candidate: nedit does not change the foreground color of selected text, so black text would become invisible. This is no great loss, though: the extreme contrast of reverse video was always unnecessarily distracting in my opinion. It was understandable when most people had only 1-bit displays, but on a modern color screen a gentler highlight is calmer and provides better better usability.

For a while I tried yellow. The obvious analogy to highlighter pens communicates well, but I found that the specific shades always ended up either too bright and "noisy" for comfort, or so discreet that it was hard to see exactly which letters were inside and outside the selection (this was actually predictable from theory, if I had just bothered to think: white and yellow differ only in the blue channel, which has inferior sensitivity and sharpness in the human eye). In the end I found that the light powder blue you see everywhere these days (especially in everything to do with Java), is popular for a reason: it is calm and easy on the eyes, but still provides a clear contrast to white with well-defined boundaries, and both dark and light text shows up well on it (unless the text is light blue, of course, but what can you do?). This one works well for me:

    nedit*text.selectBackground:   #D0D0FF

The line numbers also tend to be a bit distracting: too similar to the text to effortlessly shut them out when you're just editing and not concerned with line numbers (OK, so I'm easily distracted). Just making them paler is an obvious fix, but by now you know I like blue too, so:

    nedit*text.lineNumForeground:  #A0A0D0

decorations

The other dominant color is on the 3D decorations. There is nothing at all wrong with the standard gray, but it is a bit darker than what has become more or less standard in newer desktops, both on unix and elsewhere. So when used in such an environment, it adds to the 'old' look. This is especially pronounced if you use a white text background. This is easy to fix though. Something like:

    nedit*background:              gray85

For NEdit versions before 5.4, portions of the stats line for some reason override the general color settings, so they need extra attention to avoid ugly results:

    nedit*statsForm.background:    gray85

    nedit*statsLine.background:    gray85

With light base colors, Motif's auto-generated highlight and shadow colors often end up darker than what really fits the general theme. For very light ones the highlight can even end up darker than the main color, ruining the 3D effect. If you don't like the automatic choices, you can override them manually like this:

    nedit*bottomShadowColor:       gray65

    nedit*topShadowColor:          #fefefe

other widgets

This still leaves all the other text fields, text areas and list boxes - in the search line and dialogs - looking depressingly gray. If you've lightened the decoration color as suggested, they could even be mistaken for disabled. I prefer to use white background as a consistent indicator of a "work area", and gray to always mean "disabled", so white it is. These lines will do the trick:

    nedit*XmText.background:       white

    nedit*XmTextField.background:  white

    nedit*XmList.background:       white

after

Well, that just about covers it all. Whew!

If you would like to experiment more and discover other resources to play with, a good tip is to learn how to use the program "editres", and how to compile NEdit from source to be used with it (instructions in the makefiles).

As mentioned earlier, X resources can be used to customise much more than just eye-candy. For example, it is also possible to modify bindings for menu items, keyboard shortcuts, and mouse events in much more powerful ways than the dialogs in NEdit support. That will have to be the subject of a separate tutorial, though.

Happy configuring!

Here is the entire set of resources used in this article:

nedit*enableThinThickness:          True
nedit*enableToggleVisual:           True
nedit*enableToggleColor:            True
nedit*XmToggleButton.indicatorSize: 11
nedit*enableEtchedInMenu:           True
nedit*text.background:              white
nedit*text.selectBackground:        #D0D0FF
nedit*statsForm.background:         gray85
nedit*statsLine.background:         gray85
nedit*bottomShadowColor:            gray65
nedit*topShadowColor:               #fefefe
nedit*XmText.background:            white
nedit*XmTextField.background:       white
nedit*XmList.background:            white