Versions Compared

Old Version 5

changes.mady.by.user Former user

Saved on

compared with

New Version Current

changes.mady.by.user Former user

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Change directory path -subtheme to subthemes github.com/wso2/product-apim/issues/1496

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.

...

  • A main theme is saved inside the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes directory
  • A sub theme is saved inside the <API-M_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/<main-theme-directory>/subthemesubthemes directory. 

As a sub-theme is saved inside a main theme, it needs to contain only the files that are different from the main theme. Any file that you add inside the sub-theme overrides the corresponding files in the main theme. The rest of the files are inherited from the main theme. 

...

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>/subthemesubthemes/<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 with the exception of the ones that you edited, because 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: 

Note

When uploading a sub-theme through the WSO2 APIM Admin Portal, WSO2 API Manager allows you to only add images and CSS in the sub-theme. The latter mentioned restriction is present in order to avoid migration issues and security issues that may arise for cloud users.

  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.