Customizing WSO2 Identity Server UIs¶

From WSO2 Identity Server 5.9.0 onwards, a new UI extension has been introduced to easily customize the basic user interfaces like login page, username and password recovery pages, and single sign-on pages.

All these UIs are available in the authenticationendpoint and accountrecoveryendpoint web apps that are located in the <IS_HOME>/repository/deployment/server/webapps folder. To customize these pages, follow the steps below.

Step 1: Create the extensions folder¶

1. Navigate to the <IS_HOME>/repository/deployment/server/webapps/authenticationendpoint folder and create a new folder called extensions.

   Info

   You will be adding the customized JSP files along with the custom CSS files into this new extensions folder.

2. Similarly, navigate to the <IS_HOME>/repository/deployment/server/webapps/accountrecoveryendpoint folder and create an extensions folder.

Step 2: Copy the existing header and footer content¶

In order to customize the header and footer content of the web applications, first you need to copy them to the newly cerated extensions folders.

1. To copy the header and footer content of the authenticationendpoint web application:

   1. Navigate to the <IS_HOME>/repository/deployment/server/webapps/authenticationendpoint/includes folder.

   2. Copy the header.jsp and footer.jsp files into the <IS_HOME>/repository/deployment/server/webapps/authenticationendpoint/extensions folder.

      Note

      The header.jsp and footer.jsp files have the capability to override the corresponding files in the includes folder.

2. Similarly, copy the header and footer content of the accountrecoveryendpoint web application.

Step 3: Create styling¶

Create the basic CSS styles that are required to override the existing UI styling.

<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 existing header and footer content¶

To add footer.jsp and header.jsp in extensions folder as follows:

1. To edit the header content of the authenticationendpoint web application:

   1. Open the header.jsp file in the /repository/deployment/server/webapps/authenticationendpoint/extensions` folder.

   2. Add the following includes:

   <%@include file=”../localize.jsp” %>
   <%@include file=”../init-url.jsp” %>

   1. Add the styles that you created in Step 3 inside the header tag as shown in the sample file.

2. To edit the footer content of the authenticationendpoint web application:

   1. Open the footer.jsp file in the /repository/deployment/server/webapps/authenticationendpoint/extensions` folder.

   2. Add the company name as shown in the sample file.

3. Similarly, you can customize the accountrecovery web application header and footer.

   Note

   Make sure to add the following include to the top, when editing the header.jsp file of the accountrecovery web application.

   <%@include file=”../localize.jsp” %>

4. Refresh the browser and check out the customized header and footer content.