– A developer's blog | Articles on advanced CSS, UI development, Joomla CMS and Magento eCommerce



I’m back!

I haven’t been able to update the site for a while now, since I’ve had a busy couple of months…work’s been hectic, unexpected things kept cropping up and life’s been a chore in general.

Well that changes today as I want to share another article – this time on Magento. It’s been a good number of months since we’ve started working with it, and have done some nifty customizations to our store: Boutique 1 – Magento Fashion Store

One of the more recent tasks I’ve worked on was a script that disables/hides products which have sold out, but with the additional condition that they’ve been on the site for a specified time period or longer, i.e (1 week, 5 days, 2 months, etc). This script would then be setup as a CRON job that runs every week, automatically keeping the catalog pages fresh and up to date and removing outdated products.

I’ll share the code for this and explain it in my next post, which should be very soon.

No tags

I have come across this requirement often during projects, whereby the client requests additional fields for entering content into the Joomla back-end (these vary from secondary content and extra descriptions text to content labels and custom background images ).

Now the main table that Joomla stores/fetches content from is ‘jos_content’. This is a table that holds each content item indexed by the content id (primary key). Now we can easily extend this table by adding in a new column to hold our new field, let’s say description2.

But how do we get this field to work flawlessly with the back-end, so that it shows up when you edit articles, and saves correctly when you create new/copy or update existing articles?

In this article, I will show you precisely how to do this.

Step 1:

Determine the extra field that you want to add. For this example, we are going to add the new field ‘description2′.
Now we need to append the new field as column into our jos_content table.


ALTER TABLE `jos_content` ADD `description2` MEDIUMTEXT NOT NULL ;

Step 2:

We now need to modify some core files in Joomla, to be able to see the new field from the back-end.

Find the file named “Admin.content.html.php” (located under root/administrator/components/com_content) and create the custom text fields as follows:

Go to around line 834.


<table class=”adminform”>



<td colspan=”4″><strong> </strong>

<h2><strong>Custom Field</strong></h2>

<strong> </strong></td>



<td><label for=”description2″>Description 2:</label></td>

<td><input id=”description2″ class=”inputbox” maxlength=”255″ name=”description2″ size=”50″ type=”text” value=”<?php echo $row->description2; ?>” /></td>






Notice how we have kept the name and id attributes of the field the same as the the new database field defined in Step 1.

Step 3:

The next step is to add the variables for the specific new fields into the database class itself, so that the application can save and access the new field data.

Go to: root/libraries/joomla/database/table/content.php

Now look for the class definition “class JTableContent extends JTable”, and add the following to it:


/** @var string */
var $description2 = null;

Now your custom fields will be accessed by the article queries, you can access the fields with $this->description2;

Step 4:

You will also need to add a few lines into the controller.php file (located at administrator/components/com_content/controller.php)



This way when you copy an article, the application will know to copy your custom fields too.

Step 5:

For getting it to show up in the front end, the code is:

escape($this->article->description2); ?>

You can test it out by editing your specific template code:


Another question that people usually ask, how can we get the new field to show in the category blog layout?

For this, go to:


Scroll to about line 361 and add your new fields at the following code:

$query = ‘SELECT cc.title AS category,, a.title, ……..

That’s it, you should be all set.

Credits for much of the information in this article goes to a very useful thread on the Joomla forums, check it out.

No tags

I think most developers have come across this one, amongst the most baffling (and frustrating) of issues that manifests in IE6 browsers, particularly if you use floats very often in your CSS layout:

IE6 peek-a-boo bug

This issue is actually caused by HTML comments themselves, when you sandwich them between nested floated DIV tags. Apparently, the comments are hard for IE to process when they are structured this way, resulting in what many refer to as “screen diarrhea”. HTML comments inside the floats do not cause the bug, nor do comments before or after the float series. Only comments residing between floats cause the bug.

The Solution:

One fix that worked for me was to apply display:inline; to the float that comes before the comments. There are a few other workarounds which also work well; for a detailed dissection of the issue and several suggested solutions, please check out this very useful article at

No tags



IE7.js – A dream solution?

I don’t know if many of you know about this project, hosted at Google code:

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

It’s still under development, and looks to be a very exciting project at the very least. It fixes many of the issues present in IE6, which would otherwise require extensive scripts/browser hacks to address. I’d still advise caution while using it for any production websites; I had a hit-and-miss experience with this thus far.

As a rule of thumb, you should avoid using this for complex sites that are already making use of a javascript framework library, such as jQuery or Scriptaculous.

No tags



CSS Articles updated

I’ve created a new section under CSS Topics, dealing with IE6 browser issues.

Read it and let me know of your thoughts!

No tags



New Magento website launched

I’ve just got off a massive project that launched last week – a fashion e-store developed in Magento eCommerce (Community Edition):

This was the result of a behemoth 8 month development marathon, with a team of three developers led by myself. It features a completely custom design for all website core modules (including checkout process) and many custom developed components.

Check it out, I look forward to your comments!

No tags



Site launch

Welcome to!

This blog is dedicated to web developers looking for articles on CSS and UI development, from basic HTML layouts to advanced topics such as CSS navigation menus, browser compatibility techniques/hacks and even information on new and upcoming technologies such as CSS 3.0 and HTML 5.

I will try to regularly share useful articles on various CSS topics, please feel free to send me requests should you have any specific inquiries.

Enjoy your time here!

No tags

Find it!

Theme Design by

Tag Cloud