How Can I Hide Elements in the Export dialogue?

Question

How can I hide specific elements of the export dialogue UI?

Answer

The Scroll Exporter dialog in Confluence displays several UI elements such as tips, the K15t logo, and the export settings button. Administrators can simplify this dialog by hiding selected elements through a script added to Confluence’s Custom HTML configuration.

Applying the Script

To apply the customization:

Navigate to General Configuration → Look and Feel → Custom HTML.
Insert the provided script into the At end of the BODY section.
Save the changes.
Open the Export Dialogue to confirm that the selected elements are hidden.

The script is designed to inject CSS rules into the export dialog iframe, ensuring that specified elements are not displayed.

CODE

<script>
(function () {
  var IFRAME_ID = 'k15t-cxp-export-pdf-spark-app-container-iframe';
  
  var HIDE_CONFIG = {
    tips: true,
    // logo: true,
    // settingsButton: true
  };

  // CSS selectors mapped to hide config
  var SELECTORS = {
    tips: '[class*="ExportMessageWrapper"]',
    logo: '.scroll-export-dialog-logo',
    settingsButton: '[class*="ExportSettingsButton"]'
  };

  function generateHideCSS() {
    var rules = [];
    for (var key in HIDE_CONFIG) {
      if (HIDE_CONFIG[key] && SELECTORS[key]) {
        rules.push(SELECTORS[key] + ' { display: none !important; }');
      }
    }
    return rules.join('\n');
  }

  function injectCSS(doc) {
    var css = generateHideCSS();
    if (!css) return;

    var style = doc.createElement('style');
    style.type = 'text/css';
    style.id = 'k15t-custom-hide-styles';

    style.appendChild(doc.createTextNode(css));

    var head = doc.head || doc.getElementsByTagName('head')[0];
    if (head) {
      head.appendChild(style);
    }
  }

  function handleIframe(iframe) {
    if (iframe._k15tProcessed) return;

    function onIframeLoad() {
      var idoc;
      try {
        idoc = iframe.contentDocument || iframe.contentWindow.document;
      } catch (e) {
        return;
      }

      if (!idoc || !idoc.body || idoc.getElementById('k15t-custom-hide-styles')) return;

      injectCSS(idoc);
    }

    iframe.addEventListener('load', onIframeLoad);
    onIframeLoad();
    iframe._k15tProcessed = true;
  }

  function watchForIframe() {
    var iframe = document.getElementById(IFRAME_ID);
    if (iframe) {
      handleIframe(iframe);
      return true; 
    }
    return false; 
  }

  function init() {
  
    if (watchForIframe()) return;

    var observer = new MutationObserver(function(mutations) {
      for (var i = 0; i < mutations.length; i++) {
        var nodes = mutations[i].addedNodes;
        for (var j = 0; j < nodes.length; j++) {
          var node = nodes[j];
          if (node.nodeType === 1) {
            if (node.id === IFRAME_ID || node.querySelector && node.querySelector('#' + IFRAME_ID)) {
              watchForIframe();
            }
          }
        }
      }
    });

    observer.observe(document.body || document.documentElement, {
      childList: true,
      subtree: true
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

Configuring Which Elements to Hide

The script contains a configuration object named HIDE_CONFIG and this object defines which elements of the export dialog are hidden. To hide an element, uncomment the corresponding line and ensure it is set to true. To keep an element visible, the line can remain commented out (or can be removed)

tips - hides the tip/ informative text displayed in the export dialogue
logo - hides the K15t logo in the bottom-left corner of the dialogue
settingsButton - hides the export properties button from the dialogue header

Example

In the provided code snippet above, only the tips/information text is hidden from the export dialogue. However, if you are wanting to also hide the K15t logo and export properties, you can replace lines 5-9 of the code snippet with the following code:

CODE

 var HIDE_CONFIG = {
    tips: true,
    logo: true,
    settingsButton: true
  };