Customizing your app
Configuring the build settings
Several customization options are available in the build settings of your app.
Some options are available in the "User Interface" part of the build settings (these apply to both single- and multi-issue apps).
App Store only settings are available in the "App Store Kiosk - User Interface" tab.
Tool Bar & Scroller Background colors
You can set the background color, as well as the color for the Text and Icons to be used in the toolbar.
You can also modify the scroller background color for Android devices and for the Web Reader export.
This color will be used if you are using a publication with a different aspect ratio than your device. The content will be "letterboxed" and the empty area on the left and right will display the background color you defined. In most cases you will want this to default to black, but you can choose to use a publication background color that fits best with your content.
App Store Kiosk options
Here you can change the images that will be used as the background image for the storefront.
You can drag and drop images according to the sizes specified for the store backgrounds.
Depending on the background you selected, you can optionally change the "Grid Text Color" - the text that is displayed under the issue cover in the store.
Using an info page in your kiosk ("infoPage")
You can choose to display an info page that will be place don top of your kiosk top of the store.
An "Info page" is a page that can be called by selecting a menu in the sidebar of the kiosk (enter the title in the "Side Menu Title" field - leave this field blank if you don't want this menu item to appear at all). You can also trigger the infoPage to be displayed from the infoCell by using the special URL scheme:
tp-info-page://self
Here you can introduce users to your app or e.g. to information about your company, etc.
To provide an info page, you'll have to create an HTML page, called exactly "infoPage.html", and copy this page to the "Web resources" folder of your build setting (click the "Web Resources" button to go to that location).
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 (see also this article).
Using a banner in your kiosk ("infoCell")
You can also choose to display an extra banner at the top of the store, called an "infoCell".
An "infoCell" is essentialy the same as an Info page, the only difference is the way it is presented to your users. The 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. You can easily implement the same online-offline check as above.
The infoCell height and width can be different for iPads, Android tablets and phones.
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 (see also this article).