WebKit Menu type pages are used for creating menu pages in your app.
Each menu item contains a link and is designed with an icon and intuitive right arrow image for navigation to a target page related to the menu item.
In the Edit Menu Page you can customize:
1. Title text displayed above the menu;
2. Replace the header image. New image can be selected in the Gallery or uploaded to your app's folder via the Resource Manager;
3. Replace footer image;
4. Menu items (by default called Page 1, 2, etc.) can be added (+), removed (-) or reordered in the Menu Items box.
In the Item Properties box you can change:
1. Small icon (Image:) displayed before item's title;
2. Edit text (Title:) of the menu item;
3. Link from the menu item to a page in the app.
Also a transition method to the next page can be selected (slide, curl, flip, none).
The style of each WebKit Menu page can be customized from within Design style Pages.
You can change page background image or color, etc of each page.
In order to customize item text (font, size, color, etc) you will have to edit the style.css. Click on the Edit “stile.css” link from the Design Properties page.
To determine the class of the elements in your page, switch to HTML mode and search in the code for a class selector or html tag related to the element (text, image, background) you want to customize.
For instance, cascading style of the title (displayed above the menu) on WebKit Menu pages is defined by the class “toolbar” and tag <h1>.
Thus editing in style.css the values of properties listed in .toolbar > h1
will change the style of all related titles on this type of pages in your app.