How to Add Tab Icons December 3, 2018

View all articles from Gyroscope Development Blog

Type-specific icons can be added to Gyroscope, starting v15.3. Although tab titles could contain images in the previous versions, the new tabs make use of the sprite sheet.

Previously, tabs with the same title but different context are hard to differentiate. Case in point, the "Activity Log" tabs. With tab icons, we can see that one is to configure the report settings, and the other is to view the report. Out of the box, settings, reports and users have tab icons enabled.

But why stop there when you can easily add your own, application-specific icons?

Imagine we need to add a car icon to the tabs. Follow the steps:

1. modify imgs/font.php to harvest the new icons

$icons=array(

    ...

    array('name'=>'car','adjust'=>-6),

    ...

);

This will generate a series of icons in the browser:

2. add icon to sprite sheet, both SD and HD copies

Hiding guide layer and enabling transparency:

3. declare class in toolbar.css

.ico-car{

    background:transparent url(imgs/toolbar.gif) no-repeat -512px 0;

    width:16px;height:16px;

    vertical-align:middle;

    margin-right:8px;

}
.dulltab .ico-report{

    background:transparent url(imgs/toolbar.gif) no-repeat -512px -16px;

}

4. declare class in toolbar_hd.css

...

.ico-car, .dulltab .ico-car,

...

{background-image:...}

5. use class in addtab calls

in cars.js, showcar function, change from:

addtab('car_'+carid, carname,

to

addtab('car_'+carid,

'<img src="imgs/t.gif" class="ico-car">'+carname,

6. change the newtitle header

in showcar.inc.php,

change from:

header('newtitle:'.tabtitle(htmlspecialchars(carname));

to

header('newtitle:'.tabtitle(

'<img src="imgs/t.gif" class="ico-car">'.htmlspecialchars(carname)

));

Additionally, although not necessary, you may add the icon to the new record tabs. This requires changing the inline "addtab" call in the listing view. The syntax is a bit different:

onclick="addtab('...',

'<img src=&quot;imgs/t.gif&quot; class=&quot;ico-car&quot;>...

Although this seems like many steps, in fact, there are only three stages - asset preparation, style declaration, and using the icons. Each stage takes only two steps. The end result is will worth the effort, especially in an application that has a rich collection of record types.

Our Services

Targeted Crawlers

Crawlers for content extraction, restoration and competitive intelligence gathering.

Learn More

Gyroscope™ ERP Solutions

Fully integrated enterprise solutions for rapid and steady growth.

Learn More

E-Commerce

Self-updating websites with product catalog and payment processing.

Learn More