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 called Fancy
and a reference theme called Responsive
. You can extend the existing theme by writing a new one or customising customizing the existing one.
Note |
---|
The |
The folder structure of the API Store themes
...
Tip |
---|
Tip: How to customise a theme Themes Themes are located in the |
Let's see how to create a new theme and set it to the API Store:
Table of Contents | ||||
---|---|---|---|---|
|
Writing a sub theme of the main theme
Because a main theme already has most of the UIs and the syntax 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.
...