Playing Around With Carbon Product Themes

Archived Content
This article is provided for historical perspective only, and may not reflect current conditions. Please refer to relevant product page for more up-to-date product information and resources.
  • By Chanaka Jayasena
  • 13 Nov, 2011

Introduction

This knowledge base item will explain how to extract and modify the theme to suite your need.

Lets take WSO2 ESB product as an example.

Let's say we want to change the header, logo, menu colors etc on this particular product.

Before starting the product, navigate to the \repository\components\plugins folder. There are two "jar" files. (Version numbers can be different in your case)

  1. org.wso2.carbon.ui-3.2.2.jar
  2. org.wso2.esb.styles-3.2.0.jar

[1] is responsible for the overall carbon product designs. And [2] is responsible for the individual product specific designs. In order to do a small change in a CSS file we'll have to shutdown the server, deploy the jar and start the server again. As a solution for this we can extract the two jar files in to two different folders with the same name.

Then delete the two jar files and rename these two folders with a .jar at the end of the folder names.

By doing this we enable ESB server to treat the folders as jar files. Usually I point project location of my IDE to these newly created two folders.

Start the ESB server now.

Working with org.wso2.esb.styles-3.2.0.jar

Navigate in to org.wso2.esb.styles-3.2.0.jar folder and open "web\admin\css\main.css" file, which is responsible for product specific styles. We can see what styles overriding others using Firebug plugin in Firefox, and change the main.css file. I also create my custom images and replace the ones inside "web\admin\images" folder logos backgrounds etc..

Working with org.wso2.carbon.ui-3.2.2.jar

Navigate in to org.wso2.carbon.ui-3.2.2.jar folder and go to "web\admin" folder. We can see css files and images. These are the files that's been use for the core UI. If you want to change the overall look and feel, then change the web\admin\css\global.css file. And there is a jsp file that is responsible for the overall layout of the site. That file is "web\admin\layout\template.jsp". Any change made to it will effect overall structure of every product.

Author

Chanaka Jayasena, Senior Software Engineer, WSO2 Inc