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.

...

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:

...

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>/subthemesubthemes 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.

...

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:

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>.
To change the logo of the API Store, replace the logo.png file inside the the <THEME_HOME>/images folder with this logo (or anything else of your choice.)
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."
To change the header's background color, open the Open the <THEME_HOME>/css/styles-layout.css file using a text editor and add the following CSS rule code to the end of the file. It changes the header colorNote the code comments to get an idea what each line of code does.
Code Block
language css
/* Change the color of the header */ .header{ background:#7e3330#002EB8; }
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.

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:

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

Code Block

language	xml

<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>
/* Change the font of the menus, headings, labels etc. to Verdana. You give several fonts here to ensure maximum compatibility, if in case one font fails in a given browser/OS. Fonts will be applied in the order you list them.  */
body,textarea,pre,.navbar-search .search-query{
    font-family: Verdana, Arial, Helvetica, monospace, san-serif;
}
label, input, button, select, textarea{
    font-family: Verdana, Arial, Helvetica, monospace, san-serif;
}
h1,h2,h3,h4,h5{
    font-family: Verdana, Arial, Helvetica, monospace, san-serif;
}
/* To change the background color of the body */
body{
    background:#D6DEF6;
}
/* To change the color of the buttons. Note that changing only the background color will not have a visual impact if you leave the gradients as they are  */
.btn-primary {
  background-color: #800004;
  background-image: linear-gradient(to bottom, #cc0022, #cc0044);
}
/* To change the colour of the menus, navigation elements when they are clicked */
.menu-content .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background:#F0F3FC;
}

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.

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

If you have access to the file system,

...

do the following:

Save the <THEME_HOME> folder inside the <APIM_HOME>/repository/deployment/server/jaggeryapps/store/site/themes/fancy/subtheme subthemes folder. This will make your new theme a sub theme of fancy.
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" }
Open the API Store and note the new theme applied to it. Image Removed
Image Added

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.as shown below:

Go inside the <THEME_HOME> folder, select all the folders inside it and right click to archive all the selected files and folders together. Then rename the archive files to ancient.zip.
Log in to WSO2 Admin Dashboard Web application using the URL URL https://<Server Host>:9443/admin-dashboard.
For example, if you are a WSO2 Cloud user and want to upload a new theme, log in to the URL api.cloud.wso2.com/admin-dashboard. Give your user with the user name as email@domain with the @ in the email replaced by a dot (e.g., john.gmail.com@MyCompany).
Click the Upload Tenant Theme menu and upload your zip file.
Open the API Store and note the new theme applied to it.
Image Added

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:

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.

Code Block

language	xml

<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>

Versions Compared

Old Version 27

New Version Current

Key

Adding the new theme to the Themes menu

Setting the new theme as the default theme

Saving directly in the file system

Uploading through the Admin Dashboard

Adding the new theme to the Themes menu