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.

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.
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.
I added transparency to make it look good with the background and gave it a smoother look with curved border corners.
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.
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.
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.
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.

Posted

November 17, 2012

Customizations, PeopleTools

Randy

Tags:

Comments

4 responses to “Creating a Custom PeopleSoft Sign On Page”

wira

November 6, 2014

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

Reply
1. Randy
  
  November 13, 2014
  
  My customizations included several things, but in terms of adding a background image, that’s rather simple.
  Right after the line
  [sourcecode]<body onLoad="setErrorImg(); clearRecentSearch();">[/sourcecode]
  I added
  [sourcecode]<div>
  <img id="spt_background" title="" alt="" src="<%=psCtxPath%><%=psHome%>/images/mountain.jpg">
  </div>[/sourcecode]
  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
  
  Reply
2. Randy
  
  March 17, 2015
  
  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%; }
  
  Reply
Damian

March 14, 2018

Hi Randy, thanks for sharing, I’m using Peopletools 8.56 and the signin.html is a little different (I used this guide for 8.51 and works ok), in 8.56 the code is:
body onload=”ptSignon().login();
instead of

When I tried to add the image I have the following issue: the image is displayed at the top and then, at the bottom of the page the login table. Can you help me to correct this?

Thanks a lot
Damian

Reply

Creating a Custom PeopleSoft Sign On Page

Comments

4 responses to “Creating a Custom PeopleSoft Sign On Page”

Leave a Reply Cancel reply