Child pages
  • OpenAM 13.x UI Customization
Skip to end of metadata
Go to start of metadata

Taking Default OOTB UI and transforming it into Custom UI / Theme.

Note : I am using tomcat 7x and OpenAM 13.5.x deployed as "openam.war"

Quick Summary (See Details below)

Files that you will need

  1. ~/apache-tomcat7/webapps/openam/XUI/themes  (to create new themes)
  2. ~/apache-tomcat7/webapps/openam/XUI/config/ThemeConfiguration.js (to change themes, to change email and phone on login screen footer email)
  3. ~/apache-tomcat7/webapps/openam/XUI/locales/en/translation.json (to change copyright text on login screen footer)
  4. ~/apache-tomcat7/webapps/openam/config/auth/default_en/DataStore.xml (to change "Sign In to OpenAM" text, for each Auth module, seperate file needs editing)
  5. ~/apache-tomcat7/webapps/openam/XUI/templates/user/AnonymousProcessWrapper.html (to change "Return to Login" to "Return to Portal")


Detailed Steps :

Files that you will need to edit

  1. to create new theme 

    1. cd ~/apache-tomcat7/webapps/openam/XUI/themes

    2. cp "dark" to "demo" folder

    3. cd "demo/images", park your login-screen-logo and console-screen-logo(horizontal) here

    4. edit "demo/css/config.json" "demo/css/theme-dark.css" accordingly ( i have not played with these for my own tests) 

  2. to change the theme and footer (email and ph) on login screen

    1. backup ~/apache-tomcat7/webapps/openam/XUI/config/ThemeConfiguration.js

    2. edit ~/apache-tomcat7/webapps/openam/XUI/config/ThemeConfiguration.js 

    3. replace "fr-dark-theme" with "fr-demo-theme"
    4. replace word "dark" with "demo"
    5. under "mappings" section, add this line "{ theme: "fr-demo-theme", realms: ["/"] }". This will set the theme to root realm.
    6. search "mailto" and "phone" and change the values accordingly. say, 18008888888.
  3. to change copyright text on login screen footer

    1. backup ~/apache-tomcat7/webapps/openam/XUI/locales/en/translation.json
    2. edit  ~/apache-tomcat7/webapps/openam/XUI/locales/en/translation.json
    3. search for "copyright", replace key value to something relevant to your demo.
  4. to change "Sign In to OpenAM" text 

    1. backup ~/apache-tomcat7/webapps/openam/config/auth/default_en/DataStore.xml

    2. edit ~/apache-tomcat7/webapps/openam/config/auth/default_en/DataStore.xml

    3. change "Sign In To OpenAM" to Something that is relevant to your demo.
  5. to change "Return to Login" text after user-selfservice-flows

    1. ~/apache-tomcat7/webapps/openam/XUI/templates/user/AnonymousProcessWrapper.html

    2. edit ~/apache-tomcat7/webapps/openam/XUI/templates/user/AnonymousProcessWrapper.html

    3. replace <a id="anonymousProcessReturn" href="{{{urlTo 'login' args}}}" >{{t "common.user.returnToLoginPage"}}</a>
    4. with <a id="anonymousProcessReturn" href="" >Return To My Portal</a>

  6. NOTE : I have not changed the css files much to customize the background colors, button types, console look-n-feel. These instructions are just for the login screen.