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. Navigate to the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/wso2/subthemes directory.
   This folder has all the sub-themes that correspond to the Store.
   
2. Make a copy of the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/wso2 directory and move the copied folder to the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/wso2/subthemes directory.
3. Rename this newly added folder based on

   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>.
   

   Navigate to the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/wso2/subthemes/<THEME_HOME> directory and carryout the following actions.

4. Delete the subthemes folder.

Delete the any other folders and/or files that you do not plan on customizing.


TipThe hierarchy of your folder structure, which is within your customized sub theme folder, should be similar to the folder structure of the main WSO2 Store theme, which is in the

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.

However, you do not need to maintain folders and/or files that you do not plan on customizing.

 

5. 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.

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

...

If you do not have access to the file system, you can upload the theme through the Admin Portal as shown below: 

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.