Versions Compared

Old Version 6

changes.mady.by.user Former user

Saved on

compared with

New Version 7

changes.mady.by.user Former user

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes folder
  • A sub theme is saved inside the the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/<folder of the main theme>/subthemes folder. 

Because 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 you add inside the sub theme will override the corresponding files in the main theme. The rest of the files will be inherited from the main theme. 

Tip

Tip: How to customise a theme

Themes are located in the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes folder. Inside the themes folder, you get separate folders for each theme, typically by the name of the theme (e.g., fancy). Inside these individual theme folders, you get CSS folders that contain the CSS files of those themes. To customize an existing theme, you change these CSS files.

Let's see how to create a new theme and set it to the API Store: 

Table of Contents
maxLevel3
minLevel3

Writing a sub theme of the main theme

...

Because a main theme already has most of the UIs and 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 call this folder the <THEME_HOME>.
  2. To change the logo of the API Store, replace the logo.png  file inside the <THEME_HOME>/images folder with this logo (or anything else of your choice.)
  3. To change the copyrights note in the footer, open the  <THEME_HOME>/templates/page/base/template.jag  file using a text editor, search for the word "Copyright"  and change the text. For example, let's add our company name as "copyright", "&copy; Copyright 2011 &ndash; 2014 My Company."

  4. To change the header's background color, open the <THEME_HOME>/css/styles-layout.css file using a text editor and add the following CSS rule to the end of the file. It changes the header color.

    Code Block
    languagecss
    .header{    
    background:#7e3330;
}
  5. 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 edited. The rest of the files will be automatically applied from the main theme.

...