안녕하세요,
모두에게 게시글의 가시성을 표시하는 작은 CSS 트윅을 공유하려고 합니다. 저희 포럼에서는 사용자가 자신이 작성한 게시글의 가시성(공개인지, 비공개 메시지인지, 공개 대화인지)을 잘 인식하지 못하는 경우가 종종 있었습니다. 이로 인해 많은 사용자가 개인 정보 등을 공개적으로 게시하는 일이 빈번하게 발생했죠…
이제 저는 모든 게시글에 가시성을 추가하는 작은 CSS 코드를 만들어 이를 모두에게 더 명확하게 보이도록 했습니다. 가시성 유형은 공개(Public), 커뮤니티 (제한된 카테고리), 비공개(Private) 3가지입니다.
admin/ 에 다음을 추가하세요.
Desktop/CSS 
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Public";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f023 \00a0 Private";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f0c0 \00a0 Community";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
Mobile/CSS
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Public";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f023 \00a0 Private";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f0c0 \00a0 Community";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
Common/ </head> 섹션
font-family: 'Font Awesome\ 5 Free', var(--font-family);에는 Font Awesome 아이콘이 포함되어 있으므로, 이 아이콘을 표시하려면 </head> 섹션에 추가해야 합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
아이콘을 비활성화하려면 다음 버전을 사용하면 됩니다.
아이콘 없이
admin/ 에 다음을 추가하세요.
Desktop/CSS
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Public";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: var(--font-family);
content: "Private";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: var(--font-family);
content: "Community";
font-size: $font-down-2;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
margin-left: 11px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
Mobile/CSS
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Public";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
body.archetype-private_message .topic-body .contents::after {
font-family: var(--font-family);
content: "Private";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
#main-outlet .read_restricted .topic-body .contents::after {
font-family: var(--font-family);
content: "Community";
font-size: $font-down-3;
color: var(--primary-very-high);
background: var(--primary-low);
padding: 3px 8px;
border-radius: 8px;
font-weight: 900;
line-height: normal;
}
그리고 </head> 섹션에 추가할 것은 없습니다. 
감사합니다 이것이 저희 커뮤니티에 도움이 되기를 바라며, 같은 문제를 겪고 계신 분들에게도 도움이 되기를 바랍니다.
실제로 어떻게 작동하는지 확인하려면 https://vaperina.cc 를 방문하여 아무 주제나 클릭해 보세요. 게시글에 공개 가시성 배지가 표시되는 것을 볼 수 있습니다. 헝가리어로 표시됩니다.