Impatica Knowledgebase

KB-000224: How can I add a logo to my unbranded OnCue presentation?

Adding an External Logo to an OnCue Presentation:

The templates that you get when you purchase Impatica OnCue are unbranded, generic templates that include no logos or customization. If you would like to customize the look of your OnCue presentation and still use these generic templates, you can add your branding (i.e., logos, colors, etc) into the HTML code that surrounds the Java applet that gets created by Impatica OnCue. Essentially, what you would be doing is "wrapping" the Java applet with your own custom logos and colors.

There are many ways you can achieve this "wrapping". The best method would be to edit the table that has already been inserted in the HTML code by Impatica OnCue. The instructions below describe the method for editing table manually.

NOTE: It is always a good idea to try this on a backup copy of your presentation, just in case you make a mistake and have to start over.

STEP ONE: GETTING YOUR LOGO READY
---------------------------------------

- Edit your logo graphic in an image application, like PhotoShop, adjusting the size, etc. Save the logo into the OnCue project folder that contains all of the files that Impatica OnCue created when you impaticized your OnCue project (there will be an .html file, an .ipj file, and video folder, etc.). For this exercise we will call the logo graphic "MyLogo.jpg".

STEP TWO: EXAMINE THE HTML CODE
---------------------------------

- Open the folder where your impaticized presentation files reside and right-click on the .html file. For the purposes of this exercise, we will refer to the presentation as "MyPresentation". So, the file you will right-click on would be "MyPresentation.html".

- From the menu, click "Open With" then "Choose Program". Choose "Notepad" from the resulting list of installed applications. You can uncheck "Always use the selected program to open this kind of file" if it is checked off.

- In Notepad, your HTML code will look something like the following:

===========================================================
<HTML>
<HEAD>
<META content=3D"MSHTML 5.50.4207.2601" name=3DGENERATOR>
<TITLE>MyPresentation</TITLE>
</HEAD>
<BODY BGCOLOR = "#FFFFFF" onunload=window.focus()>
<CENTER>
<TABLE WIDTH="778" BORDER="0">
<TR>
<TD>
<CENTER>
<APPLET CODE = "com.impatica.v333.ImpVideoPpt.class"
ARCHIVE = "ImPlayer333-OnCueVideo.jar" WIDTH = 778 HEIGHT = 525>
<PARAM NAME = "ARCHIVE" VALUE = "ImPlayer333-OnCueVideo.jar">
<PARAM name="FILE" value="MyPresentation">
<PARAM name="UI" value="MyTemplate">
<PARAM NAME = "VOLUME" VALUE = "200">
<PARAM NAME = "DEFSPEED" VALUE = "256">
<PARAM name="SPEED" value="256,128,64,still">
</APPLET>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
===========================================================

- You will notice the following HTML tag: <TABLE WIDTH="778" BORDER="0">. This indicates the beginning of the table. The </TABLE> tag indicates the end of the table. The code that exists between these two tags is the only code that we are concerned with.

- Some basic HTML information:
- <TR>: indicates the beginning of a row in the table (TR standing for "Table Row")
- </TR>: indicates the end of a row

- <TD>: indicates the beginning of a cell in the row (TD standing for "Table Data")
- </TD>: indicates the end of a cell

- So, from the HTML code that OnCue creates, you will notice that there is ONE set of <TR>...</TR> tags and one set of <TD>...</TD> tags. This would indicate that the table has ONE row containing ONE cell.

- What we want to do is insert a row and a cell ABOVE the row that holds the applet code.

STEP THREE: INSERTING THE TABLE ROW, TABLE CELL AND LOGO
--------------------------------------------------------------

- Place your cursor just after the <TABLE WIDTH="778" BORDER="0"> tag and press ENTER.

- Type: <TR>
and hit ENTER.

- Type: <TD><img src="MyLogo.jpg">
and hit ENTER. (Note: You would enter the filename of your logo graphic in place of "MyLogo.jpg")

- Type: </TD>
and hit ENTER.

- Type: </TR>
and hit ENTER.

- After typing the above tags your table should look like this:

===========================================================
<TABLE WIDTH="778" BORDER="0">
<TR>
<TD><img src="MyLogo.jpg">
</TD>
</TR>
<TR>
<TD>
<CENTER>
<APPLET CODE = "com.impatica.v333.ImpVideoPpt.class"
ARCHIVE = "ImPlayer333-OnCueVideo.jar" WIDTH = 778 HEIGHT = 525>
<PARAM NAME = "ARCHIVE" VALUE = "ImPlayer333-OnCueVideo.jar">
<PARAM name="FILE" value="MyPresentation">
<PARAM name="UI" value="MyTemplate">
<PARAM NAME = "VOLUME" VALUE = "200">
<PARAM NAME = "DEFSPEED" VALUE = "256">
<PARAM name="SPEED" value="256,128,64,still">
</APPLET>
</CENTER>
</TD>
</TR>
</TABLE>
===========================================================

- So, essentially, we have only added the following to the HTML code:

<TR>
<TD><img src="MyLogo.jpg">
</TD>
</TR>

STEP FOUR: PREVIEWING & EDITING
-------------------------------------

- Save your file and open it in a web browser, like Internet Explorer or Firefox.

- You should see the logo above the top-left corner of the OnCue Presentation.

- Should you need to make adjustments to the HTML code, go back to the code in Notepad, make your changes, save the file and reload the HTML page in your browser.


Before/After Comparison
-----------------------------

Unbranded, generic template:




Template branded with external logo:



Support
-----------------------------

If you have any questions about the above instructions, please contact Impatica Customer Support by e-mail at support@impatica.com or by phone at 613-736-9982 ext. 238, toll free at 1-800-548-3475 ext. 238.

Would you like to...

Print this page Print this page

Email this page Email this page

Post a comment Post a comment

Subscribe me

Add to favoritesAdd to favorites

User Opinions (1 vote)

0% thumbs up 100% thumbs down

How would you rate this answer?

Helpful
Not helpful
Thank you for rating this answer.