Stylesheets and graphics
As a Master administrator, you have the ability to specify custom stylesheets and graphics to meet your company's needs. The system uses cascading stylesheets to specify the fonts, colors and styles used for the pages.
HRMS Employee Self Service also includes 173 x 119 pixel graphics on the top left corner of the logon page, the message center page, and each top-level menu item. You may replace these photos with a graphic of your choice (such as your company logo).
Custom stylesheets and custom graphics are placed in the CustomFiles folder on the web server where HRMS Employee Self Service is installed.
About stylesheets
You can use only one stylesheet for the logon page, but you can use a separate stylesheet for the system pages for each employer you want to customize. To change the color scheme or other items consistently throughout the system, you must modify both the logon page stylesheet and the system pages stylesheet.
The following table shows the default stylesheets delivered with the system. They are located in the ...\Web\CSS folder on the web server where HRMS Employee Self Service is installed.
Default stylesheet |
Description |
---|---|
AbraDefaultBlueLogin.css |
blue theme used for the logon page |
AbraDefaultGreenLogin.css |
green theme used for the logon page |
AbraDefaultRedLogin.css | red theme used for the logon page |
AbraDefaultPurpleLogin.css | purple theme used for the logon page |
AbraDefaultBlue.css |
blue theme used for the system pages |
AbraDefaultGreen.css |
green theme used for the system pages |
AbraDefaultRed.css | red theme used for the system pages |
AbraDefaultPurple.css | purple theme used for the system pages |
Tips:
- You should never modify the original stylesheet. Make a copy before you modify it.
- You should have experience with modifying stylesheets before you make changes.
- Open the default logon stylesheet that you want to customize and save a copy of it to your computer with a different file name (such as ZSI_logon_stylesheet.css).
-
Open the copied .CSS file in an editor (such as Notepad or FrontPage), customize it, and save the file.
Note: The stylesheet must contain all styles, regardless of whether the styles are to be used for Employee Self Service or Benefits Enrollment.
- Select System Administrator > Styles and Graphics > Load to Server to open the Load to Server page, and then upload the file to your HRMS Employee Self Service server.
-
Select System Administrator > Styles and Graphics > Customize Logon Page to open the Customize Logon page, and then select the new logon stylesheet.
The logon page will now reflect the changes made in your custom stylesheet.
- Open the default system stylesheet that you want to customize and save a copy of it to your computer with a different file name (such as ZSI_stylesheet.css).
-
Open the copied .CSS file in an editor (such as Notepad or FrontPage), customize it, and save the file.
Note: The stylesheet must contain all styles, regardless of whether the styles are to be used for Employee Self Service or Benefits Enrollment.
- Select System Administrator > Styles and Graphics > Load to Server to open the Load to Server page, and then upload the file to your HRMS Employee Self Service server.
-
Select System Administrator > Styles and Graphics > Customize Employer to open the Customize Employer page, select an employer, and select the new stylesheet.
The system pages will now reflect the changes made in your custom stylesheet.
- If you have more than one employer, repeat this process for each employer if you want them all to use the same stylesheet.
About graphics
Each custom graphic must be 173 pixels wide by 119 pixels high.
- You can use only one custom graphic for the logon page.
- You can use separate custom graphics for the system pages for each employer you want to customize.
- (Optional) You can place a custom graphic on the Message Center page only (and use the provided graphics on other pages).
- Create a graphic 173 pixels wide by 119 pixels high in an image-editing program (such as Adobe Photoshop) and save the file as either a .JPG or .GIF file.
- Select System Administrator > Styles and Graphics > Load to Server to open the Load to Server page, and then upload the file to your HRMS Employee Self Service server.
-
Select System Administrator > Styles and Graphics > Customize Logon Page to open the Customize Logon page, and then select the new graphic.
The logon page now shows the new logon graphic.
- Create a graphic 173 pixels wide by 119 pixels high in an image-editing program (such as Adobe Photoshop) and save the file as either a .JPG or .GIF file.
- Select System Administrator > Styles and Graphics > Load to Server to open the Load to Server page, and then upload the file to your HRMS Employee Self Service server.
- Select System Administrator > Styles and Graphics > Customize Employer to open the Customize Employer page, select an employer, choose to display the graphic on all system pages or only on the Message Center page, and then select the new graphic.
- If you have more than one employer, repeat this process for each employer if you want to customize the graphics on their pages.