Here is the code for the head and cms to give the user easy option for apple IOS products to control the Icons and the bar across the top.

Below is the CMS Code:


Code: Select all
      <cms:editable name='websiteFavicons' label='Website and Mobile Icons and Details' type='group' /> 
         <cms:editable name='viewPortuserScalable' label='Is the Viewport User Scalable?' desc='Please select one of the following options' group='websiteFavicons' opt_values='yes | no' opt_selected = 'no' type='radio' />
         <cms:editable name='appleWebCapable' label='Apple Web Capable?' desc='Please select one of the following options' group='websiteFavicons' opt_values='yes | no' opt_selected = 'yes' type='radio' />
         <cms:editable name='appleWebStatusBarColor' label='Apple Mobile Status Bar Color' desc='Please select one of the following options' group='websiteFavicons' opt_values='default | black | black-translucent' opt_selected = 'black' type='radio' />
         <cms:editable name='appleWebAppTitle' label='Apple Mobile Web App Title' type='text' group='websiteFavicons'></cms:editable>
         <cms:editable name='appleStartUpImage' label='Apple Touch Startup Image' desc='This should be a png Image (iPhone 5 size: 640px x 1136x)' type='image' group='websiteFavicons' show_preview='1' >images/apple/startup-image.png</cms:editable>
         <cms:editable name='appleTouchIcon' label='Apple Touch Icon Standard' desc='This is an Apple Touch Icon (use .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon.png</cms:editable>
         <cms:editable name='appleTouchIcon114' label='Apple Touch Icon 114px ' desc='This is an Apple Touch Icon (use 114px x 114px .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon@2x.png</cms:editable>
         <cms:editable name='appleTouchIcon72' label='Apple Touch Icon 72px ' desc='This is an Apple Touch Icon (use 72px x 72px .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon-72.png</cms:editable>
         <cms:editable name='appleTouchIcon144' label='Apple Touch Icon 144px ' desc='This is an Apple Touch Icon (use 144px x 144px .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon-72@2x.png</cms:editable>
         <cms:editable name='appleTouchIcon60' label='Apple Touch Icon 60px ' desc='This is an Apple Touch Icon (use 60px x 60px .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon-60.png</cms:editable>
         <cms:editable name='appleTouchIcon120' label='Apple Touch Icon 120px ' desc='This is an Apple Touch Icon (use 120px x 120px .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon-60@2x.png</cms:editable>
         <cms:editable name='appleTouchIcon76' label='Apple Touch Icon 76px ' desc='This is an Apple Touch Icon (use 76px x 76px .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon-76.png</cms:editable>
         <cms:editable name='appleTouchIcon152' label='Apple Touch Icon 152px ' desc='This is an Apple Touch Icon (use 152px x 152px .png Image)' type='image' group='websiteFavicons' show_preview='1' >images/icons/icon-76@2x.png</cms:editable>



Below is the code to inserted in between the <head></head> tags:

Code: Select all
    <meta name="apple-mobile-web-app-capable" content="<cms:get_custom_field 'appleWebCapable' masterpage='globals.php' />" />
    <meta name="apple-mobile-web-app-status-bar-style" content="<cms:get_custom_field 'appleWebStatusBarColor' masterpage='globals.php' />" />
    <meta name="apple-mobile-web-app-title" content="<cms:get_custom_field 'appleWebAppTitle' masterpage='globals.php' />">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=<cms:get_custom_field 'viewPortuserScalable' masterpage='globals.php' />" />


    <link rel="apple-touch-icon-precomposed" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon' masterpage='globals.php' />" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon114' masterpage='globals.php' />" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon72' masterpage='globals.php' />" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon144' masterpage='globals.php' />" />
    <link rel="apple-touch-icon-precomposed" sizes="60x60" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon60' masterpage='globals.php' />" />
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon120' masterpage='globals.php' />" />
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon76' masterpage='globals.php' />" />
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="<cms:show k_site_link /><cms:get_custom_field 'appleTouchIcon152' masterpage='globals.php' />" />
    <link rel="apple-touch-startup-image" href="<cms:show k_site_link /><cms:get_custom_field 'appleStartUpImage' masterpage='globals.php' />">




Enjoy!

- Developernator