Change the logo for a Genie Skin

Introduction:

Changing the logo image for a Genie skin involves only a couple steps:

• Upload an image file into the skin's folder.

• Modify the custom.js or start.html files to reference the new logo.

In our examples we will change the logo for a Genie skin named, "Gradient". In a default Profound installation the Gradient skin's folder in the IFS is here:

To change the logo for any other skin, follow the examples and replace any text, "Gradient", with your skin name.

Example 1 - Modify start.html:

First, upload an image file into the Gradient skin's folder. If you uploaded a PNG file, rename the image file to logo.png. If the file is JPG or GIF, rename it to logo.jpg or logo.gif respectively.

Next, open a file named, start.html, which is located in the skin's folder. Open it with your preferred text editor or use the editor provided by the Genie Administrator that is provided with Profound UI. From the welcome screen, click "Start Genie Administrator":

Open

Then find your skin, click on the "+" to expand it, and click "Edit start.html":

Open

You'll now see the file's contents to the right.

For the Gradient skin (or a skin copied from it), you should see this code in your start.html file:

This piece of html code displays the blue header bar at the top of the screen:

Suppose we want to replace the text, "Profound UI On-The-Fly Modernization" with our logo image. Simply replace that text with this HTML tag:

^{<img src="/profoundui/userdata/genie skins/Gradient/logo.png" />}

The HTML code should now look like this:

Save the start.html file, then reload a Genie page, and you should see the logo you uploaded.

That's it!

Note that if your logo is a JPG file you should have saved the uploaded image as logo.jpg, and used this HTML tag instead:

^{<img src="/profoundui/userdata/genie skins/Gradient/logo.jpg" />}

Note also: if you are using a different skin, you would have uploaded the file to that skin's folder and replaced "Gradient" with your skin name. So for the Hybrid skin, you'd have uploaded the image to:

and you'd have used this HTML tag for a PNG file:

^{<img src="/profoundui/userdata/genie skins/Hybrid/logo.png" />}

Example 2 - Modify custom.js:

This example is similar to Example 1, except we are modifying the custom.js file instead of start.html. In example 1 the image loaded immediately and was anchored to the top left of the page. In this example, instead of the image loading with the page, it loads after the other page elements and is placed over them.

As in Example 1, upload an image file to the skin's folder, then open custom.js with a text editor or Genie Administrator.

For a new skin, you should see code for a function named, customize(), which is about 80 lines. At the end of the function–before the closing bracket–insert this code:

^{var logoElement = newElement("img", "/profoundui/userdata/genie skins/Gradient/logo.png");
logoElement.style.left = "0px";
logoElement.style.top = "0px";}

Save the file and reload a Genie page, and you should see your logo:

The image is anchored to the DIV element whose id is "5250". You can experiment with the position by changing the left and top values.