WebKit Menu page - Tutorial    
This topic is closed by Victor

Sep 18, 2011 10:49 AM

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.

Dec 06, 2011 01:29 PM
How do you remove LOGO.png on the top right?

Dec 07, 2011 03:31 AM

Is there any chance SC can make 4-5 different webkit menus ?

only really 2 on there at the moment and would be great for a few different designs ?!?!

Dec 13, 2011 06:19 AM
the logo.png is contained in the image toolbar.png
To remove it you can either edit this class in styles.css

body > div.toolbar
 background-image:url(logo.png), url(toolbar.png);
 background-position:top right, top left;
 background-repeat:no-repeat, repeat-x;

create and upload your own image named toolbar.png.
This will change the appearance of all webkit submenu pages in your app.
created and uploaded a "new" toolbar.png... and result was my "new" logo was overlaid across the logo.png ??????

Dec 13, 2011 06:23 AM
you can customize appearance of webkit menu elements by changing values in appropriate style classes (edit style.css).
The result can be a menu completely different from the default webkit menu page.

Aug 19, 2012 08:33 AM
What CSS attributes need to be added in the code to be able to enter 3 to 4 lines of text right next to the thumbnail picture?


PIC PIC PIC     Textline 1111111111111111111111111111111111111111111
PIC PIC PIC     Textline 2222222222222222222222222222222222222222222
PIC PIC PIC     Textline 3333333333333333333333333333333333333333333



Aug 24, 2012 03:58 AM
Hi Gerd,

For technical questions please open a support ticket and our team will help you.

Victor Larii,
SeattleClouds Customer Service Support.