Versions Compared

Old Version 21

changes.mady.by.user Former user

Saved on

compared with

New Version 22

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. 

...

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>/templatestemplates/page/base/templatetemplate.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 background background color, open the <THEME_HOME>/csscss/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;
}

...

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.

...