12: Branding the xPico Wi-Fi Unit
This chapter describes how to brand the Web Manager user interface of your xPico
Web Manager Customization
Changing the Presentation
You can customize the Web Manager's appearance by modifying index.html and style.css. The style (fonts, colors, and spacing) of the Web Manager is controlled with style.css and the text and graphics are controlled with index.html.
The Web Manager files are hidden and are incorporated directly into the firmware image but may be overridden by placing the appropriate file in the appropriate directory within the xPico
Web Manager files can be overridden with the following procedure:
1.Either create a file from scratch, or edit a copy of the existing Lantronix file. To edit a copy of the original file, do the following:
a.Obtain the file by entering the following path in a browser: http://<hostname>/lantronix/resource/main/web_manager/web/<filename>
b.Then save the file (in the case of index.html, you may need to set the browser to view the page source).
c.Modify the file as required.
2.Create a path in the file system (the entire path can be created in a single step via either the Web Manager or CLI). The path is the same as that for the hidden files, except for the
/lantronix directory:
/resource/main/web_manager/web/
3.Upload your file into the directory in step 2.
4.Restart the browser to view the changes.
To go back to the default files in the firmware image, simply delete the overriding files in the file system (the directories can be left intact if so desired).
Path Format
As mentioned above, the root directory for hidden files built into the firmware is /lantronix. When overriding these hidden files by placing your own copies in the file system, the path is identical but for the /lantronix top directory. For example, the
/resource/main/web_manager/web/index.html.
If you need to refer to an overridden file within your own web files, the path follows the same format, except the /lantronix top directory of the hidden file path is replaced by /.overlay. So, to refer to style.css from within index.html, the path in index.html is /.overlay/resource/ main/web_manager/web/index.html. This format allows the system to look first for an overriding copy of the file before using the
xPico® | 66 |