Customizing homepages with HomePages.zip

You can customize the appearance and contents of the home pages for any of the common roles, such as employees, generalists, managers, mentors, or recruiters.

The home pages found in the HomePages.zip file are HTML files that look and behave the same way as the default LPL application start pages. You can customize the content in these HTML pages as needed.

Modifying these files requires a basic understanding of the concepts of Cascading Style Sheets and JavaScript, including JavaScript objects and basic JSON. Do not remove the reference to commonUtilities.js in the HTML files.

For small changes such as adding or removing icons, use Configuration Console. See Configuring customized application start pages with Configuration Console.

Before you begin, review the contents of the HomePages.zip file. See The HomePages.zip folder structure.

Configurable options Files or folders to configure
Define fonts, colors, and links to images /styles/commonWebApp.css
Change the favicon /styles/default/css/img

To change the favicon, copy your favicon.ico file to the /styles/default/css/img directory.
Adjusting image icons for quick links /images

*.html

See Configuring and deploying customized homepages with HomePages.zip.

Place the new image file inside the /images folder. Note the name of the image file with its extension.

Look for the <a> element in the HTML file to change and replace the style attribute:

style="background-image:url('../resources/images/<name of file>.<extension>')"
Removing a quick link *.html

See Configuring and deploying customized homepages with HomePages.zip.

For example, Removing the Opportunities link.

Look for the <a> element corresponding to the Opportunities link. The entire code block must be deleted to remove the quick link.

<div class="cell">
 <a target="" onclick="navigateTo('/page/EmployeeCareerPage')" class="layerIcon inforHyperlink headerText" style="background-image:url('../specimage/opportunities')">Opportunities</a>
 <span class="labelText">See a list of open jobs.</span>
</div>
Adding a new external quick link /images

*.html

See Configuring and deploying customized homepages with HomePages.zip.

Add a custom image to the images folder in the HomePages.zip file.

Look for the <div class=“content”> element. Within this HTML element, you can append a new quick link. For example:

<div class="cell">
  <a target=“https://infor.com" class="layerIcon inforHyperlink headerText" style="background-image:url(‘<new image file>.<extension>')">Search</a>
  <span class="labelText">Go to Company Home Page</span>
</div>
Adding a custom banner to the top of a home page /images

styles/commonWebApp.css

*.html

See Configuring and deploying customized homepages with HomePages.zip.

See "Example to add a banner with a background image to the top of a home page."

Example to add a banner with a background image to the top of a home page

To add a banner with a background image to the top of a home page, add a custom background image to the images folder in the HomePages.zip file.

Create HTML content for a banner that uses the custom background image. Make sure that the image is loaded from the HomePages.zip file by adding ../resources to the beginning of the URL.

Insert the HTML markup for the banner to the top of the <div class="scrollArea"> element in a home page.

<div class="scrollArea">
	<div id="bannerContainer">
		<div class="banner">
			<div class="bannerImage" style="background-image:url('../resources/images/<new image file>.<extension>')"></div>
			<div class="bannerContent">
				<div class="bannerHeader">Welcome to your Employee Experience.</div>
				<div class="bannerMessage">
					Explore our employee portal to see how we're making it easier to maximize your wellness and productivity on the job.
				</div>
			</div>
		</div>
	</div>
</div>

Add CSS to the styles/commonWebApp.css file to style the banner. 

.scrollArea div#bannerContainer {
    height: 220px;
    width: 100%;
    margin-top: 0;
	padding: 0;
}
.scrollArea div.banner {
    height: 220px;
    width: 100%;
    margin-top: 0px;
    background-color: #0073E7;
    position: absolute;
    text-align: left;
}
.scrollArea div.bannerImage {
    height: 100%;
    width: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.scrollArea div.bannerContent {
    max-width: 1000px;
    height: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 20px 55px 0;
}
.scrollArea div.banner div.bannerHeader {
    color: #FAFAFA;
    font-size: 24px;
    font-weight: bold;
    margin: 15px 0 5px;
}
.scrollArea div.banner div.bannerMessage {
    color: #FAFAFA;
    font-size: 20px;
    font-weight: normal;
    max-width: 500px;
    display: inline-block;
    position: absolute;
    padding: 0px;
    margin: 0px;
    height: calc(100% - 30px);
}