Hiding the Is Static field with CSS

Hide the "Is Static" field for MODX Elements using CSS


In the previous articles, we looked at a technique using a plugin and CSS to to hide elements on various MODX Manager pages. In this article, we'll see a way to hide the Is Static field for Elements (Snippets, Plugins, Templates, TVs, and Chunks). We'll use CSS and a plugin to do the work, and we'll also limit the execution to the appropriate places using the $_REQUEST variable.


MODX logo

Finding the CSS Selector

I covered this in a previous article, but here it is again, so you won't have to look back...

The key to finding the appropriate selector, 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 Is Static field 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 Is Static checkbox. Try to hover over the containing div (not just its text), then click again. If you've done it right, the window at the bottom of the screen will be showing you something like this (for the for the Is Static checkbox):

<div class="x-form-item x-tab-item x-hide-label" tabindex="-1" id="ext-gen126"><label
        for="modx-template-static" style="width:auto;" class="x-form-item-label"
        id="ext-gen127"></label>
    <div class="x-form-element" id="x-form-el-modx-template-static" style="padding-left:0;">
        <div class="x-form-check-wrap" id="ext-gen128"><input type="hidden" id="ext-gen130"
                                                              value="0" name="static"><input
                type="checkbox" autocomplete="off" id="modx-template-static" name="static"
                class=" x-form-checkbox x-form-field" value="1"><label for="modx-template-static"
                                                                       class="x-form-cb-label"
                                                                       id="ext-gen129">Is
            Static</label></div>
    </div>
    <div class="x-form-clear-left"></div>
</div>

You can see that the first line contains the id for the whole Is Static div. The selector is ext-gen126. The problem is that this selector will be different for different elements. That means our plugin will have to be a more complex.


The Plugin

We have to use a different selector for each kind of Element. We'll first check to make sure that we're on an Element panel by seeing if the action contains 'element'. Then we'll set the selector based on which kind of element it is. The selectors in this example are arbitrary, you'll have to look at the code in your Manager using the technique above to get the actual selectors for each type of Element:


$action = $_REQUEST['a'];

/* First, make sure were on an Element panel */
if (strpos($action, 'element') !== false) {

    /* Now set the appropriate selector */

    if (strpos($action, 'template') !== false) {
        $selector = 'ext-gen126';
    } elseif (strpos($action, 'tv') !== false) {
        $selector = 'ext-gen113';
    } elseif (strpos($action, 'chunk') !== false) {
        $selector = 'ext-gen101';
    } elseif (strpos($action, 'snippet') !== false) {
        $selector = 'ext-gen132';
    } elseif (strpos($action, 'plugin') !== false) {
        $selector = 'ext-gen121';
    }

    if (!$modx->user->isMember('Administrator')) {
        $css = '
        <style>
            {' . $selector . '}  {
                display: none !important;
            }
        </style>
        ';

        $modx->regClientCSS($css);
    }
}
return '';

We had to modify our CSS variable to include the $selector variable in curly braces. We also had separate the $selector variable from the rest of the string.


Hiding Other Fields

You can use the same process to hide any of the fields on the Element panels, though Is Static is the only field I've ever felt the need to hide from naive users.


Too Much Trouble?

This plugin is a lot of work. You might think that Form Customization would be a better option. Unfortunately, Form Customization only works for Resources. Even if it did work for Elements, you'd have to create ten different Form Customization rules to do the job (one for create and one for update for each of the five Element types), assuming that hiding the "Is Static" field is an option. You'd also have to go through the process of creating Form Customization profiles and sets. This plugin might be easier even if it was possible to use Form Customization.


Coming Up

In the next article, we'll finally get away from hiding stuff in the Manager and discuss a new topic: utility snippets.


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 Hosting.com (formerly A2 Hosting). (More information in the box below.)



Comments (0)


Please login to comment.

  (Login)