Skip to main content

Can I modify the display of the content editor screen?

For each topic group, you can modify the display of the content editor using the "CSS" or "JavaScript" field in the content structure editor.

Image from Gyazo

CSS​

Example: Hide the "Advanced Settings" section.

{literal}
#section-topics-edit-details{display:none;}
{/literal}
tip

See: Changing the display of the content editor screen for a detailed tutorial.

JavaScript​

Example: Toggle the visibility of ext_2 and ext_3 based on the check state of ext_1.

{literal}
window.addEventListener('load', function() {
    // Function to control the visibility of input elements based on the state of checkboxes
    function toggleInputVisibility() {
        // Get the checkbox with id="ext_1__1"
        var checkbox1 = document.getElementById('ext_1__1');
        // Get the input element with name="ext_2"
        var inputText2 = document.querySelector('input[name="ext_2"]');
        if (inputText2) {
            // Check if the checkbox with id="ext_1__1" is checked
            inputText2.style.display = checkbox1.checked ? '' : 'none'; // Show if checked, hide otherwise
        }

        // Get the checkbox with id="ext_1__2"
        var checkbox2 = document.getElementById('ext_1__2');
        // Get the input element with name="ext_3"
        var inputText3 = document.querySelector('input[name="ext_3"]');
        if (inputText3) {
            // Check if the checkbox with id="ext_1__2" is checked
            inputText3.style.display = checkbox2.checked ? '' : 'none'; // Show if checked, hide otherwise
        }
    }

    // Run once when the page loads to set the initial state
    toggleInputVisibility();

    // Set up an event listener to respond to checkbox state changes
    document.body.addEventListener('change', function(event) {
        // Check if the changed element is the checkbox with id="ext_1__1" or id="ext_1__2"
        if (event.target.id === 'ext_1__1' || event.target.id === 'ext_1__2') {
            toggleInputVisibility();
        }
    });
});
{/literal}

Note​

  • Smarty is enabled. Therefore, make sure to enclose any instances of { } in {literal} {/literal} tags.
  • We cannot guarantee the functionality of the management screens after modifications with your custom CSS/JavaScript.
  • Any problems caused by CSS/JavaScript modifications can be investigated for a fee.

Support

If you have any other questions, please contact us or check out Our Slack Community.

Contact form
Join Kuroco Slack community