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. 

...

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

Customizing 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 for a theme and it contains all the CSS files of that particular Store theme.

You can change the styles and colors of the Store theme according to your preference by changing CSS files of the existing theme.

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", "© 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.

...

1. Open the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/fancy/templates/user/login/template.jag file and find the HTML table that defines the theme thumbnails.

Add a new row under the <table> element with the following code. It adds thumb-ancient.png as the thumbnail image of our theme. Be sure save the image in the ...fancy/images folder.

<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 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 for a theme and it contains all the CSS files of that particular Store theme.

You can change the styles and colors of the Store theme according to your preference by changing CSS files of the existing theme.