Customizing Header and Footer of WSO2 API Manager Store

If you want to customize the header and footer of WSO2 API Manager Store application, this blog post will be explaining how to do that by adding a subtheme. 

Adding a Subtheme

1). Navigate to "\repository\deployment\server\jaggeryapps\store\site\themes\fancy\subthemes" directory.
2). Create a directory with the name of your subtheme. Here I am going to create a subtheme called "test"
3). Edit "repository\deployment\server\jaggeryapps\store\site\conf\site.json" file as below. This makes your sub theme as the default theme.

"theme" : {
        "base" : "fancy",
  "subtheme" : "test"
    },
Customize Header:

As an example, Here I am going to remove theme selection menu item from store header (theme selection will be appearing after user login into the store).

1). Create a directory called "templates" inside your subtheme directory.
2). Copy "template.jag" located in "\repository\deployment\server\jaggeryapps\store\site\themes\fancy\templates\user\login" 
into your new "templates" directory with the same "templates\user\login" directory structure.
3). To remove theme selection menu item, remove "<li class="dropdown settingsSection">...</li>" HTML tag section from the "template.jag". 

Customize Footer:

Here I am going to Remove documentation hyperlinks available in the API Store footer

1). Create a directory called "templates" inside your subtheme directory. Ignore this step if you have already done with the "Header customization"
2). Copy "template.jag" located in "\repository\deployment\server\jaggeryapps\store\site\themes\fancy\templates\page\base" 
 into your new "templates" directory with same "templates\page\base" directory structure.
3). To remove Docs link, you can find them inside the "row-fluid" div tag. Customize them according to your requirements.

Comments

Post a Comment

Popular posts from this blog

XSLT - Modify Date and DateTime value

If you want to perform date and time related opertions with XSLT 'date' or 'dateTime' values, you can use 'xs:yearMonthDuration' or 'xs:dayTimeDuration' function to achieve this. You can add or reduce years, months, date, hours or even minutes through those functions.  xs:yearMonthDuration For this function input value is year month duration and it should be passed in  ISO_8601 format n- the [n] is replaced by the value for each of the date and time elements P - The duration designator(for period). nY- the number of years. nM- the number of months. ex: xs:yearMonthDuration('P1Y2M') - 1 Year and 2 Months ex:  xs:yearMonthDuration('-P1Y2M')  - Negative 1 Year and 2 Months xs:dayTimeDuration For this function input value is day time duration and it also needs to be passed in  ISO_8601 format n- the [n] is replaced by the value for each of the date and time elements P - The duration designator(for period). nD- the
Read more

Integrate With Mutual Certificate Authentication based Service

There are many ways to secure a Service/API using different Authentication mechanisms. Mutual Certificate authentication(AKA: Client Certificate Authentication) is one of the ways to secure Service or API. Recently I was trying to integrate with an API which is secured using Mutual Certificate Authentication. In this scenario, the backend service team gave me their certificate-based on PKCS#12. When integrating this backend system with WSO2 Platform, we have to use 'Multi-HTTPS transport'. With this 'Multi-HTTPS transport', it will grant great flexibility to define different SSL profiles with separate trust stores and key stores for different IPs or hosts. This custom SSL profile can be implemented for Client to Synapse Runtime(Client --> ESB) or Synapse Runtime to Backend(ESB --> Backend). If it is Client to ESB, then you have to define custom SSL Profiles in the transportReceiver section. In my use-case, it was for ESB to Backend. So I had to add custom SSL prof
Read more

Yield Price Sri Lanka - Android Application

Image
" Yield Price Sri Lanka " is an Android based application which helps users to check Market Price Information using their mobile devices. This application concept is based on person X( will update his name after approvals) and I did slight modifications on the application to support in a low cost infrastructure. Using this " Yield Price Sri Lanka " application, you can check prices of various goods instantly, without going to the market. I am updating price information in Daily & Weekly basis according to the Colombo Manning Market prices. Initial application was developed to support English language only. With current latest version we are supporting English, Tamil and Sinhalese languages. This application will update price information in real time and when describing the application's back-end(server) architecture, it has developed to serve JSON based output with many concurrent requests without blocking any request. Within the mobile Application wh
Read more