Highlighted

Hide global-bar in editor.html

Avatar

Avatar

aliaksandr_hvoz

Avatar

aliaksandr_hvoz

aliaksandr_hvoz

23-09-2019

I create a custom page that opens through "editor.html". I want to hide the panelheader (global-bar). Are there any ways to do this?

1836773_pastedImage_0.png

Replies

Highlighted

Avatar

Avatar

hamidk92094312

Employee

Avatar

hamidk92094312

Employee

hamidk92094312
Employee

23-09-2019

The following doc can help you with that:

Customizing the Consoles

Highlighted

Avatar

Avatar

jbrar

Employee

Avatar

jbrar

Employee

jbrar
Employee

23-09-2019

If you would like to remove the complete pane, Just remove the editor.html from the URL and it should do it.

But if you want to customize the panel, you need to overlay one of the files under "/libs/cq/gui/components/authoring/editorpanel" and customize as per you business requirement.

Highlighted

Avatar

Avatar

Theo_Pendle

MVP

Avatar

Theo_Pendle

MVP

Theo_Pendle
MVP

23-09-2019

Hi, can I just ask why you would want to do this?

In any case, here is the answer:

Removing all editor headers

JaideepBrar​'s answer could work but if overlay these files you will be affecting all editors (for AEM Sites pages, but also in the template editor for example). If this is your aim, then the simplest way is to overlay /libs/cq/gui/components/authoring/editorpanel/editorpanel.jsp and remove the following line (line 37 on AEM 6.5.1, but it may be different for you on an older version):

<sling:include replaceSelectors="panelcontent"/>

Removing one specific editor header

If however you want to make make the header disappear for the AEM Sites editor only, then you will have to go a little further.

  1. Copy /libs/cq/gui/components/authoring/editorpanel,  /libs/cq/gui/components/authoring/editorpanel/editorpanel.jsp and /libs/cq/gui/components/authoring/editorpanel/editorcontent.jsp to a custom location under /apps (I put it under /apps/customization). Do NOT copy /libs/cq/gui/components/authoring/editorpanel/panelheader.jsp.
  2. Remove the line from your new editorpanel.jsp file as described above.
  3. Overlay /libs/wcm/core/content/editor/jcr:content/content/items/content. This is the specific node for the AEM Sites page editor.
  4. Now make your overlaid .../content node point to the customizer editor panel by adding the following property to it:
    sling:resourceType---String---/apps/customization/editorpanel

Hope this helps Here is the result when I follow those steps and refresh my editor page:

Peek 2019-09-23 20-15.gif

Highlighted

Avatar

Avatar

aliaksandr_hvoz

Avatar

aliaksandr_hvoz

aliaksandr_hvoz

23-09-2019

Hey.

I'm trying to remove this panel due to the fact that we have a requirement to configure nodes through a page that will be located in the content. Therefore, when editing the panel appears, the end user should not see this panel. So there was an option to use the JavaScript or redirect (url without editor.html) or just remove the panel. I found the files "editorpanel.jsp" in which the panel is added, but when "<sling:include replaceSelectors="panelcontent"/>" is deleted, it also affects other parts of the program which isn't permissible. At the moment, I settled on this option:

<%@ page session="false" import="com.adobe.granite.ui.components.AttrBuilder, com.adobe.granite.ui.components.Config" %>

<%@ page import="com.adobe.granite.ui.components.rendercondition.RenderCondition,

                com.adobe.granite.ui.components.rendercondition.SimpleRenderCondition,

                com.day.cq.wcm.api.NameConstants,

                org.apache.sling.api.resource.Resource,

                org.apache.commons.lang.StringUtils,

org.apache.sling.api.resource.ValueMap,

org.apache.sling.api.resource.Resource,

com.adobe.granite.ui.components.ComponentHelper" %>

<%@ include file="/libs/granite/ui/global.jsp" %>

<%

    Config cfg = new Config(resource);

    AttrBuilder attrs = new AttrBuilder(request, xssAPI);

    attrs.add("id", cfg.get("id", String.class));

    attrs.addClass("editor-panel");

    if (cfg.get("default", Boolean.FALSE)) {

        attrs.addClass("editor-panel-active");

    }

    attrs.addClass(cfg.get("class", String.class));

    attrs.addOthers(cfg.getProperties(), "class", "id", "default");

String suffix = slingRequest.getRequestPathInfo().getSuffix();

    if (!StringUtils.isEmpty(suffix)) {

        Resource contentResource = resourceResolver.resolve(suffix);

        if (contentResource != null) {

if (NameConstants.NT_PAGE.equals(contentResource.getResourceType())) {

            Resource pageResource = resource.getResourceResolver().getResource(contentResource.getPath() + "/jcr:content");

            if (pageResource != null) {

                String pageType = pageResource.getValueMap().get("pageType", String.class);

                if (StringUtils.isNotEmpty(pageType) && pageType.equals("configuration")) {

                %>

                    <div <%= attrs.build() %>>

                        <sling:include replaceSelectors="panelcontent"/>

                    </div>

                <%

                } else {

                %>

                    <div <%= attrs.build() %>>

                        <sling:include replaceSelectors="panelheader"/>

                        <sling:include replaceSelectors="panelcontent"/>

                    </div>

                <%

            }

            }

            } else {

                %>

                  <div <%= attrs.build() %>>

                        <sling:include replaceSelectors="panelheader"/>

                        <sling:include replaceSelectors="panelcontent"/>

                  </div>

                <%

            }

        }

    }

%>

But I'm not sure it's correct.

Highlighted

Avatar

Avatar

Theo_Pendle

MVP

Avatar

Theo_Pendle

MVP

Theo_Pendle
MVP

23-09-2019

Oops! It's a copy-paste error on my part!

The line to delete is:

<sling:include replaceSelectors="panelheader"/>

Highlighted

Avatar

Avatar

aliaksandr_hvoz

Avatar

aliaksandr_hvoz

aliaksandr_hvoz

23-09-2019

Yes, sorry. I deleted <sling:include replaceSelectors="panelheader"/>

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

24-09-2019

You may write CSS to hide the global header and adjust the content panel.

Add in your author site CSS file, to not impact other sites.

.editor-GlobalBar.js-editor-PanelHeader.editor-panel-header{

  display:none;

}

.editor-panel-content.editor-panel-content-with-header{

  top:0px;

}

Use important if CSS is overridden by another CSS rule.