There is a way to override the look & feel of the Liferay Control panel. Follow below guide to create a Liferay theme which helps us to override the look & feel of the Liferay control panel. 

Prerequisites

  • Java 
  • Liferay portal 7/7.x
  • Liferay 7.2 source code(download)

Environment Requirement

  • JDK 8
  • Eclipse
  • Liferay Portal

Assuming that you have already created a Liferay-workspace project in eclipse IDE.

1. Create a theme into the theme folder under your liferay workspace.

Click here to create the theme.

The necessary file structure for your custom theme will automatically gets created as below.

Change look and feel of control panel

2. Edit liferay-look-and-feel.xml file and remove all xml tags under theme tag and add below one.

Now your liferay-look-and-feel.xml will look like below.

3. Copy below folders from ${liferay-portal-src}/modules/apps/frontend-theme/frontend-theme-admin/src in to ${custom-admin-theme}/src.

  • CSS
  • templates
  • image

4. As per your requirement you can add/edit css rules in _custom.scss file.

We have added below css rules _custom.scss file for example. We have changed the control panel color from blue to green.

4. Go to your portal-ext.properties and add below property.

control.panel.layout.regular.theme.id={add your theme id}


Note : Here theme id what you have entered while creating custom theme.

    1. Deploy your custom theme
    2. Restart your liferay server.
    3. Go to control panel configuration instance setting instance configuration.
    4. Select the custom theme from Default Control Panel Theme dropdown and save.
Change look and feel of control panel

5. Output

Change look and feel of control panel