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.

Function name Project name path
Control Menu product-navigation-control-menu-dxp-theme-contributor /liferay-portal/modules/private/apps/web-experience/product-navigation
Product Menu product-navigation-product-menu-dxp-theme-contributor /liferay-portal/modules/private/apps/web-experience/product-navigation
Simulation Menu product-navigation-simulation-theme-contributor /liferay-portal/modules/apps/web-experience/product-navigation

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.

Recommended Posts

I want to change the color of the upper control navigation bar (Control menu) in Liferay 7 / DXP
I want to control the display of the upper management navigation bar (Control menu) in Liferay 7 / DXP
I want to change the value of Attribute in Selenium of Ruby
I want to change the log output settings of UtilLoggingJdbcLogger
I want to control the default error message of Spring Boot
Bootstrap4 Change the color of the hamburger menu
I want to know the JSP of the open portlet when developing Liferay
I want to output the day of the week
I want to var_dump the contents of the intent
[AndroidStudio] Change the color of the ActionBarDrawerToggle hamburger menu
I want to get the value in Ruby
I want to control the start / stop of servers and databases with Alexa
[Swift] How to change the order of Bar Items in Tab Bar Controller [Beginner]
[Beginner] I tried to decorate the bar after displaying the details of the hamburger menu
I want to embed any TraceId in the log
I want to know the answer of the rock-paper-scissors app
I want to display the name of the poster of the comment
I want to be aware of the contents of variables!
I want to return the scroll position of UITableView!
[Active Admin] I want to specify the scope of the collection to be displayed in select_box
[Rails] I want to display the link destination of link_to in a separate tab
[Ruby on Rails] I want to get the URL of the image saved in Active Storage
I want to set the conditions to be displayed in collection_check_boxes
[Rails] [bootstrap] I want to change the font size responsively
I want to expand the clickable part of the link_to method
I want to control the maximum file size in file upload for each URL in Spring Boot
When you want to change the MySQL password of docker-compose
I want to transition to the same screen in the saved state
I want to narrow down the display of docker ps
I want to recreate the contents of assets from scratch in the environment built with capistrano
[Ruby] I want to reverse the order of the hash table
I want to temporarily disable the swipe gesture of UIPageViewController
I want to simplify the conditional if-else statement in Java
I want to know the Method of the Controller where the Exception was thrown in the ExceptionHandler of Spring Boot
The story of Collectors.groupingBy that I want to keep for posterity
I want to limit the input by narrowing the range of numbers
I want to display the images under assets/images in the production environment
I want to remove the top margin in Grouped UITableView (swift)
[Java] I want to perform distinct with the key in the object
[Swift] The color of the Navigation Bar is different (lighter) from the specified color.
[Android] I want to get the listener from the button in ListView
[Rails + Webpacker] I want to use images of assets! Until you can view the image in Vue.js
[Rails] I want to send data of different models in a form
I want to write JSP in Emacs more easily than the default.
I want to display the number of orders for today using datetime.
[Ruby] I want to extract only the value of the hash and only the key
How to change the maximum and maximum number of POST data in Spark
I want to pass the argument of Annotation and the argument of the calling method to aspect
[Ruby] I want to display posted items in order of newest date
I want to get the IP address when connecting to Wi-Fi in Java
How to change the value of a variable at a breakpoint in intelliJ
I tried to make full use of the CPU core in Ruby
I want to display an error message when registering in the database
I want to get the field name of the [Java] field. (Old tale tone)
[swift5] How to change the color of TabBar or the color of item of TabBar with code
I want you to use Enum # name () for the Key of SharedPreference
Change the save destination of the image to S3 in the Rails app. Part 2
[Eclipse] Change the color of the vertical ruler
Ransack sort_link How to change the color!
I want to use @Autowired in Servlet
[Swift] Change the color of SCN Node