Category Archives: colorize

>CSS: Combining text replacement with mouse hover underlining [updated]

In website-design, the CSS text-replacement technique is well-known (see for example the article on the subject at Stopdesign).

What I have not seen elsewhere, though, is a technique to make sure the text is not only replaced, but also shows an underline when the mouse is hovered over it, for a typical hyperlink-effect.

Consider the situation where you want to show a header in a special font (which visitor probably won’t have). and you want this header to be clickable. You want the header text to become underlined when hovered over with the mouse, to clearly indicate this is a hyperlink.

The solution is very simple:

  1. make sure your replacement images are placed on a background that has a plain color;
  2. paint the background in your images with the same background color;
  3. in the image, make all pixels transparent that should show up as the underline;
  4. in the CSS, set the background of the images to match the background color;
  5. in the CSS, add a :hover rule that changes the background color for the images to match the text color (instead of the background color).

For a working example, check out this site:

Update (July 23, 2007): Note that in order for this hack to work with PNG images under MSIE 6, you will need to save the backgroud color in the image and use an indexed PNG.


>Log colorizing

>Do you ever look at log files? A lot? Then, like me, your brains could use a little help to easen the interpretation of all the letters and digits that are scrolling by. This is where a log colorizer helps.

I was looking for a log colorizer tool, but found it hard to find one using Google, until I found this article: Log colorizing on a Dreamhost account. Although it’s written for Dreamhost (a US service provider), the article seemed sufficiently generic for use on other *NIX systems (like my Apple).

Note: the PCRE version mentioned in the article is outdated. Just go the the tools’ website to check out which version is now the current stable release.

Summarized: All you need is 2 akwardly named tools:

  • PCRE – ‘Perl Compatible Regular Expressions’
  • CCZE – a C port of RASZi’s colorize.

I thought I might be lucky and tried DarwinPorts to see if that would support CCZE, but it doesn’t:

~$ sudo port install ccze
Error: Port ccze not found

For me, PCRE installed like a breeze. But CCZE failed to build:

make -C src all
cc -c -I. -I. -I.. -DPATCHLEVEL=\"1\" -DSYSCONFDIR=\"/Users/ernst/usr//etc\" -D_GNU_SOURCE=1 -DPKGLIBDIR=\"/Users/ernst/usr//lib/ccze\" -DHAVE_SYSTEM_H=1 -DBUILTIN=1 -Wshadow -Wpointer-arith -Waggregate-return -Wstrict-prototypes -Wmissing-prototypes -Wcast-qual -Wbad-function-cast -Wsign-compare -Wchar-subscripts -Wcomment -Wformat -Wformat-nonliteral -Wformat-security -Wimplicit -Wmain -Wmissing-braces -Wparentheses -Wreturn-type -Wswitch -Wmulticharacter -Wmissing-noreturn -Wmissing-declarations -g -O2 -I/Users/ernst/usr//include ccze.c
cc1: error: unrecognized command line option "-Wmulticharacter"
make[1]: *** [ccze.o] Error 1
make: *** [all-recursive] Error 2

Here’s my CC version:

$ cc --version
i686-apple-darwin8-gcc-4.0.1 (GCC) 4.0.1 (Apple Computer, Inc. build 5367)
Copyright (C) 2005 Free Software Foundation, Inc.
This is free software; see the source for copying conditions. There is NO

When I resolved the issue by removing the flag from src/Makefile, I got another error:

i686-apple-darwin8-gcc-4.0.1: unrecognized option '-shared'
/usr/bin/ld: Undefined symbols:
collect2: ld returned 1 exit status
make[1]: *** [] Error 1
make: *** [all-recursive] Error 2

At that point, I gave up on CCZE.

1 Comment

Posted by on 20 March 2007 in ccze, colorize, darwinports, log, log colorizer, logs, pcre