{kun´ēzē}
archived
3.7777777777778 1 1 1 1 1 Rating 76%
27May2015

Custom category icons for Kunena

Information
2075 hits Updated: 02 November 2016

How to change the default category icons

How to add custom category icons

Category images: PNG or GIF?

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.

k30 categoryIconsThe 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. folderused to indication condition (a) above.  The location of this file is ../components/com_kunena/template/blue_eagle/images/icons/folder.png[5].
  2. folder nonewused 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:

is a Joomla professional and former member of the Kunena project for more than 8 years—a substantial contributor to the original Kunena documentation project with over twenty thousand messages posted at the Kunena forum. The opinions expressed in this article are entirely those of the author. View his profile here.


Comments
# Jan Andre Midtskogen 22-Dec-2018 03:08
Nice article, but im missing the part about how to configure it in Kunena. There are a lot of guides, but it seems like all are outdated. It would be great to see your article updated with some screenshots of the Kunena config. Where to set the names, etc. Thank, you and have a nice day! :)
# sozzled 22-Dec-2018 06:40
Thank you very much for your comments about this article. I wrote the article some years ago around the time of K 3.0 and you are right; the techniques described here are outdated. The settings relating to category images in Kunena Configuration » Frontend » Look and Feel » Category Legacy Image Path is no longer applicable; custom category icons are now changed by using CSS. So you are right that the technique described here doesn't work with the latest version of Kunena [K 5.1.7] or with the HMVC templates (e.g. Crypsis).

You are also right to infer that the documentation written by the Kunena developers is weak in this area.

I would be happy to explain the process with you via the forum here [on this website] but I don'tt have any strong motivation to update this article. Sorry.

Comments are now closed for this entry

Trending now