Page Comparison

The The user interfaces of every Carbon product allows you to configure, monitor, tune, and maintain WSO2 products. The components that formulate the design and style of these user interfaces are defined in resource (JAR) files.

...

Follow the steps below to change this logo.

Find the Open the <PRODUCT_HOME>/repository/components/plugins/ org.wso2.carbon.ui_<version-number>.jar file, and copy it to a separate directory location.
Tip
You need to find the bundle that contains the resource files that you
need
want to modify. In this case, the logo and the related CSS files are contained in the org.wso2.carbon.ui_<version-number>.jar file.
Create a new Maven project using your IDE (e.g. org Copy the org.wso2.carbon.ui_<version-number>_patch).jar file to a separate location on your computer, and extract the file.
InfoThis creates a project for a new bundle to pack the files you modify. Since
Create a new Maven project using your IDE. Be sure to include the symbolic name of the original bundle
is ‘
that you extracted in the previous step (which is 'org.wso2.carbon.ui
’, this patch bundle should have the symbolic name as part of its name (e.g. ‘org.
_<version-number>') in the project name. For example, you can use org.wso2.carbon.ui_<version-number>_patch
’). Also, you need to use this name with the symbolic name as part of it, as the required bundle in the fragment bundle, which you will create later.
as the Maven project name.

Add the following content to the pom.xml file of the org.wso2.carbon.ui_<version-number>_patch project. Be sure to update <artifactId> in the below content with the correct In this pom.xml file, replace the <version-number> of org.wso2.carbon.ui_<version-number>_patch with the correct version value.

Code Block

language	xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.wso2.carbon</groupId>
    <artifactId>org.wso2.carbon.ui_<version-number>_patch</artifactId>
    <version>1.0.0</version>
    <packaging>bundle</packaging>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <version>3.0.1</version>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <Bundle-SymbolicName>${project.artifactId}</Bundle-SymbolicName>
                        <Bundle-Name>${project.artifactId}</Bundle-Name>
                        <Export-Package>web.admin.*</Export-Package>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Create directories in your project as explained below.
1. Create the /web folder under the /src/main/resources directory of the org.wso2.carbon.ui_<version-number>_patch project.
2. Then, create the /admin directory under /web.
3. Finally, create the /css, /images, and /layout directories under /admin.
Your org.wso2.carbon.ui_<version-number>_patch project should now look as shown below.

Create a new CSS file (e.g. customizations.css) with the following content.

Code Block

language	css

#header div#header-div div.left-logo {
	background-image: url( ../images/new-logo.png );
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
	height: 40px;
	width: 300px;
	margin-top: 23px;
	margin-left: 20px;
	float: left;
}

Add the customizations.css file to the <org.wso2.carbon.ui_<version-number>_patch>/src/main/resources/web/admin/css/ directory.
Tip
This file includes the logo customization styles.
Copy the <org.wso2.carbon.ui_<version-number>.jar>/web/admin/layout/template.jsp file to the <org.wso2.carbon.ui_<version-number>_patch>/src/main/resources/web/admin/layout/ directory.
Locate the following line in the <org.wso2.carbon.ui_<version-number>_patch>/src/main/resources/web/admin/layout/template.jsp file, which you added in the previous step:
Code Block
<link href="<%=globalCSS%>" rel="stylesheet" type="text/css" media="all"/>

Replace the above line with the following:

Code Block

language	java

<link href="../admin/css/customizations.css" rel="stylesheet" type="text/css" media="all"/>

Add the below image as the new logo (e.g. new-logo.png) to the <org.wso2.carbon.ui_<version-number>_patch>/src/main/resources/web/admin/images/ directory.

Create another new Maven project using your IDE (e.g. . Be sure to include the symbolic name of the original bundle that you extracted in step 1 above (which is 'org.wso2.carbon.ui_<version-number>') in the project name. For example, you can use org.wso2.carbon.ui_<version-number>_fragment) as the Maven project name.

Info
This creates a project for the fragment bundle. Since the symbolic name of the original bundle is ‘`org.wso2.carbon.ui`’, the fragment host value of this bundle should be the same (e.g. o `rg.wso2.carbon.ui_<version-number>_fragment`). This fragment bundle will not contain anything (expect the `pom.xml` file) when it is built.

Add the following content to the pom.xml file of the org.wso2.carbon.ui_<version-number>_fragment project. In this pom.xml file, replace the <version-number> of org.wso2.carbon.ui_<version-number>_patch and org.wso2.carbon.ui_<version-number>_fragment with the correct version value.

Info
This `pom.xml` file of the fragment bundle define properties including the required bundle value (i.e. ‘`org.wso2.carbon.ui_<version-number>_patch`’).

Code Block

language	xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.wso2.carbon</groupId>
    <artifactId>org.wso2.carbon.ui_<version-number>_fragment</artifactId>
    <version>1.0.0</version>
    <packaging>bundle</packaging>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <version>3.0.1</version>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <Bundle-SymbolicName>${project.artifactId}</Bundle-SymbolicName>
                        <Bundle-Name>${project.artifactId}</Bundle-Name>
                        <Require-Bundle>org.wso2.carbon.ui_<version-number>_patch</Require-Bundle>
                        <Fragment-Host>org.wso2.carbon.ui</Fragment-Host>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Now you can build the two projects. Open a terminal, navigate to the relevant project directory (listed above), and execute the following command: mvn clean install.
- org.wso2.carbon.ui_<version-number>_fragment
- org.wso2.carbon.ui_<version-number>_patch
Once the project is built, copy the two JAR files listed below (from the <PROJECT_HOME>/target/ directory) to the <PRODUCT_HOME>/repository/components/dropins/ directory.
- org.wso2.carbon.ui_<version-number>_fragment-1.0.0.jar
- org.wso2.carbon.ui_<version-number>_patch-1.0.0.jar
Restart the WSO2 product server.
Access the Management Console of WSO2 Carbon using the following URL: https://10.100.5.12:9443/carbon/. You view the new logo, which the patch bundle contains as shown below.

Versions Compared

Old Version 13

New Version 14

Key