xPico® Wi-Fi® Embedded Device Server User Guide
66
12: Branding the xPico Wi-Fi Unit
This chapter describes how to brand the Web Manager user interface of your xPico Wi-Fi
embedded device server.
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 Wi-Fi file
system.
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 top-level
/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 built-in hidden file
/lantronix/
resource/main/web_manager/web/index.html
is overridden by the real file system file
/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 built-in copy.
