Hiding the Help Button II

Hiding the help button in the Manager with CSS


In the previous article, we saw the CSS code necessary to hide the "Help" button that appears on the panel for creating and updating various MODX objects like Resources, Elements, System Settings, and Media Sources. In this article we'll look at a way to inject that CSS into a page with a plugin, so the change won't be overwritten every time MODX is upgraded.


MODX logo

The CSS

To refresh your memory, the CSS code we identified in the previous article looks like this:
#modx-abtn-help {
    display:none !important;
}

The code simply tells the browser not to display the page element with the ID modx-abtn-help. You can't add that CSS code to the site's CSS file or to a page Template because it won't have any effect in the Manager. We need to inject it into the Manager page itself.


Be very careful with plugin code designed to run in the Manager. If the code contains a syntax error, the entire Manager will often be completely broken. You won't be able to do anything. If this happens, don't panic. Go into the database in PhpMyAdmin and in the modx_site_plugins table, find the plugin and disable it by changing the value of the disabled field from 0 to 1 and clicking on the "Go" button. Delete all files in the core/cache directory in cPanel's File Manager (otherwise the plugin will still be in the cache and will execute).

The best way to prevent this is to write the code in a good code editor, like PhpStorm, which will highlight any PHP errors for you, then paste it into the plugin in the Manager. If you don't have a code editor, you can install the Ace editor in MODX and use it to write the plugin. Ace's error checking is not nearly as sophisticated as PhpStorm's, but it will catch most typical PHP syntax errors. You'll see a red "X" at the left of the code if it sees any errors, and it will disappear when they are fixed.


The Plugin

It's a great feature of MODX that you can use a plugin to do almost anything. This plugin should be attached to the OnManagerPageBeforeRender System Event. It will inject the CSS code at the end of the head section of the page.

/* HideHelp Plugin */
$css = '
    <style>
        #modx-abtn-help {
            display: none !important;
        }
    </style>
';

$modx->regClientCSS($css);

return '';

The code puts the desired CSS code, along with tags, into the $css variable. It then sends the CSS to regClientCSS(), which injects the code into the head section of the page.

If you want to make things a little more compact, the plugin could look like this:

/* HideHelp Plugin */
$css = '<style>#modx-abtn-help { display: none !important;} </style>';
$modx->regClientCSS($css);
return '';

or even like this:

/* HideHelp Plugin */
$css = '<style>#modx-abtn-help {display: none !important;}</style>'; $modx->regClientCSS($css); return '';

Steps

Here are the steps to create the Plugin:

  1. Create a Plugin called HideHelp and paste any one of the examples above.
  2. On the System Events tab of the plugin, check the box next to OnManagerPageBeforeRender
  3. Save the Plugin

Another Way

The regClientCSS() method is very smart. It can tell whether the argument in parentheses is raw CSS code or a reference to a file. It does this by looking for the tags. If they're missing, it assumes the argument is a reference to a file. We could have placed the CSS code (without the tags, in a file under the assets/ directory, and used this code in our plugin:

/* HideHelp Plugin */
$modx->regClientCSS('path/to/css/file');

return '';

The CSS file would look like this:

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

In this case, MODX would place a reference to the CSS file in the head section of the page rather than the raw CSS code. For just hiding the Help button, it's probably faster and easier to have the CSS code in the snippet. If you wanted to do more extensive modifications to the Manager page, though, the file might be more convenient.


Inefficiency

This method is a little wasteful, since it executes on every Manager page, even pages without a Help button. The code is fairly fast, however. It would be possible to modify the code to only execute on pages with a Help button, but you'd have to identify all of them, and it's a little tricky. In a later article, we'll look at a way to do that, but for just the Help button, which is on a lot a pages, it's probably not worth the effort, especially since the plugin won't affect front-end page load at all.


Coming Up

Our plugin hides the Help button from everyone, but there might be cases where you want some users to see it. In the next article, we'll see a way to control which user groups get to see the button.


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 (1)

  1. John MacDonaldSep 05, 2016 at 09:07 AM

    Great post, Bob. I found it useful for formatting TVs.

    1) TVs added to the Document or Settings regions are indented by 15 pixels for some reason. Not any more:
    #tv263-tr {
    padding-left: 0 !important;
    }
    In this case, 263 is the TV's ID.

    2) Also useful for adding some separation to related TVs:
    #tv270-tr {
    border-top: 1px solid #eee !important;
    margin-top: 15px !important;
    }
    Thanks again!


Please login to comment.

  (Login)