Custom Icon Bar
From All n One's bxp software Wixi
Contents
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.
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.
Pros:
- Quick setup system wide for all users
Cons:
- 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="https://ww3.allnone.ie/images/buttons/016.png" border=0></a>
</div>
<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="https://ww3.allnone.ie/images/buttons/016.png" border=0></a>
</div>
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.
- Create an eCourse, with one book, one chapter, one page.
- Go to the page and "Add Text to this Page"
- Click the <> icon and paste in your HTML
- Click Add asset
- 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.
Pros:
- Detail level of control
Cons:
- 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.
<script>
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"; }
</script>
Pros:
- Maintains system level security control of icons
Cons:
- 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 support@bxpsoftware.com to see how we can help you find a solution for you.
