6 Replies Latest reply: Nov 15, 2012 2:21 PM by 775982 RSS

    Oracle Apex Login region align to right

    775982
      Hello
      I have a requirement for a custom Apex Login page in which the login region must be located on the right side. The rest of the page will be for a background image. I know how to edit the page template to add the background image but have been unable to make to login region align to the right.
      Thanks
      GE
        • 1. Re: Oracle Apex Login region align to right
          Matthew Morris
          In the Login Page template will be something like this in the body section:
          <body #ONLOAD#>
          #FORM_OPEN# 
          <table border="0" summary="" width="100%" style="margin-top:100px;margin-bottom:200px;">
          <tr>
          <td align="center"><table border="0" summary="">
          <tr><td>#NOTIFICATION_MESSAGE#</td></tr><tr><td>#BOX_BODY#</td></tr></table>
          </td>
          </tr>
          </table>
          #FORM_CLOSE#
          The fourth line down has align="center". Change 'center' to 'right'.
          • 2. Re: Oracle Apex Login region align to right
            fac586
            GeorgeE wrote:
            Hello
            I have a requirement for a custom Apex Login page in which the login region must be located on the right side. The rest of the page will be for a background image. I know how to edit the page template to add the background image but have been unable to make to login region align to the right.
            Use CSS float or absolute positioning. Can't be more specific without an example on apex.oracle.com, or the usual details (required for all visual display and layout questions):

            <li>Full APEX version
            <li>Browser(s) and version(s) used
            <li>Theme
            <li>Page and Region template(s)
            • 3. Re: Oracle Apex Login region align to right
              775982
              Application Express 4.1.0.00.32
              IE 8 and FF 15
              Theme 4 Topaz
              Login page template
              Form region template

              The Login page template places content in a DIV with ID "login", containing DIVs with IDs "messages" and "login-main." The template seems to override any effort to right align the region.
              I have tried using CSS on the template to reposition. Can you specify modifications?

              Thank you
              GE
              • 4. Re: Oracle Apex Login region align to right
                Matthew Morris
                OK -- for that theme, add styl e="float: right;" immediately after the div id="login" text (i.e. in the same tag)

                (extra space in 'style' added to stop the tag from being used in the post)
                • 5. Re: Oracle Apex Login region align to right
                  775982
                  Matthew
                  That worked great. Thank you very much.
                  I think the floating region will meet the requirement. However, before I mark this complete, I wanted to know how involved it is to set the region to a fixed position? Would that require editing the Login region template?
                  Thanks
                  George
                  • 6. Re: Oracle Apex Login region align to right
                    fac586
                    GeorgeE wrote:
                    Application Express 4.1.0.00.32
                    IE 8 and FF 15
                    Theme 4 Topaz
                    Login page template
                    Form region template

                    The Login page template places content in a DIV with ID "login", containing DIVs with IDs "messages" and "login-main." The template seems to override any effort to right align the region.
                    I have tried using CSS on the template to reposition. Can you specify modifications?
                    I'd suggest creating an embedded style sheet in the Login page HTML Header to control the position of the login box:
                    <style>
                    #login-main {
                      position: absolute;
                      top: 100px;
                      right: 20px;
                      width: 400px !important; /* Override theme login region width */
                      margin: 0 !important; /* Override theme region margins/centering */
                    }
                    </style>
                    Adjust the <tt>top</tt>, <tt>right</tt> and <tt>width</tt> values to get the best position in relation to the background image.