Search code examples
wso2customizationwso2-api-manager

Styling the Logo and Header not working in WSO2 API Manager 4.1.0

I am trying to customize dev-portal logo by follows WSO2 Doc in WSO2 APIM 4.1.0. Product Downloaded as Zip and extracted the same in windows.

As per the instructions given in doc, defaultTheme.js resides inside <API-M_HOME>/repository/deployment/server/jaggeryapps/devportal/site/public/theme/defaultTheme.js

But inside the same path, unable to find out defaultTheme.js

enter image description here

I found the same file in some other path mentioned like below.

foundimage

I started to edit defaultTheme.js file config like below and pasted custom-logo image as well.

edited file

logo

after made changes, i have started server, that change is not reflected, i could see the same default wso2 devportal logo like below.

wso2 logo

custom-logo:

custom-logo

why is it not reflecting?

Solution

  • It seems that the documentation is still not reflecting some changes done in the most recent versions.

    One other way of adding customizations to devportal/publisher is by altering the userTheme.js file

    Reference: https://apim.docs.wso2.com/en/latest/reference/customize-product/customizations/customizing-the-developer-portal/overriding-developer-portal-theme/#global-theming

    This file can be located at {APIM_HOME}/repository/deployment/server/jaggeryapps/devportal/site/public/theme/userTheme.js

    This is an empty json file that you can add the fields defined in defaultTheme.js that you want to overwrite.

    Example userTheme.js file:

    const Configurations = {

    custom: {

        appBar: {
            logo: '/site/public/images/my-custom-logo.png',
            logoHeight: 34,
            logoWidth: 'auto',
            background: '#0feedb',
            backgroundImage: '/site/public/images/appbarBack.png'
        }
    }
};

    This has worked for me using a new WSO2 API Manager 4.1 pack. With this approach, you do not need to restart the server for the changes take effect. Just remember to hard refresh the browser cache, or else you might not see the changes.