Custom Icons

[Atomic]

We are going to be rapidly expanding our Knowledgebase with up to 500 articles and would like to make the layout a little more appealing. Is there a way to add custom icons? For example instead of a folder icons we'd like a WordPress icon. An email icon for Email articles etc.

 

Merry Christmas!

[sentq]

it's doable with some editing in TPL files and maybe ActionHook file

[Atomic]

Uh....ok.....

[sentq]

quick example: create new PHP file in /includes/hooks/ directory, and add the following code in it:

 

<?php
add_hook("ClientAreaPage", 1, function($vars){

   $defaultIcon = "glyphicon glyphicon-folder-close";

   $kbIcons = array(
       1 => "glyphicon glyphicon-dashboard",
       4 => "glyphicon glyphicon-envelope",
       5 => "glyphicon glyphicon-download-alt"
   );

   foreach ($vars['kbcats'] as $index => $kb){
       if (isset($kbIcons[$kb['id']])){
           $vars['kbcats'][$index]['icon'] = $kbIcons[$kb['id']];
       }
       else {
           $vars['kbcats'][$index]['icon'] = $defaultIcon;
       }
   }

   return array("kbcats" => $vars['kbcats']);

});

you will see that at line #4 we define the default icon, this icon will be used with categories with no specific icon defined

 

then there is a list/array of category ids and their icons (Category ID => "Icon Class Name")

 

now we need to apply this changes to our template, open /templates/{Your-Template}/knowledgebase.tpl file, search for:

<span class="glyphicon glyphicon-folder-close"></span> {$kbcat.name}

 

and replace it with:

<span class="{$kbcat.icon}"></span> {$kbcat.name}

 

you may need to apply the same change in knowledgebasecat.tpl too

[sentq]

here is how it looks like

[Atomic]

Thanks. Sorry to be a dunce but I don't seem to have a "glyphicon" folder?

[sentq]

glyphicon is font, included by default in Bootstrap:

http://getbootstrap.com/components/#glyphicons

 

you can use FontAwesome as well:

http://fontawesome.io/icons/

 

it will be "fa fa-dashboard" instead of "glyphicon glyphicon-dashboard"

[Atomic]

Got it. But if I wanted to use something custom would I put the image path in the array? I highly doubt things like cPanel and Wordpress exist in Glyphicos or FontAwesome?

[sentq]

Got it. But if I wanted to use something custom would I put the image path in the array? I highly doubt things like cPanel and Wordpress exist in Glyphicos or FontAwesome?

then you would need to change how this implementation work:

 

<?php
add_hook("ClientAreaPage", 1, function($vars){

   $defaultIcon = "<span class="glyphicon glyphicon-folder-close"></span>";

   $kbIcons = array(
       1 => "<img src='path/to/image.png' alt=''>",
       4 => "<span class="glyphicon glyphicon-envelope"></span>",
       5 => "<span class="glyphicon glyphicon-download-alt"></span>"
   );

   foreach ($vars['kbcats'] as $index => $kb){
       if (isset($kbIcons[$kb['id']])){
           $vars['kbcats'][$index]['icon'] = $kbIcons[$kb['id']];
       }
       else {
           $vars['kbcats'][$index]['icon'] = $defaultIcon;
       }
   }

   return array("kbcats" => $vars['kbcats']);

});

 

and in template files it will be:

{$kbcat.icon} {$kbcat.name}

[Atomic]

Thank you sir. Going to attempt this tomorrow. Really appreciate the time especially on Christmas Day!

[brian!]

I think I answered a similar question a few months earlier...

 

https://forum.whmcs.com/showthread.php?118842-Image-for-each-category-in-Knowledgebase

[Atomic]

Thank you both. I've had to put this on the backburner as we are in the middle of migrating our cloud. There goes my sleep for the next 8 weeks.