Page Comparison

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.

The folder structure of the API Store themes

...

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", "© Copyright 2011 – 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
   language css
   .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.

...

<td>
    <div class="thumbnail <% if(jagg.getUserTheme().base == "fancy" && jagg.getUserTheme().subtheme == "ancient") { %>currentTheme<% } %>">
        <a data-theme="fancy" data-subtheme="ancient" class="badge themeLabel" onclick="applyTheme(this)">
             <img src="<%=jagg.getAbsoluteUrl(jagg.getThemeFile("images/thumb-ancient.png"))%>" />
             <br /><div class="themeName">Ancient</div>
         </a>
    </div>
</td>

Customizing an existing theme

You can change branding by customizing the existing theme used by API Manager Store.

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

...