Custom Icon Bar

From All n One's bxp software Wixi

Jump to: navigation, search

1 Overview

In terms of customising the bxp interface we are often asked how can a client put in their own custom icons.

We of course facilitate all reasonable requests but also need to make clear that the iconography is very closely integrated with the training and wixi articles which could make it more difficult to find help from the wixi.

That said, lets have a look at what options are available.

2 Basic Setup

Each module has its own unique Id number. Usually a 2 digit or 3 digit with leading 0s code. A full list is available in our reference data


So for example System Access Management is 016

Each module icon comes in a variety of sizes for use in different places.

URL Bar Image ng IconBar 016.png ng IconBar module_16_bar_30x30.png ng IconBar module_16_bar_37x37.png pg Win8 Style Icon Bar module_16_win8_50x100.jpg ng IconGrid module_16_panel_150x150.png ng IconGrid module_16_panel_160x160.png

So you can download the icons from their respective places to give you something to start with. We try to include the icon dimensions in the filename for ease of use and to remind us.

All the variations are for the different interface bars Interface_Bars#System_Access_Management_based

3 The redirects

Each icon has a default folder. The engine finds the "index.asp" of each folder and that's the module menu. From there each function has it's own page.

So using the reference for module 016, security is the folder... so /security/index.asp will be the menu of the System Access Management module.

4 Your Icon Set

So the option then becomes about what you want to do with your icons. Reuse the existing ones with a twist or replace them altogether.

4.1 System HTML Bar

You can develop a static menu icon set for all users. It will not show or hide access but makes the menu consistent.

Upload your icon images though the Custom engine to get them onto the bxp servers.

Add your custom HTML to Main Menu > System Access Management > System Management > System Settings > System Headers and Footers. Drop your code into the Page Header or Page Footer.

Note : This content also appears on the login page.


  • Quick setup system wide for all users


  • Not dynamic with security permissions
  • Appears every where
  • Be careful your bar doesn't obscure existing useful links / content

4.1.1 Sample code for Header

<div style="top:0;left:0;position:fixed;_position:absolute;height:35px;width:100%;background-color:#ff0000;text-align:center;" >
	Put your header here
	<a href="../security/index.asp" title="Security"><img src="" border=0></a>

4.1.2 Sample code for Footer

<div style="bottom:0;left:0;position:fixed;_position:absolute;height:35px;width:100%;background-color:#ff0000;text-align:center;" >
	Put your footer here
	<a href="../security/index.asp" title="Security"><img src="" border=0></a>

4.2 eCourse Asset Bar

The next option is to use the eCourse Asset option. In this case you build your menu bar as an asset in an eCourse. It is important to note the Asset Id number of the bar when it is created.

  1. Create an eCourse, with one book, one chapter, one page.
  2. Go to the page and "Add Text to this Page"
  3. Click the <> icon and paste in your HTML
  4. Click Add asset
  5. In tiny writing on the page you'll get a bar of information like
Code : [233-530-2972-2945] Revision : [1] Author : [Philip Lacey] Created : [2016-07-04 19:54:40] Last Editor : [Philip Lacey] Last Edit : [2016-07-04 19:54:40] Name : [Menu Bar Demo]

You want the fourth block of data... i.e. the 2945

Armed with your asset Id you can now make it a system level asset or a user level asset.

  • System Level: Main Menu > System Access Management > System Settings > User Interface
  • User Level: Main Menu > System Access Management > User Administration > Edit User - Security Details > Choose your user > Interface Options >

Now into the set of interface bars you can add 23-2945 The 23 part is to display an eCourse asset and the 2945 was the asset you created.

In this way you can get very specific with your setup. i.e. grouping users to see what bars.

You can also use the interface bars to turn off the system module icons i.e. remove Interface Bar 13 and the system module bar will disappear.


  • Detail level of control


  • Not dynamic with security permissions
  • Custom configuration by user makes large user base management more difficult

4.3 Control Bar - Icon Bar

The Control Bar on the main menu can be also tailored. Using interface bar 14 you can set very custom buttons up with colour and custom graphics.

4.4 Control Bar - Big Buttons

Big Buttons, Interface bar 38, also allow you really easy background image configuration for simple iconography.

4.5 JavaScript

Using the same Page Header / Footer approach you can use JavaScript to change the icons in bar 13.

iconbar_ are the icons in the bar. On the top of each page, to indicate the module you're in, there is a bread crumb. To change the bread crumb icon as well you need to add the iconmodule_ equivalent as well.

The first check in the JavaScript also allows you to ensure the item is actually on the page before you do the change. This handles most of the JavaScript errors that might occur from applying this code.

if ( document.getElementById("iconbar_016") ){ document.getElementById("iconbar_016").src = "../custom/newicon.png"; }
if ( document.getElementById("iconmodule_016") ){ document.getElementById("iconmodule_016").src = "../custom/newicon.png"; }


  • Maintains system level security control of icons


  • Adds code to every page
  • JavaScript gives every page a bit more work to do.

5 Summary

There are many ways of adding icon bars and playing with the icons in bxp. It's about finding the most appropriate and convenient solution that works for your system.

Please feel free to give us a shout on +353 1 429 4000 or email to see how we can help you find a solution for you.