Modifying the application logo can be as simple as copying the new logo image and telling Thinfinity® VirtualUI™ application where it is located:
Create a folder called "BrandingFiles", if it doesn't exist yet, under the folder web located inside the Thinfinity® VirtualUI™ installation directory.
(e.g.: C:/Program Files/Thinfinity® VirtualUI™/web)
Copy your own logo image file to the "BrandingFiles" folder.
Create the WebAliases.ini file and configure it:
a. Create a file called "WebAliases.ini" in the installation directory (e.g.: C:/Program Files/Thinfinity® VirtualUI™/bin32/WebAliases.ini or C:/Program Files/Thinfinity® VirtualUI™/bin64/WebAliases.ini, depending on your version ). If the file already exists, only append the lines to it.
b. Configure the redirection of the logo files you want to substitute, following the two examples below (Thinfinity_Virtual_UI_150.png.png and favicon.ico):
[Alias]
;=================
;Main logo
;=================
/images/Thinfinity_Virtual_UI_150.png.png=BrandingFiles\MyLogo.png
;=================
;Favicon
;=================
/favicon.ico=BrandingFiles\MyFavicon.ico
c. Save it.
Open the application to see the changes.
Bear in Mind:
a. Any line in the "WebAliases.ini" file starting with a semicolon will not be considered by the application. It can be used to leave comments in the file.
b. You can substitute any interface image or file, by following the same steps described above.
c. Sometimes the favicon is not shown right the way, because the browser keeps history of the images. In that case, you should clean the browser cache before trying out the changes.
To customize the web files, you should:
Create a folder called "BrandingFiles", if it doesn't exist yet, under the folder web located inside the Thinfinity® VirtualUI™ installation directory. (e.g.: C:/Program Files/Thinfinity® VirtualUI™/web)
Make copies of the original web files that you want to modify to the "BrandingFiles" folder. Copy only the files to be modified without their associated folder structure.
Customize the files (html, css, etc) as you prefer.
Create the WebAliases.ini file and configure it:
a. Create a file called "WebAliases.ini" in the installation directory (e.g.: C:/Program Files/Thinfinity® VirtualUI™/bin32/WebAliases.ini or C:/Program Files/Thinfinity® VirtualUI™/bin64/WebAliases.ini, depending on your version). If the file already exists, only append the lines to it.
b. Configure the redirection to the files you have modified, by adding a line similar to the examples below for each modified file:
[Alias]
/index.html=BrandingFiles\my_index.html
/css/index.css=BrandingFiles\my_index.css
c. Save it.
Open the application and check out the changes.
Bear in Mind:
a. Any line in the "WebAliases.ini" file that starts with a semicolon will not be considered by the application. It can be used to leave comments.
b. The paths located in the HTML, CSS, and other contents will be kept relative to the original file location. This means that you won't have to change the content paths when customizing this files.
We recommend that a new folder be created in order to keep the customized files instead of having them with the original files. This will enable you to:
a) Get back to the original interface configuration at any time.
b) Make sure that your files will be safe after a version upgrade.
You can also choose to place the files inside or outside the webroot structure. Keep reading to see how each option will behave:
Storing the Customized Files in the Webroot Directory:
In this case:
1) The files will be externally accessible from a URL similar to:
https://127.0.0.1/BrandingFiles/customizedFile.html
2) The file paths, indicated in the "WebAliases.ini", can be relative to the webroot directory. (e.g. "/img/Thinfinity_Virtual_UI_150.png.png=BrandingFiles\MyLogo.png").
You will find other relative path examples on the topics Changing the logo and Customizing the web files.
****
Storing the Customized Files Outside the Webroot Directory:
In that case:
1) The files will be protected, because it won't be possible to access the customized files from a URL.
2) The file paths, indicated in the "WebAliases.ini", must be absolute, as in the example below:
[Alias]
/index.html=c:/BrandingFiles/my_index.html
/images/Thinfinity_Virtual_UI_150.png.png=c:/BrandingFiles/MyLogo.png
Thinfinity® VirtualUI™ allows you to modify the web interface and tailor it to your branding scheme.
Customizing the application logo and other image files can be very simple, once it only requires you to have the new image file and tell the application where it is located.
Customizing the structure and style of the application may be a little bit more complex. These kind of customizations have to be done at a programming level (HTML and CSS).
Read also how to protect the customized web files in the Files Location topic.