[Confluence Server/Data Center] CSS 또는 Javascript를 사용하여 페이지 요소를 숨기기
- 구단희
문제
CSS 또는 Javascript를 사용하여 Confluence 페이지에 표시되는 특정 요소들을 숨길 수 있습니다.
해결책
선택기 이름 찾기
Confluence 페이지 내의 각 요소에는 ID 또는 Class 이름이 있습니다. 어떤 요소를 숨겨야 할 때 해당 요소의 이름을 알아야만 합니다.
브라우저의 개발자 도구(F12)를 사용하여 선택기 이름을 찾을 수 있습니다.
각 Confluence 요소의 선택기 이름 목록은 다음과 같습니다.
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 |
CSS 사용하기
Confluence는 사용자 정의 HTML 또는 HTML 매크로 내에 CSS를 포함하는 기능을 제공합니다.
사용자 정의 HTML의 경우, 전역의 모든 페이지와 공간에 변경 사항이 적용됩니다.
그러나 HTML 매크로의 경우, 매크로가 삽입 된 특정 페이지만 변경됩니다.
사용자 정의 HTML은 Admin system() > 사용자 정의 HTML 로 이동하여 “At end of the HEAD“ 텍스트 상자에 코드를 삽입하여 적용합니다.
코드가 <style> 태그 안에 포함되어 있는지 확인하고 필요한 선택기 이름으로 변경합니다.
<style type = "text/css">
선택기 이름 {
display : none !important;
}
</style>공간에 있을 때 공간 관리 로 이동하여 스타일시트를 편집하여 공간 전체에 적용할 수도 있습니다 . 이 경우 다음 코드의 첫 번째 줄과 마지막 줄은 필요하지 않으므로 <style 및 </style> 로 시작하는 줄은 제거해야 합니다.
내부에 CSS를 포함하려면 페이지 편집 시 Insert > Other Macros를 클릭하고 다음을 검색하세요. HTML 매크로을 클릭하고 페이지에 삽입합니다.
Javascript 사용하기
JavaScript를 사용하여 요소를 숨기는 것은 JS 이벤트와 통합할 때만 필요합니다.
<script type = "text/javascript">
AJS.toInit(function(){
AJS.$('선택기 이름').hide();
});
</script>관련 문서
Confluence의 탭 스타일링 (Confluence 4.3 이하)