ECourse - Custom Interface Buttons - Revision history

Philip Lacey at 12:56, 4 May 2015

2015-05-04T12:56:53Z

Philip Lacey at 15:31, 28 January 2015

2015-01-28T15:31:40Z

Philip Lacey at 15:26, 28 January 2015

2015-01-28T15:26:31Z

Philip Lacey at 15:18, 28 January 2015

2015-01-28T15:18:52Z

Philip Lacey at 14:58, 28 January 2015

2015-01-28T14:58:23Z

Philip Lacey at 14:56, 28 January 2015

2015-01-28T14:56:31Z

Philip Lacey: Created page with "= Overview = Sometime our clients want to customise the main menu of Business Express outside what is available in the system There is a way using eCourse to create a custo..."

2015-01-28T14:27:39Z

Created page with "= Overview = Sometime our clients want to customise the main menu of Business Express outside what is available in the system There is a way using eCourse to create a custo..."

New page

= Overview =

Sometime our clients want to customise the main menu of bxp software outside what is available in the system

There is a way using eCourse to create a custom main menu from HTML and JavaScript.

This can then be applied using interface option number 23, to learn more about interface bars see below.

http://www.allnone.ie/wixi/index.php?title=Interface_Bars

= Creating an eCourse Asset =

From the main menu go to the following:

Main Menu > eCourse Management > Asset Management > Asset - Create - Text

You will have to fill in a title and a grouping, call them something you will remember you will need them later.

Also you will have a large box called the body, see below.

[[File:Asset_Creation.png]]

There are three options at the bottom of the box, to build custom main menu select the code option.

This is where you will put your HTML and JavaScript code later.

For now just save the new eCourse asset with a title and grouping.

← Older revision		Revision as of 12:56, 4 May 2015
Line 115:		Line 115:

	[[File:Asset_ScreenAfter.png]]		[[File:Asset_ScreenAfter.png]]
		+
		+
		+	[[Category:Topic:bxp Interface]]
		+	[[Category:Module Specific:eCourse]]

@@ Line 83: / Line 83: @@
-== Adding the HTML to an eCourse Asset ==
+= Adding the HTML to an eCourse Asset =
 Once you are happy with the HTML, go to the eCourse asset you created earlier.
@@ Line 96: / Line 96: @@
-== Adding the Asset to the Main Menu ==
+= Adding the Asset to the Main Menu =

← Older revision		Revision as of 15:26, 28 January 2015
Line 81:		Line 81:

	[[File:Asset_ScreenAfter.png]]		[[File:Asset_ScreenAfter.png]]
		+
		+
		+	== Adding the HTML to an eCourse Asset ==
		+
		+	Once you are happy with the HTML, go to the eCourse asset you created earlier.
		+
		+	Select the code tab then copy and paste the HTML you just create into the body box.
		+
		+	Click update template.
		+
		+	Once the page saves, look at the URL in your browser, there will be an id at the end of the url, take note of this, you will need it.
		+
		+	[[File:Asset_URL.png]]
		+
		+
		+	== Adding the Asset to the Main Menu ==

← Older revision		Revision as of 15:18, 28 January 2015
Line 72:		Line 72:

	[[File:Asset_JS.png]]		[[File:Asset_JS.png]]
		+
		+
		+	== Output ==
		+
		+	After you have built this document save it as a .html file and open it in a web browser.
		+
		+	It will look something like this.
		+
		+	[[File:Asset_ScreenAfter.png]]

@@ Line 9: / Line 9: @@
 http://www.allnone.ie/wixi/index.php?title=Interface_Bars
 = Creating an eCourse Asset =
@@ Line 28: / Line 29: @@
 For now just save the new eCourse asset with a title and grouping.
 = Creating a HTML Template =
 For this example we are using a template created for our Wixi.
@@ Line 38: / Line 41: @@
 It has three sections, CSS, HTML and JavaScript.
 == CSS ==
@@ Line 44: / Line 48: @@
 [[File:Asset_CSS.png]]
 == HTML ==
@@ Line 56: / Line 61: @@
 [[File:Asset_HTML.png]]
 == JavsScript ==
@@ Line 62: / Line 68: @@
 When the mouse goes over an image the JavaScript increases the image size and when the mouse moves off the image it sets the image back to its original size.
 [[File:Asset_JS.png]]

← Older revision		Revision as of 14:56, 28 January 2015
Line 28:		Line 28:

	For now just save the new eCourse asset with a title and grouping.		For now just save the new eCourse asset with a title and grouping.
		+
		+	= Creating a HTML Template =
		+
		+	For this example we are using a template created for our Wixi.
		+
		+	We are going to build a simple table and add images and links to the table.
		+
		+	We will then apply some JavaScript to make the buttons resize when a user hovers over them. This gives a button effect.
		+
		+	It has three sections, CSS, HTML and JavaScript.
		+
		+	== CSS ==
		+
		+	The CSS sets the style and layout of the objects.
		+
		+	[[File:Asset_CSS.png]]
		+
		+	== HTML ==
		+
		+	The HTML draws a div and a table.
		+
		+	All elements have the CSS above applied to them.
		+
		+	Inside each table cell is a link and an image.
		+
		+	Each image has JavaScript applied to the onmouseover and onmouseout attributes.
		+
		+	[[File:Asset_HTML.png]]
		+
		+	== JavsScript ==
		+
		+	The JavaScript is very simple, it is used to resize the image when an action occurs.
		+
		+	When the mouse goes over an image the JavaScript increases the image size and when the mouse moves off the image it sets the image back to its original size.
		+
		+	[[File:Asset_JS.png]]