This discussion is archived
4 Replies Latest reply: Feb 7, 2013 6:20 AM by Mahmoud_Rabie RSS

Modify Login Screen on Theme 24 (Cloudy) to add logo

AshPatel2 Newbie
Currently Being Moderated
Application Express 4.1.1.00.23
Internet Explorer - 8
Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - 64bit Production
Theme - Cloudy - 24

Hi wondering if someone can help, I am using the Cloudy 24 theme for my application, I wanted to change the login screen and add to it the application logo. I downloaded one of oracles sample applications called "SAMPLE TREES", in which they have modified the login screen and put a logo on it. Ideally that is what I would exactly like my login page to look like but I dont know how to make my login scren look like the "SAMPLE TREES" login screen and replcae the logo they have used with my own.

I have looked at the themes and templates in shared components but cant seem to work out how they have done it.

Regards
Ash
  • 1. Re: Modify Login Screen on Theme 24 (Cloudy) to add logo
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Hi AshPatel2,
    I dont know how to make my login scren look like the "SAMPLE TREES" login screen and replace the logo they have used with my own.
    1) The information of the sample apex.oracle.com workspace containing the application of sample trees
    workspace : ralab
    username : test
    password : test
    application : 53647
    the url : http://apex.oracle.com/pls/apex/f?p=53647

    2) If you go to the Login Region template in the body section you will find the following code
    <section class="uRegion uRegionNoPadding clearfix uLoginRegion" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
      <div class="uLoginHeading">
        <span class="bgArrow"></span>
        <div class="appIcon">
          <img src="#IMAGE_PREFIX#f_spacer.gif" class="appIcon #REGION_STATIC_ID#" alt=""/>
        </div> 
        <h1>#TITLE#</h1>
      </div>
      <div class="uLoginBody clearfix">
        #BODY#
        <span class="uButtonContainer">
          #CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
        </span>
      </div>
    </section>
    3) In particular, you need to replace this part with your logo div
        <div class="appIcon">
          <img src="#IMAGE_PREFIX#f_spacer.gif" class="appIcon #REGION_STATIC_ID#" alt=""/>
        </div>
    If this question is answered, please mark the thread as closed and assign points where earned..

    Best Regards
    Mahmoud
  • 2. Re: Modify Login Screen on Theme 24 (Cloudy) to add logo
    scott.wesley Guru
    Currently Being Moderated
    This may also be of assistance:
    http://www.grassroots-oracle.com/2011/07/modifying-your-apex-login-page.html
  • 3. Re: Modify Login Screen on Theme 24 (Cloudy) to add logo
    AshPatel2 Newbie
    Currently Being Moderated
    Thanks for all your help everyone, sorted : )
  • 4. Re: Modify Login Screen on Theme 24 (Cloudy) to add logo
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Welcome any time

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points