How to hide elements in Confluence using CSS or JavaScript
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Summary
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.
To hide specific elements displayed in Confluence page using CSS or JavaScript.
Solution
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)
1
2
3
4
5
<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 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:
1
2
3
4
5
<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:
1
2
3
4
5
6
7
<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
Was this helpful?