
|  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.

|
| 
| How do you remove LOGO.png on the top right? |
| 
| Vadim,
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 ?!?! |
| 
| Bryan,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; }
or create and upload your own image named toolbar.png. This will change the appearance of all webkit submenu pages in your app. |
| 
| Anthony, 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. |
| 
| 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?
Like
PIC PIC PIC Textline 1111111111111111111111111111111111111111111 PIC PIC PIC Textline 2222222222222222222222222222222222222222222 PIC PIC PIC Textline 3333333333333333333333333333333333333333333
Thanks,
Gerd |
| 
| Hi Gerd,
For technical questions please open a support ticket and our team will help you.
Victor Larii, SeattleClouds Customer Service Support.
|
|
|