Interface - Building your own asset bar
From All n One's bxp software Wixi
Contents
1 Overview
Customising the bxp interface can be a very useful exercise Customising_the_Interface
The "I Want To" bar is an example of a very useful interface bar for system use. It provides links to very useful features. The_I_Want_To_bar
There are times when you might like to build your own interface bar and provide it system wide. Here's how you can.
2 Building the bar
Firstly this is going to require you to play with some HTML. Here is a template to get you started.
<table cellspacing="20" id="tblMy_Main" cellpadding="20" class="cssMaster_FooterIWantToBar_Table">
<tr>
<td id="tblMy_TD_Reminders" align="center" width="20%" colspan="2" height="30"><strong>Reminders</strong></td>
<td id="tblMy_TD_Change" align="center" width="20%" colspan="2" height="30"><strong>Change</strong></td>
<td id="tblMy_TD_Help" align="center" width="20%" colspan="2" height="30"><strong>Help</strong></td>
<td id="tblMy_TD_Search" align="center" width="40%" colspan="4" height="30"><strong>Your Items</strong></td>
</tr>
<tr>
<td id="tblMy_TD_Reminders_View" align="center" width="10%" height="30"><input class="cssButton_Green" type="button" onclick="location.href='../main/reminders.asp'" value="View" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_Reminders_Add" align="center" width="10%" height="30"><input class="cssButton_Green" type="button" onclick="location.href='../main/userReminder_Add-details.asp'" value="Add" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_Change_MyDetails" align="center" width="10%" height="30"><input class="cssButton_Yellow" type="button" onclick="location.href='../main/userDetails_Change-details.asp'" value="My Details" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_Change_MyPassword" align="center" width="10%" height="30"><input class="cssButton_Yellow" type="button" onclick="location.href='../main/userPassword_Change-details.asp'" value="My Password" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_Help_Wixi" align="center" width="10%" height="30"><input class="cssButton_Blue" type="button" onclick="window.open('http://www.bxpsoftware.com/wixi/','_blank');" value="Wixi" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_Help_Suggestion" align="center" width="10%" height="30"><input class="cssButton_Blue" type="button" onclick="location.href='../main/userSuggestion-details.asp'" value="Suggestion" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_MyButton1" align="center" width="10%" height="30"><input class="cssButton_Red" type="button" onclick="location.href='http://www.google.com'" value="Google" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_MyButton2" align="center" width="10%" height="30"><input class="cssButton_Red" type="button" onclick="location.href='http://www.yahoo.com'" value="Yahoo" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_MyButton3" align="center" width="10%" height="30"><input class="cssButton_Red" type="button" onclick="location.href='http://www.bing.com'" value="Bing" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
<td id="tblMy_TD_MyButton4" align="center" width="10%" height="30"><input class="cssButton_Red" type="button" onclick="location.href='http://www.ask.com/'" value="Ask" style="width:98%;margin-left:auto;margin-right:auto;" /></td>
</tr>
</table>
The easiest way of creating this asset is to create your own book, chapter and page.
"Add text to this page"
Find the source code icon which looks like < >
Add the code above into the source and click OK.
If won't look perfect yet but just bear with it and click "Add Asset" at the bottom of the page.
This creates an asset as follows.
Underneath the asset in tiny writing you'll see a code. In this case Code : [222-467-2541-2435]. You just want the number after the final - so in this case 2435. This is the unique asset id.
So now we're going to add this asset to our main menu.
The default Main Menu set of Interface bars is 17,22,25,2,7,37,4,18,13,19,5,26 as detailed here. Interface_Bars#bxp_software_Release_9
19 is the I Want To bar. So we replace that with the asset bar and our custom asset, so it becomes 23-2435.
Our new Main Menu line is 17,22,25,2,7,37,4,18,13,23-2435,5,26
Always best to test on your own account first. So go to the I Want To bar at the bottom of your screen and click "My Details". In the "Interface Options" section change the Main Menu to 17,22,25,2,7,37,4,18,13,23-2435,5,26
Down the bottom and click "Update my details". Now go back to your main menu. Your new bar should be in place.
3 Customising the example
The example contains some useful items for you to consider.
3.1 Button Name
This is set with the value attribute
- value="Yahoo"
3.2 Button Colours
You can style the bar with your own colours of course but there are handy button colour classes immediately available. They're available in https://ww3.allnone.ie/library/style/style_master_buttons.css for your reference.
- cssMaster_Button, this is the default colour for your interface colour scheme
- cssButton_Green, always lime green
- cssButton_Blue, always blue
- cssButton_Yellow, always dull yellow
- cssButton_Red, always alert red
- cssButton_Orange, always orange
- cssButton_Purple, always purple
- cssButton_Grey, always grey
3.3 How links open
There are two options for links to open. In a new window / tab, or replace the current page.
- onclick="window.open('http://www.bxpsoftware.com/wixi/','_blank');" will open a new page
- onclick="location.href='../main/userPassword_Change-details.asp'" will replace the current page
4 Support
If you want us to customise a bar for you or give you support on your own bars please feel free to get in touch with us at support@allnone.ie
