I want to change the color of the upper control navigation bar (Control menu) in Liferay 7 / DXP

Corresponding version

Liferay DXP SP1 or later / Liferay 7 CE

Introduction

There are many project requirements that want to change the color of the management navigation bar (navigation consisting of Control Menu / Product Menu / Simulation Menu) displayed at the top of Liferay (to match the color with Theme). The method of dealing with such a case will be described.

Official Document: THEME CONTRIBUTORS Official Document: CONTEXT CONTRIBUTORS There is an explanation of how to deal with it, but here is an explanation of how to actually create a portlet.

Prerequisites

It is assumed that the Liferay workspace has been created and the blade tools and various Theme creation tools have been installed. The following document explains the setup method.

-How to create a service builder portlet in Liferay DXP / 7 -How to create a theme in Liferay 7 / DXP

As a test scenario, we will implement to change the Control Menu to red. The relationship with the corresponding Core Theme provier is as follows.

Creating a Theme contributor

Moved under $ (liferay_workspace) / modules.

So we need to create a Theme contributor to replace the Control Menu bundle. Select File-> New-> Liferay Module Project in Liferay Developer Studio / IDE, and select template context contributor in Project Template Name. Or on the command line

blade create -t template-context-contributor -p com.liferay.product.navigation.control.menu.theme.contributor -c SampleProductNavigationControlMenu sample-product-navigation-control-menu-theme-contributor

Create a module project using the blade tool in.

Creating a SampleProductNavigationControlMenuTemplateContextContributor

Open the base file of the Control Menu

ProductNavigationControlMenuTemplateContextContributor.java

vi /liferay-portal/modules/apps/web-experience/product-navigation/product-navigation-control-menu-theme-contributor/src/main/java/com/liferay/product/navigation/control/menu/theme/contributor/internal/ProductNavigationControlMenuTemplateContextContributor.java

Copy the contents of ProductNavigationControlMenuTemplateContextContributor.java to SampleProductNavigationControlMenuTemplateContextContributor.java.

SampleProductNavigationControlMenuTemplateContextContributor.java

	@Override
	public void prepare(
		Map<String, Object> contextObjects, HttpServletRequest request) {

		if (!isShowControlMenu(request)) {
			return;
		}

		String cssClass = GetterUtil.getString(
			contextObjects.get("bodyCssClass"));

		contextObjects.put("bodyCssClass", cssClass + " has-control-menu");
	}

	protected boolean isShowControlMenu(HttpServletRequest request) {
		ThemeDisplay themeDisplay = (ThemeDisplay)request.getAttribute(
			WebKeys.THEME_DISPLAY);

		if (themeDisplay.isImpersonated()) {
			return true;
		}

		if (!themeDisplay.isSignedIn()) {
			return false;
		}

		User user = themeDisplay.getUser();

		if (!user.isSetupComplete()) {
			return false;
		}

		return true;
	}

Copy of SCSS resource

Under the resources directory of product-navigation-control-menu-theme-contributor (*** original ***)

/src/main/resources

Sample-product-navigation-control-menu-theme-contributor (*** Theme contributor *** created this time)

/src/main/resources

Copy it below. (Since there is only java directory under the main directory, copy the entire resources folder)

Next, try changing the location of the following file

_control_menu.Near line 34 of scss

.control-menu-level-1 {
	background-color: #990000; //Change this to red in the test with a direct value. Actually, create a variable with SCSS and deal with it.
	color: $control-menu-level-1-color;

bnd.bnd file settings

*** Check the contents of the original *** bnd file and copy it to the bnd.bnd file of the Theme contributor *** created this time as follows.

bnd.bnd

Bundle-Name: Liferay Product Navigation Control Menu DXP Theme Contributor SAMPLE
Bundle-SymbolicName: com.liferay.product.navigation.control.menu.dxp.theme.contributor
Bundle-Version: 1.0.7
Liferay-Releng-Module-Group-Description:
Liferay-Releng-Module-Group-Title: Product Navigation
Liferay-Theme-Contributor-Type: product-navigation-control-menu
Liferay-Theme-Contributor-Weight: 1500
Web-ContextPath: /product-navigation-control-menu-dxp-theme-contributor

Note the following here.

Bundle-Version

This matches the original number

Liferay-Theme-Contributor-Weight

This should be a number greater than the original value. This changes the load priority of bundle.

Deploy

Launch Liferay DXP and

blade deploy

Deploy with.

important point

The above is an example of Control Menu only, but you can change the color in the same way for both Product Menu / Simulation Menu. However, since these bundles are deeply related to the management screen and core, if changes are not kept to a minimum, if there is a change on the core side, there will be a difference from the overridden bundle, causing problems. there is a possibility.

Due to a bug in SCSS, even if you change an SCSS file other than the first layer, the change will not be reflected. (Related JIRA ticket), so if you change the SCSS file, be sure to change the SCSS file of the first level (product_navigation_control_menu. In the case of Control Menu. Edit scss) by inserting or removing line breaks so that SCSS is compiled before deploying (gradle css Build runs).

Also, as in the article I want to control the display of the upper management navigation bar (Control menu) in Liferay 7 / DXP, it is shown / hidden. Control etc. can be changed with SampleProductNavigationControlMenuTemplateContextContributor.java, so please refer to it.