How to hide elements in Confluence using CSS or JavaScript

お困りですか?

アトラシアン コミュニティをご利用ください。

コミュニティに質問

プラットフォームについて: Server および Data Center のみ。この記事は、Server および Data Center プラットフォームのアトラシアン製品にのみ適用されます。

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.

*Fisheye および Crucible は除く

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.

ソリューション

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 / ButtonSelector 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 Buttoninput#confirm.submit.aui-button
Editor toolbar elementSelector 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
セクション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 FeaturesSelector 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

説明 This article goes through option on how to hide specific elements displayed in Confluence page using CSS or JavaScript.
製品Confluence
プラットフォームServer
最終更新日: 2018 年 10 月 16 日

この内容はお役に立ちましたか?

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.