Internet Explorer 6 PNG Fix for Drupal theme

If you’re into transparent images and don’t want to battle the 256 colors limitations of GIF files, then transparent PNG images are perfect for you. I usually develop on Firefox, where thinks seem to be a lot more stress-free than Internet Explorer, but know that I need to worry about compatibility.

Unfortunately, Internet Explorer 6 doesn’t support transparent PNG images out of the box. Gladly, that’s easy to patch: TwinHelix provides an HTC file that enables transparent PNG images for Internet Explorer 5.5 and higher. For anyone who’s curious: HTC stands for HTML Component and provides a mechanism to implement components in script as Dynamic HTML behaviors.

Here’s the tutorial to install this patch. I’m using Drupal 6.6, my theme is called EasyBreeze.

  1. Download the latest version of the HTC file here:
  2. From this package, copy into your theme directory (in my case sites/all/themes/easybreeze/)
  3. From the same package, copy blank.gif into the images directory of your theme (in my case sites/all/themes/easybreeze/images/)
  4. Open with a text editor and look for this line:
    if (typeof blankImg == ‘undefined’) var blankImg = ‘/sites/all/themes/easybreeze/images/blank.gif’;
  5. For the final step, we need to make sure this script is called whenever a transparent PNG file is loaded. Luckily, this can be done via CSS. To enable the patch, add the following line to your CSS file (style.css):
    img {behavior: url(/sites/all/themes/easybreeze/;}

    Modify this line of code to match your theme location. If your theme uses an IE-specific CSS file (e.g. fix-ie.css) in addition to your usual style.css file, you should modify that file.

That’s all you need to do to enjoy beautiful PNG images using Drupal.

The ultimate mobile powerhouse: With 8 pixel errors and a hair behind the screen

Mac Book Pro

Ahhh … my new Mac Book Pro. 10 days of waiting for it to be shipped from Shangai, and now it’s finally here.

It looked great, until I turned it on and stared at the blue screen that welcomed me. Is that a hair behind a screen, or just a crack? And what about these darker blue and ligher blue dots? After testing this Dead Pixel Testing Tool, I found 8 pixels all over the screens that didn’t quite work right.

Not very excited about the Apple quality yet!

Source code highlighting using FCKeditor and GeSHi for Drupal

For the setup of this site, I knew that I needed a good way to display source code in stories. I assumed that Drupal would already have a good way to deal with source code in a post, but I found out that this required quite a lot of manual configuration. In addition to just displaying source code nicely, I wanted to be able to use source code in FCKeditor.

During my research, I came across a module called GeSHi Filter, which was exactly what I was looking for to display source code. This module integrates the third party PHP library GeSHi (Generic Syntax Highlighter) into Drupal. Installing this module was straightforward, except for the fact that the readme didn’t mention that I needed to activate the filter in Drupal’s input filters.

GeSHi takes care of displaying source code within the tag. Unfortunatley, using this tag in FCKeditor is tricky.

In order to use the tag in FCKeditor, one needs to switch to the source view. In that view, you can enter the source code you’d like to display in the post, and GeSHi will format it nicely once the node is submitted.

There’s 2 caveats:

  1. In order for FCKeditor to not screw up the code after switching back to rich text editing mode, the following line needs to be added to fckeditor.config.js:
    FCKConfig.ProtectedSource.Add( //gi );
  2. According to the FCKeditor documentation, protected code is not being displayed at all in rich text mode. However, that code will be displayed when viewing the node.

Unfortunately, I wasn’t able to find a better way to integrate the two. This integration works for now, but I hope that the a future release of FCKeditor will offer a better method for source code highlighting.