WebKit Details page - Tutorial

WebKit Details type pages share the rounded corner design with webkit menu pages and can be used for displaying content like text, images and links.
Pages are edited using a WYSIWYG interface web editor.

Editing is done in the page Edit HTML Page:

In the Edit Menu Page you can customize:
1. Title text displayed on the top of page;
2. Replace the “toplogo.png” 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. Enter and format content (text, images, links) using the ToolBox.

Also a transition method to the next page can be selected (slide, curl).

The style of each WebKit Details page can be customized from within Design style Pages:

You can specify background image/color, text color/align, etc for each page. 

In order to customize header of the page 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 header (background, title and logo.png image) on WebKit Details pages is defined by the class “toolbar” and tags <div> and <h1>. Thus editing in style.css the values of properties listed in:


1

body > div.toolbar

and


1

.toolbar > h1

will change the style of all headers on this type of pages in your app.