How to hide elements in Confluence using CSS or JavaScript

Still need help?

The Atlassian Community is here for you.

Ask the community

This Knowledge Base article was written specifically for the Atlassian Server platform. Due to the Functional differences in Atlassian Cloud, the contents of this article cannot be applied to Atlassian Cloud applications.

This guide is for informational purposes and is not eligible for support from Atlassian.  If you have any questions about the information on this page, please reach out to our Atlassian Community for help. 

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:

Menu / Button Selector Name
Browse menu link #browse-menu-link
User menu link #user-menu-link
Tools menu #action-menu-link
Add menu #add-menu-link
Share button #shareContentLink
Edit button #editPageLink
Confluence 5.x and above
Space Directory Link #space-directory-link
People Directory Link #people-directory-link
Create Page Button #create-page-button
Delete Space Confirm Button input#confirm.submit.aui-button
Editor toolbar element Selector Name
Bold button #rte-button-bold
Italic button #rte-button-italic
Underline button #rte-button-underline
Color picker #color-picker-control
"More" menu #more-menu
Bullet list button #rte-button-bullist
Numbered list button #rte-button-numlist
Task list button #rte-button-tasklist
Outdent button #rte-button-outdent
Indent button #rte-button-indent
Alignleftbutton #rte-button-justifyleft
Alignrightbutton #rte-button-justifyright
Aligncenterbutton #rte-button-justifycenter
Insert table #insert-table-dropdown
"Insert" menu #insert-menu
Section Selector Name
Comments section #comments-section
Labels section #labels-section
Likes section #likes-section
Likes and labels sections #likes-and-labels-container
Metadata section .page-metadata-modification-info
Child pages section #children-section
Social Features Selector Name
Follow from the user profile #profile-user-follow
Follow from the hover menu .follow

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:

You may also apply this space-wide by navigating to Browse > Space Admin when you are on the corresponding space and edit the Stylesheet. Please note that you will not need the first and the last line of the following code in this case (so the lines starting with <style and </style> shall be removed)

<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

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

Description This article goes through option on how to hide specific elements displayed in Confluence page using CSS or JavaScript.
Product Confluence
Platform Server
Last modified on Oct 16, 2018

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.