1. Home
  2. Development
  3. RE: Differences in layout when theme is deployed in two similar environment

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

thumbnail
Pete Helgren, modified 6 Years ago.
Differences in layout when theme is deployed in two similar environments
Regular Member Posts: 225 Join Date: 4/7/11 Recent Posts
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&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......
Patrick Yeo, modified 6 Years ago.
RE: Differences in layout when theme is deployed in two similar environment
Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts
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&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.
thumbnail
Pete Helgren, modified 6 Years ago.
RE: Differences in layout when theme is deployed in two similar environment
Regular Member Posts: 225 Join Date: 4/7/11 Recent Posts
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:

<#assign
permission_checker = themeDisplay.getPermissionChecker()
root_css_class = languageUtil.get(locale, "lang.dir")
group_id = themeDisplay.getScopeGroupId()
the_title = ""
/>

<#assign is_group_admin = permission_checker.isGroupAdmin(group_id) />
<#assign is_omniadmin = permission_checker.isOmniadmin() />

<#assign show_dockbar = is_group_admin || is_omniadmin />

<#assign
    is_signed_in = themeDisplay.isSignedIn()
/>
Then in portal_normal.ftl I have this:

<#include "${full_templates_path}/navigation.ftl" />
    <#if show_dockbar>

        <@liferay_ui["quick-access"] contentId="#main-content" />

        <@liferay_util["include"] page=body_top_include />

        <@liferay.control_menu />

&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 
Patrick Yeo, modified 6 Years ago.
RE: Differences in layout when theme is deployed in two similar environment
Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts
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.
thumbnail
Pete Helgren, modified 6 Years ago.
RE: Differences in layout when theme is deployed in two similar environment
Regular Member Posts: 225 Join Date: 4/7/11 Recent Posts
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.