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.
![Create theme in Liferay workspace | Change look and feel of control panel Create theme in Liferay workspace](https://www.ignek.com/wp-content/uploads/2024/03/Create-theme-in-Liferay-workspace.webp)
2) Edit liferay-look-and-feel.xml file and remove all xml tags under theme tag and add below one.
// liferay-look-and-feel.xml
true
Now your liferay-look-and-feel.xml will look like below.
// liferay-look-and-feel.xml
7.2.0+
true
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.
// _custom.scss
.product-menu .panel .panel-body {
background-color: #21716a;
}
.product-menu .panel .list-group-heading.active,
.product-menu .panel .list-group-heading.active:hover,
.product-menu .panel .list-group-heading.active:focus {
background-color: #21716a;
}
.product-menu .panel .list-group-heading.active+div {
background-color: #21716a;
}
.product-menu .panel .panel-header .panel-title>.panel-toggler:not(.collapsed),
.product-menu .panel .panel-heading .panel-title>.panel-toggler:not(.collapsed) {
background-color: #27635d;
}
.product-menu.sidebar .sidebar-header {
background-color: #2e837b;
}
#content-wrapper .control-menu-level-1 {
background-color: #2e837b;
}
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.
- Deploy your custom theme
- Restart your liferay server.
- Go to control panel → configuration → instance setting → instance configuration.
- Select the custom theme from Default Control Panel Theme dropdown and save.
![Changing theme to our custom theme | Change look and feel of control panel Changing theme to our custom theme](https://www.ignek.com/wp-content/uploads/2024/03/Changing-theme-to-our-custom-theme.webp)
5) Output
![Verify custom theme on Liferay | Change look and feel of control panel Verify custom theme on Liferay](https://www.ignek.com/wp-content/uploads/2024/03/Verify-custom-theme-on-Liferay-1024x486.webp)