Versions Compared

Old Version 20

changes.mady.by.user Former user

Saved on

compared with

New Version 21

changes.mady.by.user Former user

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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. 

...

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

Table of Contents
maxLevel3
minLevel3

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>/t emplates/page/base/t emplate.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", "&copy; Copyright 2011 &ndash; 2014 My Company." 

  4. To change the header's b ackground color, open the <THEME_HOME>/c ss/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.

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

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 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  <THEME_HOME>/images  folder.

    Code Block
    languagexml
    <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:

Saving directly in the file system

  1. If you have access to the file system, save the <THEME_HOME> folder inside the  <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/fancy/subtheme  folder. This will make your new theme a sub theme of fancy. 

  2. Open the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/conf/site.json file and add the following code to it. It specifies the base theme as fancy, which is overridden by the sub theme ancient.

    Code Block
    "theme" : {
        "base" : "fancy",
        "subtheme" : "ancient"
}
  3. Open the API Store and note the new theme applied to it.

Uploading through the Admin Dashboard

If you do not have access to the file system, you can upload the theme through the Admin Dashboard Web application ( https://<Server Host>:9443/admin-dashboard ). For example, assume you are a WSO2 Cloud user. 

...