Default Look and Feel

The default look and feel is provided by the jQuery Mobile framework.

In Preferences, Optimize for appearance is the default look and feel.

For the standard look and feel, the layout of the HTML at a high level is:

Each screen has a block, contained in a div element, with attributes data-role="page" and data-theme="a". Each div element has a div child element with a data-role="header" attribute and a child element for the menu. Use the contents of the header div to manipulate the menu.

<div data-role="page" data-theme='a' id="Department_createScreenDiv">
      <div data-role="header" data-position="inline"> 
       <a data-icon="arrow-l" id="Department_createScreenDivCancel" name="Cancel" onclick="menuItemCallbackDepartment_createCancel();"> Cancel</a>
       <h1>Department_create</h1> 
       <a id="Department_createScreenDivCreate" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();"> Create</a>
     </div>

The menu has one anchor (a) element for each menu item:

<a id="Department_createScreenDivCreate" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();"> Create</a>

In addition to a menu, each screen div has a child div element with a data-role="content" attribute, where the controls are hosted. The content div element has a child div with a data-role="scroller" attribute. This div in turn has a form with a number of div elements. The content div is where you can do customizations, such as branding.
```
<div data-role="content" class="wrapper" >
       <div data-role="scroller">
        <form name="Department_createForm" id="Department_createForm">
          <div class="customTopOfFormStyle"  ><span id="Department_createForm_help" class="help"></span></div>
          <div class="customTopOfFormStyle"   id="topOfDepartment_createForm"></div> 
          <div class="editbox">
            <label class="left" for="Department_create_dept_name_paramKey">Dept name:</label>
            <input class="right" type="text" id="Department_create_dept_name_paramKey"/><span id="Department_create_Department_create_dept_name_paramKey_help" class="help"></span>
          </div>
```
The first div element is a block used to display help in a span element.

The next div is a built-in element that can be used to find the top of the form. The last div is another built-in element that can be used to find the bottom of the form.

In the Custom.js file, it is recommended that you add customizations such as branding to the div element, "TopOf" ScreenKey "Form" and "bottomOf" screenKey "Form." For example:
```
/*
var screenKey = getCurrentScreen();
var form = document.forms[screenKey + "Form"];
if (form) {
var topOfFormElem = document.getElementById("topOf" screenKey + "Form");
! topOfFormElem.innerHTML = "Use this screen to ..."; 
var bottomOfFormElem = document.getElementById("bottomOf" screenKey + "Form");
bottomOfFormElem.innerHTML = "<a href=\"help.html\">Click here to open help</a>";
}
*/
```
All the other divs in the form correspond to the controls put on that screen during design time in the Hybrid App Designer. You might see, for example, a div that holds a label and a textbox (input element). When the page is opened, the controls are enhanced by jQuery Mobile to supply additional functionality for controls like buttons, sliders, text inputs, and combo boxes.

Example 1

A typical Hybrid App with this look and feel, without extraneous attributes, might look like this:

<html>
  <body onload="hwc.onHybridAppLoad();">
    <div data-role="page" data-theme='a' id="Department_createScreenDiv">
      <div data-role="header" data-position="inline"> 
       <a data-icon="arrow-l" id="Department_createScreenDivCancel" name="Cancel" onclick="menuItemCallbackDepartment_createCancel();"> Cancel</a>
       <h1>Department_create</h1> 
       <a id="Department_createScreenDivCreate" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();"> Create</a>
     </div> 
     <div data-role="content" class="wrapper" >
       <div data-role="scroller">
        <form name="Department_createForm" id="Department_createForm">
          <div class="customTopOfFormStyle"  ><span id="Department_createForm_help" class="help"></span></div>
          <div class="customTopOfFormStyle"   id="topOfDepartment_createForm"></div> 
          <div class="editbox">
            <label class="left" for="Department_create_dept_name_paramKey">Dept name:</label>
            <input class="right" type="text" id="Department_create_dept_name_paramKey"/><span id="Department_create_Department_create_dept_name_paramKey_help" class="help"></span>
          </div>
           <div class="customBottomOfFormStyle"   id="bottomOfDepartment_createForm"></div>       
        </form>
       </div>
     </div>
    </div>
  </body>
</html>

Default Look and Feel CSS Files

CSS look and feel files include:

jquery.mobile-1.1.0.css – located in Generated Hybrid App\hybridapp-name\html\css\jquery folder. By default, pages are generated using the B data theme. Modify the ui-body-a class selector in this file to modify the look and feel, for example, the background image or color.
master.css– located in Generated Hybrid App\hybridapp-name\html\css\bb. Modify the body selector to change the look and feel, for example, the background color.
stylesheet.css – located in Generated Hybrid App\hybridapp-name\html\css. This look and feel is simple: it uses no JavaScript code to manipulate the controls, and only a single CSS file. This style sheet is used on all platforms for which the Optimize for performance preference is selected. To modify the background color for this look and feel, modify the body selector.