Twixl Publisher offers a number of options to adjust things like the toolbar colors in your app, or the backgrounds and colors used in the store. These allow you to give your app a personal touch. But it doesn't end there ... by integrating things like an info page and/or an info cell in your kiosk, you can communicate more directly with your readers. In this article, we want to give an overview of the different parts of the look and feel that can be customized.
User interface customization (for both single & multi-issue apps)In the Twixl Publisher Build Settings, i.e. where you store all configuration options for your app, go to the "User Interface" tab. Here you can adjust the background color of the toolbar and depending on the color you select here, you can also adjust the color of the text and icons that are shown in the toolbar (the publication title, the table of contents icon, the bookmark and sharing icons, etc.) You can also adjust the "Scroller Background" - this background is used in two situations: 1. as a background fill colour when you use a 4:3 iPad publication on a 16:9 Android tablet (technically called "pillarboxing" or "letterboxing") 2. as a background fill colour in the browser window of a Web Reader
User interface customization for the kioskIn the Twixl Publisher Build Settings, there is a second tab called "App Store Kiosk - User Interface". Depending on which orientations and devices your app supports, you can add up to 4 store backgrounds. If you leave this empty, the default background will be used. Based on the color(s) in the background, you can optionally change the color of the "Grid Text", i.e. the text that is displayed under the issue cover in the store. Note that the background itself is fixed, and will not scroll along with the rest of your kiosk content.
Integrating an Info Cell
Instead of just displaying the covers of the different issues in your storefront, you can include an extra info cell at the top of the store. An "Info cell" is like a header for your store. You'll need to create an HTML file, named exactly "infoCell.html", that you should also place in the Web Resources folder of your build setting (click the "Web Resources" button to go to that location). Because the info cell is HTML-based, you can either keep it static, but also make it more dynamic, add a timed slider, etc. If you are using entitlement, then you can integrate information for e.g. your print subscribers in the info cell. You can also use the custom URL schemes to trigger the entitlement login window. The infoCell height and width are defined in the build settings and can be different for iPads, Android tablets and phones, both in landscape and in portrait. If you want to display online content you can check whether the device is connected to the internet and then redirect to your online page, otherwise you can display embedded content. Note that the info cell will scroll along with the rest of your kiosk content.