Custom Icon Bar - Revision history

Philip Lacey at 20:55, 4 July 2016

2016-07-04T20:55:30Z

Philip Lacey at 18:32, 4 July 2016

2016-07-04T18:32:55Z

Philip Lacey at 18:28, 4 July 2016

2016-07-04T18:28:18Z

Philip Lacey at 18:27, 4 July 2016

2016-07-04T18:27:02Z

Philip Lacey at 18:25, 4 July 2016

2016-07-04T18:25:07Z

Philip Lacey at 18:14, 4 July 2016

2016-07-04T18:14:11Z

Philip Lacey at 18:12, 4 July 2016

2016-07-04T18:12:01Z

Philip Lacey: Created page with "= 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 b..."

2016-07-04T18:11:42Z

Created page with "= 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 b..."

New page

= 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.

= 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

[[Module_-_folder_-_icon_matrix]]

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
|-
| https://ww3.allnone.ie/images/buttons/016.png | IconBar | [https://ww3.allnone.ie/images/buttons/016.png]
|-
| https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png | IconBar | [https://ww3.allnone.ie/images/buttons/016.png]
|-
| https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png | IconBar | [https://ww3.allnone.ie/images/buttons/016.png]
|-
| https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png | IconBar | [https://ww3.allnone.ie/images/buttons/016.png]
|-
| https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png | IconBar | [https://ww3.allnone.ie/images/buttons/016.png]
|-
| https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png | IconBar | [https://ww3.allnone.ie/images/buttons/016.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]]

← Older revision		Revision as of 20:55, 4 July 2016
Line 49:		Line 49:

	All the variations are for the different interface bars [[Interface_Bars#System_Access_Management_based]]		All the variations are for the different interface bars [[Interface_Bars#System_Access_Management_based]]
		+
		+
		+	= 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.
		+
		+
		+
		+	= 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.
		+
		+
		+	== 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
		+
		+
		+
		+	=== Sample code for Header ===
		+
		+
		+	<syntaxhighlight lang="html4strict" >
		+	<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>
		+	</syntaxhighlight>
		+
		+
		+
		+	=== Sample code for Footer ===
		+
		+
		+	<syntaxhighlight lang="html4strict" >
		+	<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>
		+	</syntaxhighlight>
		+
		+
		+	== 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
		+
		+
		+
		+	== 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.
		+
		+
		+
		+	== Control Bar - Big Buttons ==
		+
		+
		+	Big Buttons, Interface bar 38, also allow you really easy background image configuration for simple iconography.
		+
		+
		+
		+	== 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.
		+
		+
		+	<syntaxhighlight lang="html4strict" >
		+	<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>
		+	</syntaxhighlight>
		+
		+
		+	Pros:
		+	* Maintains system level security control of icons
		+
		+	Cons:
		+	* Adds code to every page
		+	* JavaScript gives every page a bit more work to do.
		+
		+
		+
		+	= 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.
		+
		+
		+	[[Category:Topic:bxp Interface]]

@@ Line 26: / Line 26: @@
 Each module icon comes in a variety of sizes for use in different places.
-{|
+{| class="wikitable"
 ! URL
 ! Bar
-! Image
+! style="width:100px; text-align:center;" | Image
 |-
 | [https://ww3.allnone.ie/images/buttons/016.png https://ww3.allnone.ie/images/buttons/016.p ng] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
@@ Line 37: / Line 37: @@
 | [https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.p ng] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.png
 |-
-| [https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.jpg https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.j pg] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.jpg
+| [https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.jpg https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.j pg] || Win8 Style Icon Bar || https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.jpg
 |-
-| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.p ng] || IconBar || https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png
+| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.p ng] || IconGrid || https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png
 |-
-| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.p ng] || IconBar || https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png
+| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.p ng] || IconGrid || https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png
 |}

@@ Line 37: / Line 37: @@
 | [https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.p ng] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.png
 |-
-| [https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.p ng] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png
+| [https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.jpg https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.j pg] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.jpg
 |-
-| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.p ng] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
+| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.p ng] || IconBar || https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png
 |-
 | [https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.p ng] || IconBar || https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png

@@ Line 31: / Line 31: @@
 ! Image
 |-
-| [https://ww3.allnone.ie/images/buttons/016.png https://ww3.allnone.ie/images/buttons/016.png] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
+| [https://ww3.allnone.ie/images/buttons/016.png https://ww3.allnone.ie/images/buttons/016.p ng] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
 |-
-| [https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png
+| [https://ww3.allnone.ie/images/menu_bars/module_16_bar_30x30.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_30x30.p ng] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_30x30.png
 |-
-| [https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png
+| [https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.p ng] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_37x37.png
 |-
-| [https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png
+| [https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.p ng] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png
 |-
-| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
+| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.p ng] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
 |-
-| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png] || IconBar || https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png
+| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.p ng] || IconBar || https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png
 |}

@@ Line 31: / Line 31: @@
 ! Image
 |-
-| https://ww3.allnone.ie/images/buttons/016.png || IconBar || [https://ww3.allnone.ie/images/buttons/016.png]
+| [https://ww3.allnone.ie/images/buttons/016.png https://ww3.allnone.ie/images/buttons/016.png] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
 |-
-| https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png || IconBar || [https://ww3.allnone.ie/images/buttons/016.png]
+| [https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_30x30.png
 |-
-| https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png || IconBar || [https://ww3.allnone.ie/images/buttons/016.png]
+| [https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_bar_3_37x37.png
 |-
-| https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png || IconBar || [https://ww3.allnone.ie/images/buttons/016.png]
+| [https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png] || IconBar || https://ww3.allnone.ie/images/menu_bars/module_16_win8_50x100.png
 |-
-| https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png || IconBar || [https://ww3.allnone.ie/images/buttons/016.png]
+| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_150x150.png] || IconBar || https://ww3.allnone.ie/images/buttons/016.png
 |-
-| https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png || IconBar || [https://ww3.allnone.ie/images/buttons/016.png]
+| [https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png] || IconBar || https://ww3.allnone.ie/images/menu_panels/module_16_panel_160x160.png
 |}