Question [Merged topic] How to create category icons

You're giving me general directions. Thanks, but this doesn't work for the icons that I circled in the above attached pics. Using those file names will change the icons of the categories (and sub categories AFTER they are clicked on), but NOT the Sub Categories as PICTURED.

What is the coding for that? I can get the sub categories icon to change when they are viewed as a list of forums (i.e. after clicking on the parent), however, prior to clicking on the parent, all I see are the regular folders.

I don't know if I am being clear. Just look at the picture.

What's difficult, in this topic, is what you mean by "from the 'Outside'".

We have provided general instructions, and these are documented in Category icons , and these are generally sufficient for most users. For everyone else who wants to specialise and use CSS to manipulate those things, then you need to know a lot more. Perhaps, if someone is knowledgeable about such things (and they have a spare few hours) they might like to write a detailed step-by-step guide.

Simply, use an in-browser web developer's tool like Firebug for Firefox and you will solve your problems. Another alternative is to pay an experienced web developer for their time to customise your site down to the minutest level of specificity to your own requirements.

Let's choose one example, one sub-category whose icon you want to change. For example, let's choose your "Française" sub-category. What are the image filenames (that exist on your website) that you want to use for for that sub-category and then let's see what we need to do to make this work for you.

What I really am trying to do is change the subcategory icons while looking in category view.

(1) Cateogry - Other Languages (ID 1)
(2) Sub Categories - Spanish, French, German (ID 2, ID 3, ID 4)

If I follow the instructions for changing category icons and use "2Spanish_read, 12Spanish_unread, 12Spanish_notlogged", you'll only see the category icon change when you click on the parent category (Other Languages) and view the Sub Categories in Category Mode (i.e entering Other Languages, but not yet clicking on Spanish, French, etc).

I want to change the individual folder icons that represent the sub-categories in Category mode so substitute those folders with custom icons for each one.

See the pictures below

BEFORE = How it is now

AFTER = How we want it

blacktino79 wrote: If I follow the instructions for changing category icons and use "2Spanish_read, 12Spanish_unread, 12Spanish_notlogged", you'll only see the category icon change when you click on the parent category (Other Languages) and view the Sub Categories in Category Mode (i.e entering Other Languages, but not yet clicking on Spanish, French, etc).

Yes, but that won't work. It works, if you go to the category givemeapps.com/index.php?option=com_kune...&catid=23&Itemid=804 , just as we discussed in Different Image For Each Category but now we're talking about these things as sub-categories and that's a completely different matter.

Matias wrote in msg #2 in this topic that you need three other images for sub-categories. The documentation - Category icons - says the same thing, too. If you want 32 x 32 px category icons, you need three images for each category. If you want 12 x 12 px sub-category icons you need another three images for each sub-category.

Matias gave you the answer but, as you implied, you weren't interested in the recommended, documented way of doing things. You want to do solve this issue via CSS instead - in a similar way to how we discussed Different Image For Each Category . I'm sorry to disappoint you but you can't use the same technique. You can't use the same technique because there's no unique CSS class that's defined each sub-category image. In other words, you cannot change sub-category icons from "outside" the method we've documented.

I am a little confused with your response. Are you saying that it can't be done via CSS? How do I modify these icons from the outside by uploading three more images named "childsmall" if no CSS code will have any effect?

Or are you saying just create the childsmall images, upload them, and leave the CSS code as is?

This is not a debating society. There is one way to do this job and you are shown what you need to do in Category icons . Matias has given you the answer in msg #2.

Sub-category icons:

1. must be named in a specific way - you can't choose your own naming structure.
2. must be stored in a specific folder - you can't choose where you want to store these files
3. must be type .GIF

... unless you are prepared to modify the Kunena source code and maintain your modified software yourself. Is this now clear to you?

That attitude is unnecessary buddy. I wasn't clear on your answer and wanted clarification, which is why I asked further questions, and I wasn't rude about it either. That's it. Thank you. "This isn't a debating society".... Yeah okay.

"Thank you" for your answer, but my question still wasn't answered (clearly).

I'll ask it again.

To change the Category Icons, I used this code:

If this is my code

#Kunena tr#kcat51 td.kcol-category-icon span.kreadforum {
background: url("/media/kunena/category_images/mChinese_51_read.png") no-repeat scroll left center transparent;
}
#Kunena tr#kcat51 td.kcol-category-icon span.kunreadforum {
background: url("/media/kunena/category_images/mChinese_51_unread.png") no-repeat scroll left center transparent;
}
#Kunena tr#kcat51 td.kcol-category-icon span.knotloginforum {
background: url("/media/kunena/category_images/mChinese_51_notlogged.png") no-repeat scroll left center transparent;
}

Do I just add the same code again, but instead this time add the Childsmall filenames like this?


#Kunena tr#kcat51 td.kcol-category-icon span.kreadforum {
background: url("/media/kunena/category_images/51_on_childsmall.gif") no-repeat scroll left center transparent;
}
#Kunena tr#kcat51 td.kcol-category-icon span.kunreadforum {
background: url("/media/kunena/category_images/51_off_childsmall.gif") no-repeat scroll left center transparent;
}
#Kunena tr#kcat51 td.kcol-category-icon span.knotloginforum {
background: url("/media/kunena/category_images/51_notlogin_childsmal.gif") no-repeat scroll left center transparent;
}

And do I upload those childsmall.gifs to the media/kunena/category_images like the other ones ??

blacktino79 wrote: Do I just add the same code again, but instead this time add the Childsmall filenames like this?

No.

blacktino79 wrote: So sorry Sozzled and thank you for looking! I changed my files after frustration of no one being able to help here which is why you saw the error in the CSS code. At the time there was a Cat whose ID was 77. I got rid of that cat. The ANDROID category you saw yes was Cat 9, and even with the code changed to 9, it doesn't work.

The problem most likely lies with using Joomla Legacy mode. See, I didn't program the site. My developers did. Perhaps I am going to have to inquire about upgrading to Kunena 1.6.5 (let's hope they don't charage me) and ask them why they decided to use legacy mode. In any case, with the code modification, it still isn't working

WAIT/.....

I CHANGED THE FOLDER SPECIFICATION AND IT WORKS!!!!!!!!!!!!!!!!!!!!!!


Thank you SO SO SO SO SO SO MUCH! You don't know how much this has been bugging me over the last week! I can finally customize my forum and not get charged for it! If you need some advertising, send me a banner or something! This will really help with the attractiveness of my forum!

THANKS AGAIN!!!!!!!!!!!!!!!!!!!! OMG!

Hi,

you should be aware that in the way you have done this your changes will be lost when you upgrade current Kunena template you are using (Euro-BRed) and you'll need to apply again all changes.
The same if you switch Kunena to another template.

Points and forward slash's are there on purpose.

If you want that you changes are safe when upgrade you need to do it like I described in message #6 of this topic.

Regards

@quila wrote: Hi,

yes it is possible.
Your can use this code to show image in your "Community Forum":

Code:

#Kunena div.kcategories-1 div.ktitle-desc { background: url("/media/kunena/category_images/community_medium.png") no-repeat scroll center center transparent; height: 50px; }

where "1" is Section ID.

For Games Forum this code should be:

Code:

#Kunena div.kcategories-5 div.ktitle-desc { background: url("/media/kunena/category_images/games_medium.png") no-repeat scroll center center transparent; height: 50px; }

As you can see there change section ID to 5 and name of image.

Hope this helps

Hi quila,

where do I insert those statements in general? I inserted it in /templates/system/css/template.css but it had no effect. Of course I placed a .png in /media/kunena/category_images

My goal is to have images in the category headlines like here ( KLICK ).

Our forum can be found HERE , if you want to take a look

Thanks for your help in advance.

Regards
Fong