Creating a Custom PeopleSoft Sign On Page

I had a few spare cycles the other day and decided I’d make the PeopleSoft Sign On page look a bit more attractive.  So here’s a run down on what I did.  All these changes are made in the signin.html.

  1. I placed a high res image as the background. It’s setup to resize to 100% of the browser window all the time. This has some downside if you want to use an image that needs to keep a specific aspect ratio. You can always change how it’s displayed though if you needed to keep aspect the ratio.
  2. Rather than utilize the table structure in the original page that PeopleSoft delivered I decided to start fresh. I replaced most of the existing table functionality with div’s although I still have the table used for the User ID/Password Sign In formatting. I thought about changing the look of the User ID/Password text boxes but maybe I’ll tweak that later and post an update later.
  3.  I added transparency to make it look good with the background and gave it a smoother look with curved border corners.
  4. I left out the trace flag and languages sections. I might add the trace flag section back in as some type of options tab that would replace the sign on page for tracing. I could also do something similar for the languages piece so it’s there but not always in the way. If I make those changes I’ll post an update.
  5. I removed the default logo and added a custom logo. Lots of places already do this, but they leave most of the rest of the page alone.
  6. I kept all the dynamic variable stuff, so errors are all properly displayed. I could pull the error out and display it somewhere else. In this example though I didn’t really have anywhere better to put it so I left it where it is.
  7. I placed the new custom images for the log in on another server and referenced them from the sign in page.

Here are two screen shots, one as is, and one showing an error.

Sign On screenshot

Sign On with error screenshot

3 thoughts on “Creating a Custom PeopleSoft Sign On Page
  1. Hi Randy,

    I would like to know, how you change the background image of this login page?
    and i want to create the custom login (using my own user table) but i also want to still refer to the peoplesoft user. e.g, in my user table, user A, B, C maybe will refer to the same user in peoplesoft, like PeoplesoftUser1.
    Do you think that one possible?
    if yes, can you throw me some hint how to do that.

    Thanks

    Regards
    Wira

    • My customizations included several things, but in terms of adding a background image, that’s rather simple.
      Right after the line

      <body onLoad="setErrorImg(); clearRecentSearch();">

      I added

      <div>
         <img id="spt_background" title="" alt="" src="<%=psCtxPath%><%=psHome%>/images/mountain.jpg">
      </div>

      After that I have some other divs for layering on top the logo box as mentioned in the original article.

      As for your custom login table, I’m not sure what you are trying to accomplish

    • I forgot one important piece of info on doing this. That is the CSS info to make this actually look the way you want it. I added my custom CSS after the body as you can see here.


      body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      }
      #spt_background {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *