Versions Compared

Old Version 6

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.

...