June 23, 2017 at 8:55 pm #17788
With the classic UI one can simply completely rebrand the login page by altering Login.jsp.
We want to continue using the XUI but want to completely rebrand (new layout, CSS, etc) it with WET 4.0 (Web Experience Toolkit) for the Government of Canada.
While I understand the XUI is built differently – what is the main page or place to start completely rebranding the UI?
–NikolaosJune 23, 2017 at 9:32 pm #17790FrotonisParticipant
Hi, you can implement your own implementation of UI by using REST api, which is behind XUI implementation by OpenAM. While you are able to handle json/authenticate response and build your login stage by callbacks returned from response. You can completely use your own solution.June 26, 2017 at 5:24 pm #17806
Thanks for that information but I don’t want to build a completely different UI to XUI.
I want to simply completely alter the L&F of the existing XUI… more than just changing colors here and there (e.g. switching to a dark them or replacing a logo). I need to completely change the layout of the page.
It appears the XUI is built on html fragments from what I read so perhaps this is pretty easy and I just need to find the main Login container page. Does anyone know where that is offhand?June 27, 2017 at 6:49 am #17809handatParticipant
You can do that by altering the css. You didn’t specify the version you are using, but the latest version even has a dedicated document about how to customize the XUI, please refer to the AM-5.1-Ui-Customization-GuideJune 27, 2017 at 5:03 pm #17826
I am using version 13.5 and I need to change the HTML as well and not just the CSS.June 29, 2017 at 7:29 pm #17863
The AM-5.1-Ui-Customization-Guide is almost identical to the docs in 13.5 and moreover has a section entitled “Customizing XUI Layout” that basically indicates how to update a component (a password field to have an <hr>) and leverage a new theme.
Unfortunately this isn’t “customizing XUI layout” but rather tweaking HTML and CSS. From what I am seeing I don’t think the XUI can be easily completely rebranded (beyond just CSS and images) without making some major changes and I wouldn’t mind doing it if I only knew what the root login page was under the XUI.
Does anyone know the root HTML page the XUI uses for the login page?June 30, 2017 at 11:32 am #17866Andy CoryParticipant
The ForgeRock engineers who designed the XUI would know better than I, but I think a complete re-working of the XUI is going to be rather difficult and error-prone, beyond the change of theme capability built in to XUI. I know you said you didn’t want to build an alternative UI driving OpenAM by REST, but it honestly may be less work to do that.
AndySeptember 25, 2017 at 7:45 pm #18963
So there is an “index.html” page under the XUI folder. The only issue is that page is used for not just the Auth Module UI but also for the OpenAM Admin console.
In the end I re-branded that HTML and got what I needed for about 80%. When logging in to OpenAM Admin console the rebranding did not come up (most likely as the dirs are relative) but worse yet I had some SVGs that appeared oversized so I extended the the XUI common components Footer.js to configure a JS function and timeout to execute on page load and if it was not an Auth Module UI page to disable the CSS display of the broken branding.
Not the easiest thing to do but works well.
You must be logged in to reply to this topic.