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:
- 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>.
- 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.) - 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", "© Copyright 2011 – 2014 My Company." 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 language css .header{ background:#7e3330; }
- 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.
...