Purpose

To hide specific elements displayed in Confluence page using CSS or JavaScript.

Solution

Finding the Selector Name

Each element in Confluence page has a selector name, which is an ID or class name for a DOM element tag. The selector name is needed to determine which elements need to be hidden. You can use your browser's Developer Tools to find out the selector name. Here are the list of selector names of each Confluence element:

Using CSS

Confluence provides the ability to include CSS either inside the Custom HTML or HTML macro. Including the CSS inside the Custom HTML will apply the changes in all pages and spaces, except the Administration Console pages. However, including the CSS inside the HTML macro will force the changes in a specific page in which the macro is placed.

To include CSS inside Custom HTML, go to Confluence Admin > Custom HTML and insert the code in the "At end of the HEAD" textbox. Ensure that the codes are wrapped inside the <style> tag and change selectorName to the name of selector above:

<style type="text/css">
    selectorName {
		display:none !important;
	}
</style>

To include CSS inside the HTML Macro, ensure that HTML Macro is enabled. In Confluence Editor, click Insert > Other Macros, search for HTML Macro, and insert it into the page. Inside this macro, CSS can be added and they need to be wrapped inside <style> tag as explained above.

Related Pages

• Styling Confluence with CSS
• Basic Styling Tutorial
• Styling Tabs in Confluence  (Confluence 4.3 and earlier)

Using JavaScript

Hiding elements using JavaScript is only necessary in certain circumstances, i.e. when incorporating it with JS events. Here's an example to hide elements using JavaScript. Ensure that selectorName is changed to the name of selector above:

<script type="text/javascript">
    AJS.toInit(function(){
	  AJS.$('selectorName').hide();
    });
</script>

Please make sure to close the script tag with </script> as it can create a problem in your instance. 

Use the window.location.pathname property if the selector is used in multiple pages but you only want to hide the button on specific pages: 

<script type="text/javascript">
    AJS.toInit(function(){
      if (window.location.pathname == '/spaces/removespace.action') {
      AJS.$('input#confirm.submit.aui-button').hide();
      }
    });
</script>

Please refer to the following document for more information on JavaScript: How to use JavaScript in Confluence