1. org.wso2.governance.styles-3.6.0.jar (This is having version of G-Reg release)
2. org.wso2.carbon.ui.menu.general-3.1.0.jar (These are having version of Carbon Release since these are common for other products aswell).
3. org.wso2.carbon.ui.menu.governance-3.1.0.jar
4. org.wso2.carbon.ui-3.1.0.jar

Steps

1. Stop G-Reg server.
2. Copy wso2greg-3.6.0/repository/components/plugins/org.wso2.governance.styles-3.6.0.jar into a temporary location. (E.g. :- /home/steve/progress).
3. Go to the temporary location & extract the contents of org.wso2.governance.styles-3.6.0.jar using following command.
   1. jar xvf org.wso2.governance.styles-3.6.0.jar
4. Now contents of your current older should be something similar to following.

1. Change web -> admin -> css -> main.css as per your preference. Refer “Attached image” for detailed style guide lines.
2. If you want to change the images please replace the required images with the same name.
3. By changing the META-INF/product.xml file content you will be able to change the look and feel of login page and change the original redirections to mailing lists, documentation links, issue tracking etc. By changing the parameter "webAdminConsoleTitle" you will be able to change the text display in the browser tab.
4. From the folder which you extracted the jar into, re-pack modified content as follows. (Take a note of '.' at the end of the command).
   • jar cvfm org.wso2.governance.styles-3.6.0.jar META-INF/MANIFEST.MF.
5. Overwrite the Jar file in GREG_HOME/repository/components/plugins and start the instance again.
6. You will be able to see the modifications you have done.
7. If you want to change the product name in the management console, go to GREG_HOME/repository/conf/carbon.xml and change the element "Name".

Sample UI Changes

Changing foreground and background colors for menu titles (Dashboard, Configure, Manage, etc)

You have to modify the governance style bundle "main.css" which is in the org.wso2.governance.styles-3.5.1.jar (wso2greg-3.5.1\repository\components\plugins\org.wso2.governance.styles-3.5.1.jar\web\admin\css).

Please edit line 63 in the "main.css" as follows;

div#menu ul.main li.menu-header
        {
            background-image: none; (as from the carbon styles there is a background image for this)
             background-color: #dddddd;
            color: #f47b20;
            border-bottom: solid 1px #ffffff;
        }
If you want to change the right side arrow, you can find the icon in the following location;

        wso2greg-3.5.1\repository\components\plugins\org.wso2.carbon.ui-3.0.1.jar\web\admin\images\down-arrow.gif
        wso2greg-3.5.1\repository\components\plugins\org.wso2.carbon.ui-3.0.1.jar\web\admin\images\up-arrow.gif

Hover this is only working for the menu items which are links, "Add" and "List" menu items are act as subtitles. You can change these Subtitle styles by adding the following styles to the "main.css".

div#menu ul.main li.menu-disabled-link
        {
            background-color:#F5F5F5;
            background-image:url("../images/default-menu-icon.gif");
            background-position:16px 2px;
            background-repeat:no-repeat;
            border-bottom:1px solid #FFFFFF;
            border-top:1px solid #FFFFFF;
            color:#111111;
            cursor:text;
            display:block;
            font-weight:normal;
            height:16px;
            padding:3px 20px 3px 38px;
        }

If you want to change the hover styles of the menu items, you can edit the line 69 of the "main.css" (wso2greg-3.5.1\repository\components\plugins\org.wso2.governance.styles-3.5.1.jar\web\admin\css).

div#menu ul.main li a.menu-default:hover
        {
            background-color: #F5EDE5;
            border-bottom: solid 1px #DBC1A6;
            border-top: solid 1px #DBC1A6;
            color: #00447C;
        }

To change the hover styles of the "Home" link, edit line 57.

div#menu ul.main li a.menu-home:hover
        {
            color: #f47b20;
            background-image: none;
            background-color: #E8D6C4;
        }

Changing Copyright Information

 To change the copyright information edit the footer.jsp in the org.wso2.carbon.ui-3.0.1.jar (The path is wso2greg-3.5.1\repository\components\plugins\org.wso2.carbon.ui-3.0.1.jar\web\admin\layout).

Adding images to footer

You can add a background image to the footer by adding the following style to the "main.css" in org.wso2.governance.styles-3.5.1.jar. Please add the background image to the 'images' folder.

div#footer-div div.footer-content
        {
            background-image:url("../images/footer-bg.gif");
            background-position: left top;
            background-repeat: repeat-x;
            height:27px;
            margin:auto;
            padding:0;
        }

If you need to add powered by image you need to edit the "footer.jsp" in the org.wso2.carbon.ui-3.0.1.jar. The image path should be ../admin/images/powered.gif and the image should be copied to the 'images' folder (wso2greg-3.5.1\repository\components\plugins\org.wso2.carbon.ui-3.0.1.jar\web\admin\images).

Changing favicon.ico icon

 To change the favicon.ico replace the favicon in org.wso2.carbon.ui-3.0.1.jar (The path is wso2greg-3.5.1\repository\components\plugins\org.wso2.carbon.ui-3.0.1.jar\web\admin\images).

Note : In Carbon products, org.wso2.carbon.ui-3.0.1.jar provides the common styles (global.css) and images. And by the main.css, in org.wso2.governance.styles-3.5.1.jar, common style are override to suit the products.

Author: Lahiru Gunathilaka, Senior Software Engineer, WSO2 Inc