2 Replies Latest reply: Nov 13, 2012 6:26 PM by Phil in Sydney RSS

    Add a logo in Apex 4.2 Mobile Template.

    Phil in Sydney
      Hi there,

      I am working on Apex 4.2+DB11gR2.
      As I know there is a new theme and template for mobile phone and create a new mobile application for iphone.
      I can see the login windows, but I cannot add a logo on the login page.

      I try to add an image in Share Componant->template->page as following.

      In Definition Header:
      <!DOCTYPE html>
      <html lang="&BROWSER_LANGUAGE.">
      <head>
      <meta charset="utf-8" />
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>#TITLE#</title>
      #APEX_CSS#
      #TEMPLATE_CSS#
      #APEX_JAVASCRIPT#
      #TEMPLATE_JAVASCRIPT#
      #APPLICATION_JAVASCRIPT#
      #HEAD#
      </head>
      <body #ONLOAD#>
      *<div><img src="/i/my-logo.jpg"/></div>*

      The logo is not displayed on the login page, even I can see the source code does have the code inside as following.
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8" />
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Login</title>
      <link rel="stylesheet" href="/i/libraries/jquery-mobile/1.1.1/jquery.mobile-1.1.1.min.css" type="text/css" />

      <link rel="stylesheet" href="/i/themes/theme_50/css/4_2.css" type="text/css" />

      <script type="text/javascript">
      var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
      </script>
      <script src="/i/libraries/apex/minified/mobile_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
      <script type="text/javascript">
      apex.jQuery(document).on("mobileinit", function() {
      apex.jQuery.mobile.defaultPageTransition = "slide";
      apex.jQuery.mobile.defaultDialogTransition = "pop";
      });
      </script>
      <script src="/i/libraries/jquery-mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
      <style> html {visibility:hidden;} </style>
      <script type="text/javascript">
      apex.security.framebreaker("D");
      </script>




      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta http-equiv="Cache-Control" content="no-cache" />
      </head>
      <body >
      *<img src="/i/my-logo.jpg"/></div>*

      When I login with correct username&password, I can see the logo flashed once then hid.

      Could anyone give me a hand on this issue?

      Thanks in advance.

      Phil
        • 1. Re: Add a logo in Apex 4.2 Mobile Template.
          Marc Sewtz-Oracle
          Hi Phil,

          If you only want to show this on the login page, then maybe you could place this image in a region on your login page? But in any case, jQuery Mobile needs to setup your page first, before you can emit your own output, so at a minimum, your own content must come after the DIV with the data-role="page", and probably best to also print the DIV with data-role="content" first, too. So when you look at your template, you should find these lines:

          <div id="#PAGE_STATIC_ID#" data-role="page" data-theme="c" data-url="#REQUESTED_URL#">
          ....
          <div data-role="content" data-theme="c">


          ... so I would suggest printing the logo after this.

          Regards,
          Marc
          • 2. Re: Add a logo in Apex 4.2 Mobile Template.
            Phil in Sydney
            Hi Marc,

            You are RIGHT!

            As I moved the <img src....> after <d.i.v id="#PAGE_STATIC_ID#" data-role="page" data-theme="c" data-url="#REQUESTED_URL#">, it works as I expect.

            Thank you very much, Marc!!!

            Phil

            The code in BODY is as following.

            <d.i.v id="#PAGE_STATIC_ID#" data-role="page" data-theme="c" data-url="#REQUESTED_URL#">
            <img src="/i/my-logo.jpg">
            #PAGE_CSS#
            #FORM_OPEN#

            #REGION_POSITION_01#

            <div data-role="content" data-theme="c">
            <div id="messages">
            #SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#
            </div>
            #BOX_BODY#
            </div><!-- /content -->
            #REGION_POSITION_08#

            #FORM_CLOSE#
            #PAGE_JAVASCRIPT#
            #GENERATED_CSS#
            #GENERATED_JAVASCRIPT#
            <!--/div--><!-- /page -->

            Edited by: Phil in Sydney on Nov 14, 2012 11:22 AM

            Edited by: Phil in Sydney on Nov 14, 2012 11:26 AM