Hiding the Help Button I

Using CSS to hide the help button in the MODX Manager

In earlier articles, I've discussed customizing the Manager by setting permissions on the various parts. But what if you just want to hide something that there's no permission for? In this series of articles, we'll look at how to do that and see some concrete examples.

MODX logo

Finding the Code

I started thinking about this when a MODX Forum user wanted to hide the "Help" button that shows up on the pages where you create and edit Resources and Elements. It also shows up in other places, like the System Settings and Media Source panels. In modern versions of MODX, the Help button takes you to the appropriate page of the MODX documentation. The information there might be over the heads of your users, though, and there's also the natural assumption that when they click on the "Help" button, they will be getting help from you on how to do the tasks necessary to maintain the web site rather than generic advice from MODX about the definitions of Resources and Elements.

There are Permissions in Access Policies that are supposed to let you hide the various help-related items in the Top Menu (help, about, menu_support, but they can be quite tricky to implement, especially if users belong to more than one User Group. They are also poorly documented (it's difficult to know which ones hide what). Worse yet, in my experiments, most of them don't actually work. The only one I could get to work is the help permission, which hides the little question mark at the right site of the Top Menu.

Some things, like many of the Top Menu items, can be successfully hidden with permissions, but that's not the case with the Help button. Using CSS is the next best option if all you want to do is hide something from the users. You can use Form Customization to hide some things, but it's difficult to set up and maintain and doesn't apply to all the things you want to hide. We'll use the Help button as an example, but you can use CSS to hide pretty much anything in the Manager that you can find an HTML class or ID for. Better yet, you don't have to worry much about side effects, because as far as MODX is concerned, the stuff is still there. You just can't see it. Keep in mind that the classes and IDs involved could change in future version of MODX.

Back to the Help button, in order to hide it, you need to know its HTML Class or ID. You might guess that you could find it by viewing the source of the Manager page. Unfortunately, that almost never works. Most of the parts of a MODX Manager page are created on-the-fly by the page's JavaScript code (specifically, ExtJS/modExt). As a result, they often won't show up at all when looking at the source.

The key to finding them, is to use a browser tool to "inspect" the page. While looking at the page in Chrome, for example, you press Ctrl-Shift-i. Make sure the Help button is visible. (A similar method can be used in Firefox and some other browsers). In Chrome, click on the "Elements tab" in the display that appears at the bottom of the screen (not the Manager's Element tab). At the left side of that bottom section's menu bar, you'll see an icon with an arrow pointing to a square. This is the inspector. Click on on the icon, then hover over the Help button. Get the button itself (not just its text) highlighted, then click again. If you've done it right, the window at the bottom of the screen will be showing you the HTML for the Help Button:

<span id="modx-abtn-help"
      class="x-btn x-btn-small x-btn-icon-small-left x-btn-text bmenu x-btn-noicon"
      unselectable="on" style="width: auto;"><em class="">
    <button type="button" id="ext-gen135" class=" x-btn-text">Help!</button>

All we care about in the code above is the ID: modx-abtn-help. In order to hide it, we just need to add the following CSS code somewhere:

#modx-abtn-help {
    display:none !important;

One obvious place to add the code would be in the /manager/templates/default/css/index.css file (assuming that you're using the default Manager template). The down side is that your change will be overwritten whenever MODX is updated. You could create a new Manager Template of your own, but that's massive overkill for just hiding a single page element.

Coming Up

In the next article, we'll see a way to use the CSS code above to hide the Help button that won't be overwritten when you upgrade MODX.

For more information on how to use MODX to create a web site, see my web site Bob's Guides, or better yet, buy my book: MODX: The Official Guide.

Looking for high-quality, MODX-friendly hosting? As of May 2016, Bob's Guides is hosted at A2 hosting. (More information in the box below.)

Comments (0)

Please login to comment.