Customizing your App Store Kiosk.

Luk Dhondt 07-11-2012 How-To

In a previous article we already discussed a number of UI customization options in the new Twixl Publisher release.

With the new 3.0 version of our software you are able to completely customize the App Store Kiosk app and give it the look and feel you want.

Some of these features were already available in our 2.x versions. You'll find these customization features in the build settings sheet. When you select "Build Settings…" from the Twixl Publisher menu, you'll find all the build settings you've created. Here you can start by selecting the build setting you want to customize. Now select the compontent "User Interface". In this pane you can change the Thumbnail Viewer, which is the navigation component in a Twixl publication and appears when you single-tap on any page within your publication. In the screenshot above, you can see that you need to define a border width, a border color, an image transparency  and a label color for an active and an inactive page. The active page is the page currently being read by your user. The image transparency property refers to the amount of transparency of the page thumbnail and should be a value between 0 (completely transparent) and 1 (completely opaque).
You can also customize the background of the Thumbnail Viewer and the drop shadow of the page thumbnails.
The values you see in the screenshot above are the default values and give you the default thumbnail viewer as we defined it starting with version Twixl Publisher 2.

In the same pane you can also modify the navigation bar color. The navigation bar is the bar on the top when you single-tap in your publication, and allows you return to the store overview. The navigation bar color is also used for the progress bars that are displayed when downloading a publication.

You can also modify the scroller background color for Android devices. This color is going to be displayed 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 your publication background color which will make your publication blend with the colored borders. [caption id="attachment_369" align="aligncenter" width="300"] an example of a letter boxed publication[/caption] The new App Store Kiosk customization options in Twixl Publisher 3 are available in the pane "App Store Kiosk User Interface". Here you can change all the images used to style the storefront.
You can also provide the users with an info page and extra info cell.

An "Info page" is a page that can be called on first start-up or by tapping a button in the storefront.
Here you can introduce users to your app or to information about your company.
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 publication.
If you want to display online content you can check if the device is connected to the internet and then redirect to your online page. Pieter has written a 'How to' blog post about this.

An Info cell is essentialy the same as an Info page the only difference is the way is is presented to you user. The info cell is like a header in grid view. It's also an HTML file, named exactly "infoCell.html", that you should also place in the Web Resources folder of your publication. You can easily implement the same online-offline check as above.

So as an overview here is a App Store Kiosk with all the customisation options tagged. [caption id="attachment_782" align="aligncenter" width="500"]App Store Kiosk User Interface Customisation App Store Kiosk User Interface Customisation[/caption] If you have any question regarding these new features, on't hesitate to contact us by comenting on this article or by starting a discussion on our support site.

We hope you enjoy all these new features, and we are looking forward to seeing some of your creations.

Tweet this article: Customizing your App Store Kiosk.

Share this post to your network.

Download the free trial of Twixl Publisher

Start using Twixl Publisher immediately, preview the result on your own device, share your creations with a colleague or client, get started!
Need any help? Visit our Learning & Support site.

Download the trial Check out the documentation today

× Free trial/download