Wednesday, September 12, 2007

Customizing the SSGD wait screen Look and Feel

The first thing a user sees when he/she accesses the SSGD environment is a web page with a scrolling orange dot ('splash screen'). This screen is presented for a couple of seconds before it changes to the 'log on' screen.

The 'splash screen' is a very simple html-page which contains an animated gif image (the orange dot). This web page can easily be changed by following these steps:

  1. Create your own 'splash screen' page in html with your favorite web page editor
    (It is wise to have some sort of animation in it to give your users the feeling there is still progress in setting up the SSGD connection)
  2. Copy the html code into a text editor (vi,Notepad/Textpad/Ultraedit or alike)
  3. Remove everything except the part between <body> and </body>
  4. Replace all image locations to <%= path %>
    So
    http://servername/image_dir/image.gif
    is changed to
    <%= path %>image.gif
  5. Add the following lines at the top:
    <%@ page errorPage="/resources/jsp/errorpage.jsp" %>
    <%@ page contentType="text/html" %>
    <%@ include file="/attributes.jsp" %>
    <%@ include file="/resources/jsp/utilities.jsp" %>
    <%
    String path = getContextPath(request) + "/resources/images/splash/locale=";
    path = path + getBestSupportedLocale(request) + "/";
    %>
  6. Copy the new html(/jsp)-code to the file splash.jsp:
    /opt/tarantella/webserver/tomcat/5.0.28_axis1.2/
    webapps/sgd/webtops/standard/tcc/splash.jsp

  7. Copy all images used in the page to:
    /opt/tarantella/webserver/tomcat/5.0.28_axis1.2/
    webapps/sgd/resources/images/splash/


To make sure the new 'splash screen' is available clear the browser cache and enjoy your new page :)

3 comments:

Ted said...

Thanks for the posts, very informative and helpful. I was playing around with what you showed, and took a stab at customizing the login screen, but I can not change the color on the words Username and Password. Trying to look at the code I cannot find where the line (font face="Arial, sans-serif" color="#CCCCCC" size="-1")(label for="Username") Username(/label)\(/font) is located at. Any ideas on how to change this? Sorry I had to change the < to ( to post.

Ted said...

Thanks for the posts. Very helpful. I was using your two posts on customization and I tried to extend this to the login page. I cannot seem to change the color on the words Username and Password that are above the fields. Can you point me to the right file for this?

Thanks

The line I am looking for is (font face="Arial, sans-serif" color="#CCCCCC" size="-1")(label for="Username")Username(/label)(/font)

Sorry I had to change the < to a (

Remold Krol said...

Ted,

The logon-page (version SSGD 4.4) can be found at:
/opt/tarantella/
webserver/tomcat/
5.0.28_axis1.2/webapps/sgd/
webtops/standard/authentication

Filename: login.jsp

On line 149 (line 151 for SSGD 4.3) you will find the line you are looking for.

Normally you will see two fields in the login page (Username and Password), but this might change for other authentication mechanisms. Therefor you will find these fields in a small loop.

for (int i=0;i< dataReqs.length;i++)

So when changing the look and feel keep please do not change this looping, unless you know what you are doing.