Category icons have been a feature of Kunena from the very beginning[1].  These icons serve as a two-state indicator[2] on category indexes to show

(a) for a logged-in user[3] , if any categories displayed on the index have unread posts;
(b) if there are categories on the index that have no new posts.

This article discusses how to customise category icon images for your Kunena forum.

The location of the category icons is shown in the image at the right.

There are two standard[4] images installed by the Blue Eagle template to indicate the above conditions:

1. used to indication condition (a) above.  The location of this file is ../components/com_kunena/template/blue_eagle/images/icons/folder.png[5].
2. used to indicate condition (b) above.  The location of this file is ../components/com_kunena/template/blue_eagle/images/icons/folder_nonew.png.

This concept also applies to sub-category icons, too, which resemble category icons but in miniature. The two standard images used by Kunena to indicate the corresponding conditions for sub-categories are ../components/com_kunena/template/blue_eagle/images/icons/folder_sm.png and ../components/com_kunena/template/blue_eagle/images/icons/folder_nonew_sm.png.

Specific categories may also be distinguished by the use of custom categories icons which are discussed later in this article.

How to change the default category icons

Changing category icons in K 3.0 is simply a matter of replacing any or all of the files referred to below:

• ../components/com_kunena/template/blue_eagle/images/icons/folder.png
• ../components/com_kunena/template/blue_eagle/images/icons/folder_nonew.png
• ../components/com_kunena/template/blue_eagle/images/icons/folder_sm.png
• ../components/com_kunena/template/blue_eagle/images/icons/folder_nonew_sm.png

Note: If you change these standard files for the Blue Eagle template then you will need to replace these files whenever you upgrade Kunena in future; this is because the Kunena upgrade replaces all "standard" files during the component installation procedure.  If you want to preserve your changes so that they are unaffected by the Kunena upgrade procedure, then you will need to create your own Kunena template and place your modified category icons in the appropriate template folder. For further discussion about creating your own template, please see How to create a template for Kunena

How to add custom category icons

As we discussed above, category icons can be customised: you can use different images for each category.  As we noted earlier, these images act as a dual-state indicator[6] that show:

(a) if you are logged-in[3] and there are unread messages in the category; or
(b) if you logged-in[3] and there are no unread messages in the category.

This means that if you want to customise icons for each category, you need three separate images, one for each of the abovementioned states.

To illustrate this point, let us take three example images as follows:

• for case (a); and
• for case (b).

The general approach (if you are using “standard” Kunena , i.e. the Blue Eagle template) is to create two files:  <catID>_on.gif and <catID>_off.gif (where <catID> is the forum category number) corresponding to the two states we’ve talked about.  This same approach can also be extended to sub-categories: likewise create two images <catID>_on_childsmall.gif and <catID>_off_childsmall.gif.  Obviously you should design these images about half the height and width as the images for the parent category.  If you create sub-category icons, make sure you also create category icons for those categories, too.

Tip
If you create sub-category icons (i.e. <catID>_on_childsmall.gif and <catID>_off_childsmall.gif) it is also a good idea to create corresponding “full-size” category icons (i.e. <catID>_on.gif and <catID>_off.gif).

Let’s take a more practical example. To find the <catID> for a category, use the Kunena Category Manager feature; the column labelled ID is what you are looking for.  Suppose you want to use a set of custom category icons for the category whose <catID> is 36. You need to create two images named 36_on.gif and 36_off.gif respectively for each of cases (a) and (b) above.

These custom images need to be uploaded to the folder ../media/kunena/category_images.

Because these are non-standard files, they will not be removed or replaced when you upgrade Kunena.

Category Images: PNG or GIF?

There very few things that are justifiably wrong with Kunena but, in the area of category icons, allowing only GIF images for custom category icons is definitely something that has been neglected for too long.  As we are all aware, GIF only allow a maximum of 255 colours which makes them unsuitable for true-colour images.  The one benefit of GIF over JP is that GIF supports transparent images but, because of antialiasing, sometimes these images do not display well on cerain backgrounds.  For many reasons, PNG is a more preferred format to use for icons.

It is beyond the scope of this article[7] to explain how to change the default operation of Kunena.  The Blue Eagle template only allows custom images to be named as discussed in this article and that images must be .GIF.  This has meant that, if you want to use different filenames or file types you can achieve this but only by making your own customised changes to PHP source code.  The main problem with this approach is that every time you upgrade Kunena you will have to re-apply those hacks.

A better solution is to incorporate this capability within the Kunena template.

Notes:

[1]  A similar concept applied in K 1.0/K 1.5 but it is beyond the scope of this article to go into details.  For further information, see the forum topic Options for Customizing Subforums.

[2]  Prior to K 2.0, the icon acted as a tri-state indicator to show, on category indexes:
(a) for a logged-in user, if any categories displayed on the index have unread posts;
(b) for a logged-in user, those categories on the index that have no new posts; or
(c) if the user is not logged in.  This third indicator was removed in K 2.0.

[3]  When users are not logged-in to a site there is no way of knowing if there are new messages posted or not.  Because of this, the same image is used as the “there are no new posts” image when users are not logged-into the site

[4]  There are no specific rules regarding the image sizes of category icons.  People should choose category icons that blend well with the overall theme of the site. The recommended sizes are 32 x 32 px for categories and 16 x 16 px for sub-category icons.

[5]  The folder name refers to the “default” Kunena template used on the target installation

[6]  A third, “logged-out” state existed prior to K 2.0.  This third state used a technique involving files named <catID>_notlogin.gif but this feature was removed in K 2.0

[7]  Some information about this matter is discussed in the forum topic K 1.6.x Category Images - PNG or GIF? and more details are given in forum topic Different Image For Each Category. Further discussion for K 3.0 is contained in the forum topic How to create category and sub-category icons in K 3.0.

About the author:

Michael Russell has worked in the information technology industry since 1971 and, since retiring from the workforce in 2007, is a website hobbyist specialising in Joomla, a former member of the Kunena project for more than 8 years, and contributor on The Joomla Forum™. The opinions expressed in this article are entirely those of the author. View his profile here.