Project

General

Profile

How to add package icon in admin panel

There are two ways of displaying icon for Package in Admin Panel main navigation:
  1. Display as icon using Subrion font.
  2. Display as image using your own image.

Here is the instruction how to achieve this:

1. Display as icon using Subrion font.

We use own Subrion font: http://codex.intelliants.com/subrion-font/ for displaying icons.
By default our system retrieves your package name and try to find icon for it in our icon pack using class i-packagename. But there is 98% chance that there is no icon with that class. So in this case we need to add another class:

First of all, choose an icon for your package from the link above. Lets say we chose stats icon (i-stats class and & # x e 0 1 f ; code).
Now open up your install.xml file and to the hooks section add following hook:

<hooks>
  ..your hooks..

  <hook name="smartyAdminAfterHeadSection" type="smarty">
    <![CDATA[
<style type="text/css">
    i.i-packagename {
        font-family: 'Subrion';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }
    i.i-packagename:before {
        content: '\e01f';
    }
</style>
   ]]>
  </hook>
</hooks>

packagename - the name of your package

2. Display as image.

First, prepare your image: It should be square PNG image starting from size of 32x32 pixels. Put your image icon somewhere in your package folder. For example: packages/packagename/templates/admin/img/icon.png

Open up your install.xml file and to the hooks section add following hook:

<hooks>
  ..your hooks..

  <hook name="smartyAdminAfterHeadSection" type="smarty">
    <![CDATA[
<style type="text/css">
    i.i-publishing:before {
        content: ' ';
        background: url({$smarty.const.IA_CLEAR_URL}packages/packagename/templates/admin/img/icon.png);
        background-size: 100% 100%;
        width: 32px;
        height: 32px;
        margin: 0 auto;
        display: block
    }
</style>
   ]]>
  </hook>
</hooks>

Please contact us if you have any questions.