Changing the API Store's Theme

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. 

The folder structure of the API Store themes

The default theme of the API Store is called Fancy. You find it inside the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/fancy folder. If you do not have access to the file system, download the default theme from here. 

The easiest way to create a new theme is to copy the files of an existing theme to a folder by the name of your new theme, and do the modifications you want to the files inside it. All themes have the same folder structure as shown below:

You can add a new theme as a main theme or a sub theme.

• A main theme is saved inside the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes folder
• A sub theme is saved inside the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/<folder of the main theme>/subtheme folder. 
  

Because a sub theme is saved inside a main theme, it needs to contain only the files that are different from the main theme. Any file you add inside the sub theme will override the corresponding files in the main theme. The rest of the files will be inherited from the main 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. 

1. Download the default main theme from here 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 to red.

   .header-menu div.navbar-inner div.container-fluid{
   	background:red;
   } 

    

    

Go to <THEME_HOME>/site/pages folder where you find the pages of the API Store. These pages are common to all the themes. Duplicate the sign-up.jag file and rename it  to about.jag. 

Open the "about.jag" file you just created.

Adding the new theme to the Themes menu

Once you are done modifying the new theme, add it to the Themes menu in the API Store along with a thumbnail image as follows:

1. Open the <THEME_HOME>/templates/user/login/template.jag file and find the HTML table that defines the theme thumbnails. 

2. Add a new row to the table with the following markup. For example, we use this thumb-ancient.png as the thumbnail image of our theme. You can change it as you need.

   <tr>
   	<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>
   	<td>
   	</td>
   </tr> 

   
   

Setting the new theme as the default theme

You can set your new theme as the default theme in two ways:

• Using the file system
• Using the workflow admin Web application

If you have access to the file system,

 open the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/conf/site.json file and add the following code to it.

"theme" : {
        "base" : "fancy",
        "subtheme" : "ancient"
}

It specifies the base theme as fancy, which is overridden by the sub theme ancient. As you specify a subtheme element here, the base theme is overridden by it.  

If you do not have access to the file system, 

1. Bundle your theme folder, which is <THEME_HOME> into a ZIP file (e.g., ancient.zip).
2. Logging into the WSO2 Workflow AdminWeb application (https://<Server Host>:9443/workflow-admin) as the tenant admin.