Custom header images for variable screen widths

A component of the pre-installed pages in the device is a header image (logo), which is displayed to your users above the login form for the Public Spot. You can change this header image as you please, for example to reflect the application environment or your corporate design. There is no need for an external Web server; you can simply upload the image directly into the device via the file management in WEBconfig or the configuration management in LANconfig.

A special feature of the header image is that it is available in the device as two possible variants: One version is for large screens or browser windows with a horizontal resolution exceeding 800 px (normal monitors, laptops, tablet PCs, etc.), and one is a small picture for screens with a lower horizontal resolution (PDAs, mobile phones, etc.). This allows you to provide header images for different target groups and to provide them a login page that is appropriate for their device.

Figure 1. Login page for large screens

Figure 2. Login page for small screens

The available resolutions are set by the CSS file of the device. The pre-installed default graphics allow for 800x150 px for the large screen and 258x52 px for the small screen. The file type must be either JPG, GIF, or PNG.

To upload a new header image to the device either as a large or small version, follow the steps below.

Start LANconfig and highlight the device.
In the menu bar, click on Device > Configuration management > Upload certificate or file. The Upload certificate dialog opens.
Set the File type to All files and select the Certificate type that you want to upload.
- Public Spot - Header image of pages: Certificate type for large screens
- Public Spot - Header image box: Certificate type for small screens
Choose your custom header image and click on Open. LANconfig then starts the file upload.

After uploading successfully, the new header image appears the next time the Public Spot page is called.

Note: You can check that the large and small header images are displayed by your Public Spot by setting your browser window width to >800 px and then reducing the width of the window. The CSS technology automatically switches between the large and small pictures.