Differences in layout when theme is deployed in two similar environments

RE: Differences in layout when theme is deployed in two similar environment

2019-07-10T21:48:12Z

It didn't work for me but gave me an idea for an even more hackish approach:

&nbsp;&lt;#else&gt;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;    <script>
            $("body.open").removeClass('open');
            $("body.has-control-menu").removeClass('has-control-menu');
    </script>&nbsp;&nbsp;&nbsp;&nbsp;
<!--#if-->

And, that worked! I'll leave it for now. Really appreciate the pointer.

RE: Differences in layout when theme is deployed in two similar environment

2019-07-10T16:54:17Z

The `open` class is being added by https://github.com/liferay/liferay-portal/blob/07af97431ed9c9ce34dfd814fc14adfc5911450d/modules/apps/web-experience/product-navigation/product-navigation-product-menu-web/src/main/java/com/liferay/product/navigation/product/menu/web/internal/product/navigation/control/menu/ProductMenuProductNavigationControlMenuEntry.java#L119 -L128.
I can't pinpoint where the bug is, but `ProductNavigationProductMenuWebKeys.PRODUCT_NAVIGATION_PRODUCT_MENU_STATE` was set to `open` somewhere.

You might be able to hack around it by setting it to closed with:

&lt;#if show_dockbar&gt;
&nbsp; &nbsp; &lt;@liferay_ui["quick-access"] contentId="#main-content" /&gt;
&nbsp; &nbsp; &lt;@liferay_util["include"] page=body_top_include /&gt;
&nbsp; &nbsp; &lt;@liferay.control_menu /&gt;
&lt;#else&gt;
&nbsp; &nbsp; <script>
        Liferay.Store(ProductNavigationProductMenuWebKeys.PRODUCT_NAVIGATION_PRODUCT_MENU_STATE, 'closed');
    </script>
<!--#if-->

Edit: My code doesn't work. You can see how to get it inside a jsp at https://github.com/liferay/liferay-portal/blob/07af97431ed9c9ce34dfd814fc14adfc5911450d/modules/apps/web-experience/product-navigation/product-navigation-product-menu-web/src/main/resources/META-INF/resources/portlet/view.jsp#L20. I don't know how to get it to work for portal_normal.ftl.

RE: Differences in layout when theme is deployed in two similar environment

2019-07-10T15:32:45Z

Thanks Patrick. I do have code similar to what you suggest I am just trying to sort out why it works in one environment and not in another. I assumed that maybe there was a system setting that I tweaked that could account for the difference. In init_custom.ftl I have this:

&lt;#assign

permission_checker = themeDisplay.getPermissionChecker()

root_css_class = languageUtil.get(locale, "lang.dir")

group_id = themeDisplay.getScopeGroupId()

the_title = ""

/&gt;

&lt;#assign is_group_admin = permission_checker.isGroupAdmin(group_id) /&gt;

&lt;#assign is_omniadmin = permission_checker.isOmniadmin() /&gt;

&lt;#assign show_dockbar = is_group_admin || is_omniadmin /&gt;

&lt;#assign

&nbsp;&nbsp;&nbsp;&nbsp;is_signed_in = themeDisplay.isSignedIn()

/&gt;

Then in portal_normal.ftl I have this:

&lt;#include "${full_templates_path}/navigation.ftl" /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;#if show_dockbar&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;@liferay_ui["quick-access"] contentId="#main-content" /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;@liferay_util["include"] page=body_top_include /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;@liferay.control_menu /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;<!--#if-->

In the "bad" template I see this css reference when I inspect the gap to the left of the portlet container:

@media&nbsp;only screen and (min-width: 768px)

product_nav…104009784:3

body.open #wrapper&nbsp;{

padding-left:&nbsp;320px;

Which I assume is applied by the "open" class applied to the body. Just can't figure out why "open" is applied here when it is a user with no additional permissions that is signed in

RE: Differences in layout when theme is deployed in two similar environment

2019-07-09T16:47:53Z

Hey Pete,
You can see the product menu theme contributor css for 7.0.4CE GA5 at https://github.com/liferay/liferay-portal/blob/07af97431ed9c9ce34dfd814fc14adfc5911450d/modules/apps/web-experience/product-navigation/product-navigation-product-menu-theme-contributor/src/main/resources/META-INF/resources/product_navigation_product_menu.scss.
The spacing is based on the open class. The closed class is there so devs have a css selector for the closed state, just in case.
The CSS file

o/product-navigation-product-menu-theme-contributor/product_navigation_product_menu.css?browserId=other&amp;themeId=

on your production server is a bundle of the file above, https://github.com/liferay/liferay-portal/blob/07af97431ed9c9ce34dfd814fc14adfc5911450d/modules/apps/web-experience/product-navigation/product-navigation-simulation-theme-contributor/src/main/resources/META-INF/resources/css/simulation_panel.scss, and https://github.com/liferay/liferay-portal/blob/07af97431ed9c9ce34dfd814fc14adfc5911450d/modules/apps/web-experience/product-navigation/product-navigation-control-menu-theme-contributor/src/main/resources/META-INF/resources/product_navigation_control_menu.scss.
I'm not sure how you are hiding the control menu on your site, but if you remove https://github.com/liferay/liferay-portal/blob/07af97431ed9c9ce34dfd814fc14adfc5911450d/modules/apps/foundation/frontend-theme/frontend-theme-unstyled/src/main/resources/META-INF/resources/_unstyled/templates/portal_normal.ftl#L21 the control menu will never show.
You can use

theme_display.getPermissionChecker().isOmniadmin()

to check if the user is an omni admin and only show the control menu when that condition is met.

Differences in layout when theme is deployed in two similar environments

2019-07-08T22:02:39Z

I have created a theme and deployed it to my development environment and all is well. When I deployed to my staging server, running the same version of Liferay (7.0.4 CE GA5) I am seeing some css applied through what seems to be a theme contributor which as far as I can tell, doesn't exist OR is a part of Liferay base implementation but isn't part of my theme. Part of the "unexpected" URL looks like this:

o/product-navigation-product-menu-theme-contributor/product_navigation_product_menu.css?browserId=other&amp;themeId=

I cannot find that css file anywhere in my theme and I cannot find a jar that would explain where the theme-contributor reference comes from. I have cleared cache, deleted files from my osgi/state/ folder but I can't locate where the difference is coming from.The actual problem is that the "bad" instance has this set of classes appearing in the body:

(The "open" class is the issue)
What that does is "bump" the portlet contents 320px to the right leaving a large space where the control menu should be. But, the person who is signing in shouldn't see the control menu. In my development environment with the same theme and same jars I see this:

(The "closed" class is the "fix")
There is no reference to product-navigation-product-menu-theme-contributor when the "closed" class is present. So, "open" somehow invokes the theme contributor?
I am not sure where else to look. I obviously must have made a change somewhere but I cannot see where that difference might be. I would have thought all of my changes would be located in the theme which is deployed properly and has been selected for the site. Yet, the difference is pretty obvious: It works on one instance, but not on another. Any idea of what I might have done?I hate css......