Page Comparison

A theme consists of UI elements such as logos, images, copyrights messages, landing page text, background colors etc. WSO2 API Store comes with a default theme. You can extend the existing theme by writing a new one or customising the existing one.

...

As a main theme already has most of the UIs, the syntax, and logic of Jaggery code defined, in a typical scenario, you do not have to implement a theme from scratch. Rather, you just add in your edits as a sub-theme of the existing main theme as given below: 

1. Download the default main theme from here, unzip it, and rename the folder according to the name of your new theme (e.g., ancient). Let's refer to this folder as <THEME_HOME>.
   The downloaded file contains the same files and folders that are available in the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/wso2 directory. 

2. Add your changes to your sub-theme.

   For example, make the following changes in the CSS styles in the <THEME_HOME>/css/custom.css file using a text editor and save.

   1. Add the following code to change the color of the header to red.

      Code Block
      header.header-default{ background:red !important; }

   2. Update the color given for the search box to #0be2e2.

      Code Block
      .search-wrap>.form-control, .search-wrap .btn.wrap-input-right { background-color: #0be2e2; border: 0px; color: #FFF; height: 40px; margin-top:-3px; }

   Note
   The custom.css file related to the sub-theme should always have the entire set of CSS styles. Therefore, do not delete the code related to the CSS styles that you have not changed in the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/<main-theme-directory>/subtheme/<sub-theme>/css/custom.css file.

3. As you plan to upload the theme as a sub-theme of the default main theme, delete all the files and folders in your <THEME_HOME> folder except with the exception of the ones that you edited. The , because the rest of the files are automatically applied from the main theme.

...

1. Save the <THEME_HOME> folder that contains the sub-theme of the main theme inside the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/wso2/subthemes folder. This makes your new theme a sub-theme of the main wso2 theme. 

2. Open the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/conf/site.json file, and add the following code to it. It specifies the base theme as wso2, which is overridden by the sub-theme ancient.

   Code Block
   "theme" : { "base" : "wso2", "subtheme" : "ancient" }

3. Open the API Store.
   Note the new theme that is applied to it.
    

...

1. Navigate inside the <THEME_HOME> folder that contains the sub-theme of the main theme, select all the folders inside it, and right-click to compress all the selected files and folders. Then rename the ZIP file based on the name of your sub-theme. For this example use the ancient.zip file.

2. Sign in to the WSO2 Admin Portal (https://<server-host>:9443/admin) with your tenant username (format <username>@<domain>.com kim@testorg.com) and password.
3. Expand the Settings menu, click Upload Tenant Theme and upload your ZIP file.
   
4. Access the API Store ( https://<server-host>:9443/store) using your tenant username and password.
   Note the new theme that is applied.