A theme consists of UI elements such as logos, images, landing page text, background colors etc. WSO2 API Store comes with a default theme called
Fancy. The easiest way to change the user interface of the API Store is by customising the default theme.
All themes have the same folder structure as shown below.
Because the default theme already has most of the UIs and JSON logic defined, in a typical scenario, you do not implement a theme from scratch. You can customise the default theme by bundling up the changes (e.g., CSS code, images) as a .zip file and uploading it through the Admin Dashboard Web application. Once uploaded, the files in the .zip override the corresponding files in the default theme. The rest is inherited from the default theme.
Tip: You must only upload UI changes in the form of CSS code and images to override the default theme. Even if you upload JSON logic in the .zip file, it will not be applied due to security reasons.
Let's customise the default theme.
- Download the default theme (i.e.,
Fancy) from here, unzip it and rename the folder according to the name of your new theme (e.g., ancient). Let's call this folder the
- To change the logo of the API Store, replace the
logo.pngfile inside the
<THEME_HOME>/imagesfolder with this logo (or anything else of your choice.)
<THEME_HOME>/css/styles-layout.cssfile using a text editor and add the following CSS code to the end of the file. Note the code comments to get an idea what each line of code does.
- As you plan to upload this as a sub theme of the default main theme, delete all the files in your
<THEME_HOME>folder except the ones that you just edited. The rest of the files will be automatically applied from the main theme.
- Go inside the
<THEME_HOME>folder, select all the files/ folders inside it (Ctrl+A) and right click to archive all the selected files and folders together. Then rename the archive files to
- Log in to WSO2 Admin Dashboard Web application (api.cloud.wso2.com/admin-dashboard.) Your user name appears in the top, right-hand corner of the screen.
- The Admin Dashboard opens. Click the Upload Tenant Theme menu and upload your zip file.
Open the API Store and note that your UI customisations are applied.
In this tutorial, you applied a few selected UI changes to the API Store.