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 contact@demo.com, 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="http://my.hub.com:8080/myPortal" >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.