Custom Theme for Liferay 7 Control panel

Liferay version: 7.3

This guide allows creating a Liferay theme which helps us to override the look & feel of the Liferay control panel.

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

1. Create a theme:

Link to create the theme.

This is the file structure for your custom theme

2. Edit Liferay-look-and-feel.xml file

Remove all XML tags under theme tag and add below one

	<control-panel-theme>true</control-panel-theme>

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

<?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 the theme code:

You need to copy below theme folder from the liferay source code "${liferay-portal-src}/modules/apps/frontend-theme/frontend-theme-admin/src" in the "${custom-admin-theme}/src" folder

- CSS

- Templates

- Images

4. Edit _custom.scss:

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.

.product-menu,
.product-menu .panel-header {
	background-color: #21716a !important;
}

.product-menu .panel .panel-body {
	background-color: #21716a;
}

.product-menu a.list-group-heading.active,
.product-menu a.list-group-heading.active:hover,
.product-menu a.list-group-heading.active:focus {
	background-color: #21716a;
}

.product-menu a.list-group-heading.active+div {
	background-color: #21716a;
}
.product-menu .list-group-heading.panel-header:not(.collapsed){
	background-color: #21716a;
}

.product-menu .show .list-group-item{
	background-color: #2e837b !important;
}

#content-wrapper .control-menu-level-1 {
	background-color: #2e837b;
}

5. Edit portal-ext.properties:

Add this property "control.panel.layout.regular.theme.id={add your theme id}" to your portal-ext.properties file

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

6. Deploy the theme:

- Deploy the 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.