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.
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
<control-panel-theme>true</control-panel-theme>
Now your liferay-look-and-feel.xml will look like below.
// liferay-look-and-feel.xml
<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 7.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_7_2_0.dtd">
<look-and-feel>
<compatibility>
<version>7.2.0+</version>
</compatibility>
<theme id="custom-admin" name="custom-admin">
<control-panel-theme>true</control-panel-theme>
</theme>
</look-and-feel>
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.
5) Output
