Customizing the classic customer space

To customize your Customer Space, you must have a working knowledge of web page design, HTML, and custom style sheets (CSS).

You can redesign the welcome.html page to suit your organization. You can modify this page in the source or in the welcome.zip file.

These elements must not be changed as they contain links to various areas of the application:

  • The header text:
    <HEAD>
    	<link href="resources/styles/default/css/dynamic/welcome.css" type="text/css" rel="stylesheet"></link>			<!--locedit-->
    	<script src="/sso/domain.js"></script>
    	<script src="/sso/sso.js"></script>
    	<script src="/sso/login.js"></script>
    	<script>
    		var months=[
    					"January",
    					"February",
    					"March",
    					"April",
    					"May",
    					"June",
    					"July",
    					"August",
    					"September",
    					"October",
    					"November",
    					"December",
    					];
    		function today()
    		{
    			var today = new Date()
    			var month = months[today.getMonth()];
    			var day = today.getDate()
    			var year = today.getFullYear()
    			var dateDiv = document.getElementById("welcomeDate");
    			dateDiv.innerHTML = month + " " + day + " " + year;
    		}
    		function loggedIn()
    		{
    			var welcomeStr = document.getElementById("welcome").innerHTML;
    			if(welcomeStr.length > 8)
    			{
    				document.getElementById("loginTitle").style.display="none";
    				document.getElementById("loginLinks").style.display="none";
    				var welcome = document.getElementById("welcome");
    				welcome.innerHTML = welcome.innerHTML + "  [<a" + ' class="linkColor" ' +  "href='|$|_context.logout.url|$|'>logout</a>]"; 
    				document.getElementById("manageAccount").style.display="block";
    				document.getElementById("welcome").style.display="block";
    			}
    			else
    			{
    				document.getElementById("loginTitle").style.display="";
    				document.getElementById("loginLinks").style.display="";
    			}
    		}
    		function openHelp()
    		{	
    		   	window.open("/|$|_context.dataarea|$|/CandidateSelfService/lawson/help/html/CandidateHelpFrameset.htm","HelpWindow");
    		}
    	</script>
    </HEAD>
    
    <BODY onload="today();loggedIn();">
    <div class="mainContent">
    
    <div>
    	<div id="help" class="floatRight help"><a class="linkColor" href="javascript:openHelp();" >Help</a></div>
    	<div id="welcome" class="floatRight welcomearea">Welcome |$|_context.actor.name|$|</div>
    	<div class="welcomeDate floatLeft" id="welcomeDate"></div>
    </div>
  • The embedded links to the application:
    	<div class="menu">
    			<div class="headingTitle">
    				Find a job
    			</div>
    			<div class="headingText">
    				<a class="linkColor" href="controller.servlet?service=page&webappname=CandidateSelfService&name=CSSHomePage
    &panel=Search&dataarea=|$|_context.dataarea|$|">All Open Positions</a>
    				<div class="spaceMenu"></div>
    			</div>
    		
    			<div class="headingTitle" id="loginTitle">
    				Login/Register
    			</div>
    			<div class="headingText" id="loginLinks">
    				<a class="linkColor" href="|$|_context.login.url|$|">Login</a>
    				<div class="spaceMenu"></div>
    				<a class="linkColor" href="|$|_context.registration.url|$|">Register</a>
    				<div class="spaceMenu"></div>
    			</div>
    		
    			<div id="manageAccount" style="display: none">
    			<div class="headingTitle">
    				Manage My Account
    			</div>
    			<div class="headingText">
    				<a class="linkColor" href="controller.servlet?_misn=CSSNavigationMenu.MyProfile&service=form&_msn=CSSNavigationMenu
          &webappname=CandidateSelfService&_menunav=true&name=CSSCandidateProfile&bto=com.lawson.apps.Recruiting.Candidate_Manager
          &_susec=false&dataarea=|$|_context.dataarea|$|&panel=MyProfile&_frommenu=true">My Profile</a>
    				<div class="spaceMenu"></div>
    				<a class="linkColor" href="controller.servlet?service=list&webappname=CandidateSelfService&name=CSSJobApplicationList
         &bto=com.lawson.apps.Recruiting.JobApplication_Manager&_susec=false&dataarea=|$|_context.dataarea|$|
         &_frommenu=true">My Applications</a>
    				<div class="spaceMenu"></div>
    				<a class="linkColor" href="controller.servlet?service=list&webappname=CandidateSelfService&name=MyJobCartList
         &bto=com.lawson.apps.Recruiting.SavedJobPosting_Manager&_susec=false&dataarea=|$|_context.dataarea|$|
         &_frommenu=true">My Job Cart</a>
    				<div class="spaceMenu"></div>
    				<a class="linkColor" href="controller.servlet?service=_gen&webappname=CandidateSelfService&_skip=true
         &bto=com.lawson.apps.security.Identity_Manager&name=ChangePasswordWizardForm">Change Password</a>
    				<div class="spaceMenu"></div>
    			</div>
    			</div>
    			</div>

The remaining text is customizable. In the default welcome page, the sign-in links are embedded in a table cell in a two-column table. You can change that layout.

The images that are used for the welcome page and the sign-in page are located in styles/default/css/img/sso. You can change the images in the source or in the welcome.zip file.