How to Add Custom Icon Besides the Forum Category ?

[Müller Markus]

Note: Admin's Note: This topic is out of date. You can upload custom icons for forum channels from within the AdminCP under Channel Management -> Channel Manager.

Hey!!

I have just one Question how can i add Custom Icons Besides the forum Category in the Forum Home like

---- [ICON] Vbulletin 5.1.x Templates
--------- Post 1
------------Post 2
and and

Hopefully you understand

Sorry for my Terrible English

[Wayne Luke]

What version of vBulletin are you using?

[Müller Markus]

What version of vBulletin are you using?

Im using 5.1.6 Patch Level 1 Latest

[glennrocksvb]

This?

http://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-tutorials/4028327-vb5-temp-fix-for-custom-forum-icons-any-size

[Müller Markus]

This?

http://www.vbulletin.com/forum/forum...icons-any-size

Noo I mean Per Category A Custom Icon
You know what i mean ?? Or...
E.xample

---- [VB ICON] Vbulletin Styles And more
----------- Post
----------------Post 3
--------[ANDROID ICON] ANDROID DEVELOPMENT
----------------- Android General
-------------------------Android Updates

And ajnd

[Wayne Luke]

You would have to either use javascript or edit the template. Probably to easier to edit the template at this time.

In the template display_Forums_list look for this code:

        <tr class="category-header">
            <td colspan="4"><a class="category" data-nodeid="{vb:raw channel.nodeid}" href="{vb:url {vb:raw channel.routeid}}">{vb:raw channel.title}</a></td>
        </tr>

You could change it to something like:

        <tr class="category-header">
            <td colspan="4"><img src="images/forumicons/category{vb:raw channel.nodeid}.png"><a class="category" data-nodeid="{vb:raw channel.nodeid}" href="{vb:url {vb:raw channel.routeid}}">{vb:raw channel.title}</a></td>
        </tr>

Then inside your images folder create a directory called "forumicons". Then you'll add a series of PNG images named categoryXX.png. The XX would be the category ID. You can see this listed in the AdminCP under Channel Management -> Channel Manager.

If you want the Javascript route, you would want to look for the data-nodeid and then update the innerhtml for the TD element using jQuery.

[glennrocksvb]

You don't have to edit the display_Forums_list template nor use Javascript to add icon in Categories. You just need to add this custom CSS in css_additonal template or in Sitebuilder > Style > CSS Editor:

.category[data-nodeid="XXXX"] {
    background: transparent url("/path/to/the/icon.png") no-repeat;
    padding-left: 30px; /* width of icon + desired distance between icon and category name */
}

Replace XXXX with the node id of the category. Repeat for every category.

If you want to have the same icon for all categories, use this instead:

.category {
   /*  same as above */
}

[Müller Markus]

You don't have to edit the display_Forums_list template nor use Javascript to add icon in Categories. You just need to add this custom CSS in css_additonal template or in Sitebuilder > Style > CSS Editor:

.category[data-nodeid="XXXX"] {
background: transparent url("/path/to/the/icon.png") no-repeat;
padding-left: 30px; /* width of icon + desired distance between icon and category name */
}

Replace XXXX with the node id of the category. Repeat for every category.

If you want to have the same icon for all categories, use this instead:

.category {
/* same as above */
}

Thanks Bro!!!!! Helped Me Really And Vbulletin Looks More Cooler With this

[tradingvip]

You would have to either use javascript or edit the template. Probably to easier to edit the template at this time.

In the template display_Forums_list look for this code:

<tr class="category-header">
<td colspan="4"><a class="category" data-nodeid="{vb:raw channel.nodeid}" href="{vb:url {vb:raw channel.routeid}}">{vb:raw channel.title}</a></td>
</tr>

You could change it to something like:

<tr class="category-header">
<td colspan="4"><img src="images/forumicons/category{vb:raw channel.nodeid}.png"><a class="category" data-nodeid="{vb:raw channel.nodeid}" href="{vb:url {vb:raw channel.routeid}}">{vb:raw channel.title}</a></td>
</tr>

Then inside your images folder create a directory called "forumicons". Then you'll add a series of PNG images named categoryXX.png. The XX would be the category ID. You can see this listed in the AdminCP under Channel Management -> Channel Manager.

If you want the Javascript route, you would want to look for the data-nodeid and then update the innerhtml for the TD element using jQuery.

Hi Wayne, does this works for vbcloud? I tried adding it in the CSS under sitebuilder and it didn't work

[Wayne Luke]

Did you change the forum path, "images/forumicons/category{vb:raw channel.nodeid}.png", to reflect the images you uploaded with the vBCloud File Manager? Your path will be much different.