Different Category Icon

Different Category Icon was created by kevinm

Posted 4 years 1 month ago #16034
I was wondering if there is a way to assign a different icon for the categories? I have some custom png and jpeg images I have created and want to use them instead but not having any success assigning them to the categories.
Post by kevinm

Please Log in or Create an account to join the conversation.

Replied by ntstore on topic Different Category Icon

Posted 4 years 1 month ago #16035
Hi,

If you want to add custom image for categories, you need add custom style. So we can help you add custom style for categories, please send your images to us via email.

Best regards,

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Post by ntstore

Please Log in or Create an account to join the conversation.

Replied by kevinm on topic Different Category Icon

Posted 4 years 1 month ago #16036
Thanks but thats a lot of images, I have nearly 30 categories and thats climbing fast. Would be better if you could tell me what and where I need to add this? I am also using the style " cols-2", can you stack Category CSS Class Suffix's or how do I need to apply this?
Last Edit:4 years 1 month ago Post by kevinm
Last edit: 4 years 1 month ago by kevinm.

Please Log in or Create an account to join the conversation.

Replied by ntstore on topic Different Category Icon

Posted 4 years 1 month ago #16037
Hi,

You can send us two or three images and we'll make samples for you then you can make with other categories.

Best regards,

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Post by ntstore

Please Log in or Create an account to join the conversation.

Replied by kevinm on topic Different Category Icon

Posted 4 years 1 month ago #16038
Thanks, here are three of them.
Post by kevinm

Attachments:

Please Log in or Create an account to join the conversation.

Replied by ntstore on topic Different Category Icon

Posted 4 years 1 month ago #16039
Hi,
Thank you very much about your information. Please follow below steps to add custom icon for a category.

- Step 1: Copy all your image icons to the "[root]/media/kunena/images/icons" path and rename icons with named (cat-1.png, cat-2.png, cat-3.png,...).
- Step 2: Create custom style file with named nts_ktrend_custom.css and copy to the css folder of current joomla template.
- Step 3: Copy below CSS rules to the custom style file.
Code:
#kunena.layout [class^="cat-"] .kcol-category-icon > a i, #kunena.layout [class*="cat-"] .kcol-category-icon > a i { display: none; } #kunena.layout [class^="cat-"] .kcol-category-icon > a, #kunena.layout [class*="cat-"] .kcol-category-icon > a { background-repeat: no-repeat; background-position: center center; background-size: cover; display: block; height: 32px; width: 32px; } #kunena.layout .cat-1 .kcol-category-icon > a { background-image: url(../../../media/kunena/images/icons/cat-1.png); } #kunena.layout .cat-2 .kcol-category-icon > a { background-image: url(../../../media/kunena/images/icons/cat-2.png); } #kunena.layout .cat-3 .kcol-category-icon > a { background-image: url(../../../media/kunena/images/icons/cat-3.png); }
- Step 4: Open the forum category want to add custom icon and enter the icon class (example: cat-1 for icon 1, cat-2 for icon 2) to the Category CSS Class Suffix field.
- Step 5: After add class for category, save and reload your forum.
- Step 6: Duplicate the style if you want to add more custom icons.
Code:
#kunena.layout .cat-[n] .kcol-category-icon > a { background-image: url(../../../media/kunena/images/icons/cat-[n].png); }

Please let me know if it does not work on your site.

Best regards,

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Post by ntstore

Please Log in or Create an account to join the conversation.

Replied by kevinm on topic Different Category Icon

Posted 4 years 1 month ago #16040
Thanks, thats what I needed. There is a weird issue with this though you might want to look into. I put in category CSS Class Suffix like in your example but it wont show if I just do that. I have to add an empty space in the field for Category Icon. No clue why that is necessary or what it does but if you dont add that empty space the icon will not show up no matter how you tweak the CSS.

NOTES: Anyone reading this and are using a Gantry template, you need to include the above mentioned class code in the custom.scss file. Creating the css file as suggested will not work in this framework.

On a side note, it sure would be awesome if there was a simple parameter in the category to add a custom icon to folders. I guess this is probably something the Kunena devs would have to put it and dealing with them I know that will never happen but maybe you could convince them how much better this forum would be if that was a feature...;)
Last Edit:4 years 1 month ago Post by kevinm
Last edit: 4 years 1 month ago by kevinm.

Please Log in or Create an account to join the conversation.

Replied by ntstore on topic Different Category Icon

Posted 4 years 1 month ago #16041
Thank you kevinm,

We will be fix the add a space before class issue in the next version of the NTS KTrend template. I agree with you about the Add custom image for category feature is a great feature if it were included in the core.

Currently we are using the extend class to make it possible for users to custom icons or image for a particular category. We hope the Kunena team will add this feature in to the next version of the Kunena.

Best regards,

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Post by ntstore

Please Log in or Create an account to join the conversation.

Replied by kevinm on topic Different Category Icon

Posted 4 years 1 month ago #16042
Just to make sure you know what I am saying about the space. I am not referring to the space you need to add before the class in the "category CSS Class Suffix" field, example (cat-1.png). I am talking about needing to add JUST a space (nothing else needed) for the "Category Icon" parameter (just above the class suffix field.
Post by kevinm

Please Log in or Create an account to join the conversation.

Time to create page: 0.523 seconds