As you may know, you can customize the Manager's menu system by setting permissions on the various parts and making sure only some users have the necessary permission(s). 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.
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 (not the help icon that's part of the Manager Main Menu). 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 website rather than generic advice from MODX about the definitions of Resources and Elements.
Some things, like many of the Main Menu items, can be successfully hidden with permissions, but that's not the case with the Help button on the Create/Edit Resource and Element pages. 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, though they have been stable for many years.
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, and pressing F12 often works as well). I'll use Chrome as an example, but the same methods work in many browsers. Once Dev. Tools is launched 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 the icon, then hover over the MODX Help button we're trying to hide. 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>
</em></span>
All we care about in the code above is the id of the span tag: 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 downside of that method 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 my 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.
About Bob Ray
Bob Ray is the author of the MODX: The Official Guide and dozens of MODX Extras including QuickEmail, NewsPublisher, SiteCheck, GoRevo, Personalize, EZfaq, MyComponent and many more. His website is Bob’s Guides. It not only includes a plethora of MODX tutorials but there are some really great bread recipes there, as well.
Learn more about Bob Ray.