The management console user interface (https://localhost:9443/admin/carbon
) of a Carbon product consists of two layers:
- UI inherited from WSO2 Carbon platform contains the templates, styles (css files), and images that are stored in the core Carbon UI bundle stored in
<PRODUCT<UES_HOME>/repository/components/plugins/
org.wso2.carbon.ui_<version-number>.jar
where<version-number>
is the version of the Carbon kernel that the product is built on. This bundle is responsible for the overall look and feel of the entire Carbon platform. - UI unique to each product contains all the styles and images that override the ones in core Carbon platform. This file is in
where<PRODUCT<UES_HOME>/repository/components/plugins/
org.wso2.<product-name>ues.admin.styles_<version-number>.jar<version-number>
is the version of the product and<product-name>
isues
.
The following topics explain how to download a Carbon product and customize its user interface.
...
- Download your product.
- Extract the ZIP file into a separate folder in your hard drive.
- Go to the
<PRODUCT<UES_HOME>/repository/components/plugins/
directory to find the required JAR files:org.wso2.carbon.ui_<version-number>.jar
org.wso2.<product-name>ues.admin.styles_<version-number>.jar
- Copy the JAR files to a separate location on your hard drive. Since the JAR files are zipped, you must unzip them to make them editable.
...
The layout of the Carbon framework is built using a tiles JSP tag library. The use of tiles allows us to break the presentation of the layout into small JSP snippets that perform a specific function. For example, header.jsp
and footer.jsp
are the tiles corresponding to the header and footer in the layout. The template.jsp
file controls the main layout page of the Carbon framework, which holds all the tiles together. That is, the header part in the template.jsp
file is replaced with the <tiles:insertAttribute name="header"/>
tag, which refers to the header.jsp
file. The template.jsp
file as well as the JSP files corresponding to the tiles are located in the org.wso2.<product-name>ues.admin.styles_<version-name>.jar/web/admin/layout/
directory.
...
The styles and images unique to your product is location in the org.wso2.<product-name>ues.admin.styles_<version-number>.jar
folder. To modify product specific styles and images, take the following steps.
- Copy the necessary images to the
org.wso2.<product-name>ues.admin.styles_<version-number>.jar/web/styles/images/
directory. For example, if you want to change the product banner, add the new image file to this directory. - Open the
main.css
file located in theorg.wso2.<product-name>ues.admin.styles_<version-name>.jar/web/styles/css/
directory. To specify a new product banner, change the
background-image
attribute oforg.wso2.
<product-name>ues.admin.styles_<version-name>.jar/web/styles/css/main.css
file as follows:Code Block /* ---------------- header styles ------------------ */ div#header-div { background-image: url( ../images/newproduct-header-bg.png); height:70px; }
Note |
---|
Note that the size of the images you use will affect the overall UI of your product. For example, if the height of the product logo image exceeds 28 pixels, you must adjust the |
...
- Compress the contents of the
org.wso2.carbon.ui_<version-number>.jar
andorg.wso2.<product-name>ues.admin.styles_<product-version>.jar
folders into separate ZIP files. - Change the name of the ZIP file to
org.wso2.carbon.ui_<version-number>.jar
andorg.wso2.<product-name>ues.admin.styles_<version-number>.jar
respectively. - Copy these two new JAR files to the
<PRODUCT<UES_HOME>
/repository/components/plugins/
directory in your product installation. - Start the server.