Introduction:
To change Changing the logo image for a Genie skin there are involves only a couple steps:
- Upload an image file into the skin's folder.
- Modify the custom.js file so that it references or start.html files to reference the new logo.
Example 1:
As an example, we can In our examples we will change the logo that is included in the default for a Genie skin named, which is named "HybridGradient".
In a default Profound installation of Profound, all files related to the Hybrid skin would be found in this directory in the IFSthe Gradient skin's folder in the IFS is here:
/www/profoundui/htdocs/profoundui/userdata/genie skins/Hybrid/
...
Gradient/
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 custom.js file (if the custom.js file hasnt been modified, this section of code starts at line 158):
You can change “logo2015.png” to the name of the image you placed in your skin’s folder. This will replace the logo in your skin (you might need to clear your browsers cache to see these changes).
Example 2:
For other skins, the procedure is the same as in example 1. Follow the example and replace "Hybrid" with whfolder. 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":
Then find your skin, click on the "+" to expand it, and click "Edit start.html":
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:
/www/profoundui/htdocs/profoundui/userdata/genie skins/Hybrid/
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.