Try WSO2 Cloud for Free
Sign in

All docs This doc
Skip to end of metadata
Go to start of metadata

In WSO2 Identity Cloud, you can add your own custom themes to the User Portal. This involves easily changing the color of the theme and the company logo on the header. Identity Cloud provides you with a user interface to upload or delete themes from the Admin Portal.

In this tutorial, you configure custom themes for the User Portal using Identity Cloud Admin Portal.

The following is a video of how this is done.

Before you begin

Before configuring custom themes, create a customized theme as a .zip file by maintaining the following file structure and file names. Also make sure your company logo image is in .png format.
|--- css/
      |--- appm-left-column-styles.css
      |--- appm-main-styles.css

|--- img/
      |-- logo.png

For this tutorial, the custom-theme file is used to demonstrate the feature. You can also use for any further customizing.

Now, let's begin.

  1. Log in to the Admin Portal and click User Portal Themes from left menu.
  2. Provide a Theme Name, click Browse to upload the .zip file (the .zip file that you created including CSS files and your logo), and click Save. The theme is applied to the User Portal.
  3. Navigate to the User Portal by either clicking the user portal link in the message or the Go to User Portal button on upper right corner of the page.

    You can see your new theme (i.e: ABC as company name) is applied in the User Portal

If you need to change the theme, delete the current theme and upload a new theme. You can also download the current theme from the Admin Portal and do any changes and upload it back.

Note: If you are doing any changes to the contents of the downloaded file (i.e., replacing the logo), make sure you compress the contents to make the .zip file before uploading.

  • No labels