Branding and Localization of the OSP Login Page

Branding and Localization of the OSP Login Page

Before OSP was introduced the customization of the IDM login page was a quite simple task through the administrative UI of the User Application.

But now, when using OSP to enable single sign on to all the user web services the login page is no longer provided by the User Application, but by OSP.

Whenever I present the IDM 4.5 Webservices to a customer one of the first questions coming up is: Can we change the login page to match the corporate identity? In this case changing means two things: Branding and Localization. Unfortunately the official documentation only provides (limited) Information on branding – but nothing regarding localization.

With the help of support and the forum I was able to figure out, that both is possible and at the end of the day not even hard.

Think about the following scenario: We want to change the logo and a few strings like in the following example.

CustLoginPageEN

In this example I changed the logo, the headline and the text of the shortcut to the forgotten password service.

Before we start we need a few things:

  • An installed JDK (to get the jar program)

  • osp-conf.jar from /opt/netiq/idm/apps/osp-sspr/osp

  • A new logo (transparent png file)

  • Stop idm Webapps

  • Make a backup!



First the branding


 

According to branding you can change the global style of the page including the logo, font types, font sizes, positions etc. – but no strings! All these changes are done by introducing a custom css for the login page.

To create a custom css file first copy the osp-conf.jar file to a temporary work directory like work/osp-conf.

Within this directory use the jar program to extract the file. After extracting the jar file delete the file. In your work/osp-conf directory you will find a css/login.css file. Take this one as a template for your custom file by creating a copy like CustLogin.css in your work directory (not work/osp-conf ! )

Edit the CustLogin.css and search for the following section:

 .logo {
background-image: url('/osp/images/netiq_logo_small.png');
float: right;
width: 77px;
height: 25px;
}


The URL here refers to the standard logo used on the login page. Change this to a URL available on your tomcat server. I would suggest to put all customizations to an individual war file to ensure your content is not altered during a patch or something. (I will describe later how to do this)

So for example change the URL to “/cust/images/ACMECorp_med.png”

If you are familiar to css you can do more changes in the custom css file if needed.

To make both the custom logo and the custom css file available we will place them in a new war file.

Create the following directory structure in your work directory:

cust/

cust/osp

cust/images

Then place the logo in /cust/images and the custom css file in cust/osp.

To create the war file execute the following command from within the cust directory:

jar –cvf ../cust.war .

After this copy the cust.war file to your $TOMCAT_HOME/webapps directory.

The last thing we have to do according branding is to configure osp to use the custom css. This can be done by executing configupdate.sh from /opt/netiq/idm/apps/UserApplication.

configupdate

Change to Authentication and enable Advanced Settings. After that is done you are able to configure the URL to the custom css for the login page.

Delete everything under /$TOMCAT_HOME/work/Catalina and $TOMCAT_HOME/webapps/ops.

After restarting the Webservices you should see the new logo and all other changes you did to the css on the login page.


Localization


 

All the strings on the login page are subject to localization. This means the strings can be changed depending on the browser language configured.

If you go back to your extracted osp-conf.jar file you can find property files for a couple of languages under WEB-INF/classes. To change the strings for a browser configured to use English as a preferred language you have to modify the file oidp_custom_resources_en_US.properties.

In my example I changed the file like this:

idm.product.name=ACME User Applications
idm.username=Username
idm.username.hint=Enter your username
idm.username.secondary=Email
idm.username.secondary.hint=Enter your email address
idm.username.secondary.needed=More information is needed.
idm.password=Password
idm.password.hint=Enter your password
idm.login=Login
idm.password.forgot=Forgoten or expired password?


Change the property file for any language you need. After you changed all localization files run the following command from your osp-conf directory:

jar –cvf ../osp-conf.jar .

copy the new osp-conf.jar file to /opt/netiq/idm/apps/osp-sspr/osp to replace the existing file.

Stop the IDM Web application with /etc/init.d/idmapps_tomcat_init stop

Delete everything under /$TOMCAT_HOME/work/Catalina and $TOMCAT_HOME/webapps/ops.

Start the IDM Web application with /etc/init.d/idmapps_tomcat_init start.

That's all.

DISCLAIMER:

Some content on Community Tips & Information pages is not officially supported by Micro Focus. Please refer to our Terms of Use for more detail.
Comments
Hello,
Thanks for the information.
Unfortunatly, I followed your document and the login page does not change at all:
- The cust.war is deployed and the files are availabled
- The user application was updated with configupdate (ism-configuration.properties looks ok)
- Catalina and osp were cleaned up and tomcat restarted.

Maybe I did something wrong, any idea ?

(I'm using idm 4.5.2)

Thanks a lot

Sylvain
Hello,

Finally, It works fine.
There was mispelling in my custom css login file and the image file was to large.
Thanks againg to publish this cool solution.
Sylvain
Hi,

Apparently, the latest OSP patch 6.0.0.3 has broken the branding.

The login image has changed to a different images and the custom login.css is not used.

I found that the new osp-conf.jar has no longer login.css inside and that there are new files like osp-custom-resource.jar .

I Did not find the solution yet.

Do you have any update ?

thanks
Hi sma,

I'm working on the branding with this new update myself.

So far what I've found based on the readme and some experimentation:

1. The osp-custom-resource.jar is a customization template to modify strings, add css style-sheets, branding images and js scripts to OSP.
2. After copying and extracting the content of osp-custom-resource.jar (using 'jar xvf osp-custom-resource.jar') you can customize the OSP strings in the oidp_enduser_custom_resources_{lang}.properties (where {lang} is the language to be displayed) files located inside the resources folder. These files also contain a property for the branding image to be used. The image you are going to use has to be located inside the images folder.
3. Once you have finished your customization you have to update (not re-create) the osp-custom-resource.jar file. This update can be done by file or by whole folder. If by file, for example for an image named my_logo.png, you would use 'jar -0uf osp-custom-resource.jar images/my_logo.png'. For a whole folder, for example for the properties files, you would use 'jar -0uf osp-custom-resource.jar resources/*'. What I found is that if you use the -uf switch the jar will be compressed and the original jar isn't, so I added the 0 switch (that's a zero). I did this in windows so I don't know if it's the same in linux.
4. Once done with the customization you have to copy the new osp-custom-resource.jar file to the tomcat/lib folder in your server and then restart tomcat.

And that's that. I still have to figure out how to tweek the image a little bit.

I hope this helps.

Regards
Two things I forgot to mention:

You must fix the owner of osp-custom-resource.jar to be novlua and you probably will have to clean the work and temp directories of your tomcat server.

Regards!
Run into the problem today -
The customization of the strings is not so hard - after finding out which string to modify 😉

But I do not have any clue yet how to introduce in image (corporate logo)

Regards
Hello.
First of all thanks for your Cool Solution. Helped me a lot to localize where to change the OSP Strings. Unfortunately i face some Problems with the structure and Location of the correct strings for Login page.

As mentioned in the tutorial, the strings should be under WEB-INF/classes named "oidp-custom-resources_xx.properties".
Yes there are files named like this in the osp-conf.jar but under "WEB-INF/resources/custom/idm/" and These files only contain 2 key-value entries.

Furthermore I found other files which is located in /opt/netiq/idm/apps/osp_sspr/osp/l10n-resources named "osp-conf-strings.jar" and "osp-strings.jar".
Inside "osp-conf-strings.jar" i found the Folder which was mentioned in the first post and the related localization files under "classes".

Can anybody help me find out what to do with those separate files as nothing happens when I change the locales and deploy them.

Thanks a lot!
Find more Details in the update docs:

http://download.novell.com/Download?buildid=O5ptOLoXiDY~&patch_redirect=true&old_patch=7yPSSOwnMG4~#b1hntum5

There also is some Forum discussion here: https://forums.netiq.com/archive/index.php/t-55268.html
Top Contributors
Version history
Revision #:
1 of 1
Last update:
‎2015-06-25 16:42
Updated by:
 
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.