To-Do Theming Tenant Wise in WSO2 Identity Server. Try this!!
With older WSO2 Identity Server’s theming is bit static and its really hard to dynamically change the theming styles as per different requirements like application or service provider wise theming and tenant wise theming for login pages and portal.
But with the release of WSO2 Identity Server 5.10.0 we have introduced new extension point, where we can easily integrate different themes to the authenticationendpoint or recovery endpoint in the wso2is-5.10.0/repository/deployment/server/webapps folder. Lets checkout how you can do that.
Step 1: Create a folder called themes inside wso2is-5.10.0/repository/deployment/server/webapps folder.
Step2: Inside themes folder, create themes folders for each tenant with the tenant name. So that it will look like below.
Step3: You can add matching css, styles, headers.jsp, footer.jsp, images for each tenant in the same format under its tenant name’s folder. For example, here I have a tenant called abc.com and wso2.com, so I have created two folders called “abc.com” and “wso2.com” inside the themes folder and added matching jsps and styles.
Step 4: In the login.jsp file, to add change the matching JSP per tenant, you can add a small JSP logic as below. You can get the tenant domain from the request and based on the tenant domain you can insert the matching header.jsp file. If there is no such file, you can show the default folder’s header.jsp file.
<%
<!-- new-header - start--> String tenantDomain = request.getParameter("tenantDomain");
if (!tenantDomain.isEmpty()) {
String themeHeaderFile = "themes/" + tenantDomain + "/includes/header.jsp";
File headerFile = new File(getServletContext().getRealPath(themeHeaderFile));
if (headerFile.exists()) {
%>
<jsp:include page="<%= themeHeaderFile %>" />
<% } else { %>
<jsp:directive.include file="themes/default/includes/header.jsp" />
<% } %>
<% }%><!-- new-header - end -->
<!-- header - existing- start-->
<%-- <%--%>
<%-- File headerFile = new File(getServletContext().getRealPath("extensions/product-title.jsp"));--%>
<%-- if (headerFile.exists()) {--%>
<%-- %>--%>
<%-- <jsp:include page="extensions/header.jsp"/>--%>
<%-- <% } else { %>--%>
<%-- <jsp:directive.include file="includes/header.jsp"/>--%>
<%-- <% } %>--%>
Comment out the existing hear part and add the new header part as mentioned above.
Step 5: Restart the server and you will see the changes in the login page when you move from one tenant’s user-portal to the other. This will give the same look and feel for a tenant.
tenant domain: default for carbon.super
Similarly, you can use your CSS knowledge to theme your WSO2 Identity Server tenant wisely easily with our new extension points.
Please note my CSS is .. bit bad :), Wanted to show you that we can do this :) !!!
Hope you enjoy!!
