Versions Compared

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. 

...

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.

...

Themes are located in  <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes folder. In every theme you can find a CSS folder for a theme in it and it contains all the CSS files of that particular Store theme.

...