UI customization is now simple with IS 5.9.0 release.
With the latest release of IS 5.9.0, we are presenting you with easy UI customization of all the UIs in WSO2 Identity Server. If you have heard of this and if you really need to try this, this is your chance!!
Through this blog, I am trying to show you how I customized all the UIs of Identity Server easily with some little effort by adding CSS given by our UX team. If you are really bad at UX work, this new extension will make give you a masterpiece in simple three steps.
In WSO2 Identity Server 5.9.0, all the UIs are present in authenticationendpoint and accountrecoveryendpoint web apps in <IS-Home>/repository/deployment/server/webapps folder. Please follow the below steps to customize these pages easily.
Step 1: Create a new extension folder inside these two web apps.
Create a new folder called extensions inside these two web apps (authenticationendpoint and recoveryendpoint). This folder will contain the customized JSP files with your custom CSS.
Step 2: Copy the existing header.jsp and footer.jsp files from “includes” folder inside the web app to the “extensions” folder.
Each web app, now you can see a folder called “includes’ which contains header.jsp and footer.jsp file. In the next step, we are going to override these two files with our custom UI changes by creating a similar file in extensions. Hence we need to get copy header.jsp and footer.jsp files to extensions folder.
Step 3: Create basic CSS styles need for UI
With the help of a UX guy, you can figure out basic CSS need to override the existing CSS.
<style type="text/css">body {
background: #1e1e2f;
color: #ffffff;
}.logo-container {
padding: 15px 30px;
}header .brand img.logo {
height: 40px;
}.wr-title {
background: #32344e !important;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}.header {
border-top: 3px solid #1e8cf8;
background: #1e1e2f;
min-height: 70px;
border-bottom: 1px solid #31314b;
}
.....a:hover,
a:active {
color: #3a9dff;
}
</style>
Step 4: Edit the footer.jsp and header.jsp in extensions folder as follows,
- Add includes to the header.jsp
authenticationendpoint — add to top of the header.jsp file.
<%@include file=”../localize.jsp” %>
<%@include file=”../init-url.jsp” %>accountrecoveryendpoint — add to top of the header.jsp file.
<%@include file=”../localize.jsp” %>- Add styles created in step 3 to the header.jsp in both web apps inside the header tag as shown in the file .
- Add the company name to the footer.jsp in both web apps as shown in the sample file.
Once you complete all four steps you are done with customizations. You don’t need to restart your server as these files will hot deploy. Hence, you can refresh the browser and view your new UIs.
For the demonstration, I have created a header.jsp and footer.jsp file for both endpoints as in https://github.com/GDRDABARERA/UI_Extension_IS5.9.0
Once you add these extensions folders to your endpoints you can view as follows:
One advantage of following this approach is WUM update will not affect your UI changes and you need not worry about manually adding your custom changes.
I hope this will help you to customize your Identity Server without any issue. Please let me know if you need any further help!!
Special thanks go to Ayesha Dissanayaka and @brionmario of the WSO2 IAM team.
