This topic describes how to add a new icon to the home screen in the Aptify Mobile for Members application.

To add a new icon to the home screen, open the file index.html.

HTML Structure

Under <div class="ui-grid-b" id="mobile-menu"> add a new <div> element similar to the other elements in the div keeping all other structure intact.

For example:

<div class="ui-block-c ui-menu"><ahref="mynewpage.html" class="mynewicon"> </a><span class="ui-menu-label">MyNewPage</span></div>

CSS styles

1. In the HTML structure class='ui-block-c ui-menu' holds the structure of the icon.
2. Create a new class (e.g., ".mynewicon") in styles/aptify.mobile.css
3. Add the class to the <a> element inside the <div>
4. This class will hold the background image for the icon. Add your icon image (width 80 px x height 124 px (with click image sprite) or 62 px (without click image sprite)) in styles/images/.

5. In aptify.mobile.css, add the image icon path.
   
   For example:
   
   

   mynewicon {background:url('images/newicon.png') no-repeat left top;-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

   
   
   

6. Add another class.mynewicon:active, .mynewicon-active-fake {background:url('images/mynewicon.png') no-repeat left bottom;-webkit-tap-highlight-color: rgba(255, 255, 255, 0); } To create the active and touch (fake) effect. mynewicon-active-fake will be used in JavaScript to create touch events for touch devices.