Suite | Growth, Professional, Enterprise 또는 Enterprise Plus |
Support(다음 포함) | Guide Professional 또는 Enterprise |
CSS(Cascading Style Sheets)를 사용해서 헬프 센터의 디자인을 쉽게 사용자 지정할 수 있습니다. 이 쿡북은 원하는 대로 헬프 센터를 디자인할 수 있도록 도와드리기 위해 마련되었습니다.
CSS에 액세스하고 편집하려면 CSS 또는 JavaScript 사용자 지정하기를 참조하세요.
CSS가 생소하거나 기억을 더듬을 필요가 있다면 다음 튜토리얼을 살펴보시기 바랍니다.
-
CSS 시작하기는 완전 초보자를 대상으로 한 가장 완전한 CSS 튜토리얼로 직접 실행해 볼 수 있는 실용적인 예와 함께 이 언어의 기본적인 기능들을 자세히 안내해 줍니다.
-
CSS 초보자 튜토리얼은 시작하기에 충분한 정보를 제공합니다.
헬프 센터 기본서식 작성 언어 또는 JavaScript를 사용해서 헬프 센터의 디자인을 사용자 지정할 수도 있습니다.
목차
이 쿡북은 헬프 센터의 요소를 망라하는 섹션으로 구성되어 있습니다. 각 섹션은 테마의 스타일시트에 바로 붙여넣을 수 있는 CSS 코드를 포함하고 있습니다. 코드를 있는 그대로 사용하거나 편집하여 사용할 수 있습니다.
이 쿡북에서는 대략적으로 살펴 봅니다. HTML 기본서식과 CSS 스타일시트를 수정하여 할 수 있는 일은 무궁무진합니다.
머리글 및 바닥글
검색
지식창고 문서
머리글 및 바닥글
머리글은 테마와 사용자 역할에 따라 로고 및 기타 구성 요소를 표시합니다. 바닥글을 사용하여 관련 링크, 회사 정보 또는 법적 고지를 표시할 수 있습니다.
목차로 돌아가기
머리글이나 바닥글의 배경 색 변경.
다음 선택기에서 background-color 특성을 변경하거나 추가합니다.
머리글:
.header {
background-color: #666;
}
바닥글:
.footer {
background-color: #333;
}
머리글이나 바닥글의 높이 변경
다음 선택기에서 height 특성을 변경하거나 추가합니다.
머리글:
.header {
height: 70px;
}
바닥글:
.footer {
height: 20px;
}
머리글이나 바닥글 위 또는 아래 공백 변경
다음 선택기에서 margin-bottom 및 margin-top 특성을 변경하거나 추가합니다.
머리글:
.header {
margin-bottom: 20px;
}
바닥글:
.footer {
margin-top: 10px;
}
선택한 언어의 모양 변경
다음 선택기 및 특성을 추가합니다.
.language-selector .dropdown-toggle {
color: green;
}
문의 등록 링크의 모양 변경
header.hbs 기본서식은 응답성을 높이기 위해 동일한 기본서식에 헤더의 데스크톱 버전과 모바일 버전이 모두 있습니다. 데스크톱 버전은 nav-wrapper-desktop
이라는 클래스가 있는 div에 포함되어 있고 모바일 버전은 nav-wrapper-mobile
이라는 클래스가 있는 div에 포함되어 있습니다. 각 div에는 개별적인 문의 등록 링크가 포함되어 있습니다. 링크의 모양을 변경하려면 CSS 규칙의 데스크톱 및 모바일 버전을 만들고 해당 선택기의 특이도를 높여야 합니다.
style.css 파일에 다음 선택기를 추가하고 텍스트 특성을 수정하세요.
.nav-wrapper-desktop a.submit-a-request {
font-size: 14px;
color: green;
}
.nav-wrapper-mobile a.submit-a-request {
font-size: 12px;
color: green;
}
문의 등록 링크 숨기기
style.css 파일에 다음 선택기를 추가하세요.
.nav-wrapper-desktop a.submit-a-request {
display:none;
}
.nav-wrapper-mobile a.submit-a-request {
display:none;
}
로그인 링크의 모양 변경
다음 선택기에서 텍스트 특성을 추가하거나 수정합니다.
.login {
font-size: 14px;
color: green;
}
로고 크기 변경
권장 로고 이미지 크기는 200픽셀 x 50픽셀이지만 필요한 경우 이 기본값을 무시할 수 있습니다.
로고 크기를 변경하려면 다음과 같이 하세요.
- 지식 관리의 사이드바에서 디자인 사용자 지정(
)을 클릭합니다.
- 테마 편집을 클릭합니다.
-
CSS를 클릭하여 CSS 스타일시트를 연 후 다음 규칙을 검색합니다.
.logo img { max-height: 37px; }
검색하려면 코드 편집기 안을 클릭하고 Control+F(Windows의 경우) 또는 Cmd+F(Mac의 경우)를 누릅니다.
- ".logo img" 선택기에서 높이 특성을 이미지의 높이에 맞게 수정합니다.
- 저장을 클릭합니다.
검색
검색 상자는 지식창고와 커뮤니티 둘 다에서 콘텐츠를 찾아 결과 페이지에 링크를 표시합니다. 원하는 경우 검색 상자를 제거할 수 있습니다. 자세한 내용은 헬프 센터 기본서식 가이드에서 검색 도우미를 참조하세요.
목차로 돌아가기
검색 필드의 너비 또는 높이 변경
다음 선택기에서 width 또는 height 값을 변경합니다.
큰 검색 상자:
.search input[type=search] {
height: 50px;
width: 90%;
}
작은 검색 상자:
.search-small input[type=search] {
height: 50px;
width: 320px;
}
검색 필드의 배경 색 변경
다음 선택기에서 background 특성을 변경합니다.
큰 검색 상자:
.search input[type=search] {
background: #999;
}
작은 검색 상자:
.search-small input[type=search] {
background: #999;
}
검색 텍스트의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
큰 검색 상자:
.search {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}
작은 검색 상자:
.search-small {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}
결과 페이지 제목의 모양 변경
검색 결과 페이지의 제목은 검색어에 리턴된 결과 수로 구성됩니다. 예: “일련번호”에 대한 9개의 결과
스타일시트에 아직 없는 경우에는 다음 선택기를 추가하고, 텍스트 특성을 변경하거나 추가합니다.
.search-results-heading {
font-size: 36px;
font-family: Tahoma, Arial, sans-serif;
}
검색 결과 키워드 강조 표시의 모양 변경
검색 결과 내 강조 표시된 용어는 .search-result-description 컨테이너에서 인라인 요소인 <em>으로 둘러싸여 있습니다. 강조 표시를 노란색 배경으로 굵게 표시하려면 다음과 같이 할 수 있습니다.
.search-result-description em {
font-weight: bold;
background-color: #FFF3CA;
padding: 0px 3px 2px;
border-radius: 3px;
}
지식창고 및 커뮤니티 제목의 모양 변경
다음 선택기에서 텍스트 특성을 추가하거나 수정합니다.
.search-results-subheading {
font-size: 24px;
font-family: Tahoma, Arial, sans-serif;
}
결과 사이의 간격 변경
다음 선택기에서 margin-bottom 특성을 추가합니다.
.search-result {
margin-bottom: 20px;
}
결과 텍스트의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
.search-result {
font-size: 105%;
font-family: Arial, Helvetica, sans-serif;
}
결과 링크의 색 변경
다음 선택기에서 color 특성을 추가하거나 수정합니다.
.search-result a {
color: #484;
}
이동 경로
이동 경로는 사용자들이 헬프 센터에서 콘텐츠를 찾는 데 도움이 됩니다. 원하는 경우 이동 경로를 제거할 수 있습니다. 자세한 내용은 헬프 센터 기본서식 가이드에서 이동 경로 도우미를 참조하세요.
목차로 돌아가기
이동 경로 위 또는 아래 공백 변경
다음 선택기에서 padding 특성을 추가하거나 수정합니다.
.breadcrumbs {
padding-top; 20px;
padding-bottom: 16px;
}
이동 경로 텍스트의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
.breadcrumbs li {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
이동 경로 링크의 색 변경
다음 선택기 및 특성을 추가합니다.
.breadcrumbs li a {
color: #484;
}
이동 경로의 포인터 문자(>) 변경
다음 선택기에서 color 및 content 특성을 변경합니다.
.breadcrumbs li + li:before {
color: #158EC2;
content: ">>";
}
문서 목록
테마에 따라 홈 페이지, 카테고리 시작 페이지 및 섹션 시작 페이지에 문서 목록이 사용됩니다.
목차로 돌아가기
문서 목록 주위 공백 변경
다음 선택기 및 padding 특성을 추가하거나 수정합니다.
.article-list {
padding-left: 16px;
padding-right; 20px;
}
문서 사이의 간격 변경
다음 선택기에서 margin-bottom 특성을 변경합니다.
.article-list > li {
margin-bottom: 10px;
}
문서 링크의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
.article-list > li {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
문서 링크의 색 변경
다음 선택기 및 특성을 추가합니다.
.article-list li a {
color: #FFF;
}
지식창고 문서
지식창고에서 문서의 디자인을 변경할 수 있습니다.
목차로 돌아가기
문서 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-header h1 {
color: #993;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
}
문서 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-body {
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
문서 링크의 색 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-body a {
color: #930;
}
작성자 이름의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-author a {
color: #669;
font-family: Georgia, Times New Roman, serif;
font-size: 16px;
}
마지막 업데이트된 문자열의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-updated {
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
}
“이 문서가 도움이 되었습니까?"의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-vote-question {
color: #763;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
투표 카운터의 모양 변경
예: “8명 중 6명이 유용하다고 평가했습니다.” 다음 선택기 및 특성을 추가하거나 수정합니다.
.article-vote-count {
font-family: Georgia, Times New Roman, serif;
font-size: 10px;
}
"또 다른 질문이 있으십니까? 문의 등록"의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-more-questions {
font-family: Arial, Helvetica, sans-serif;
font-size: 105%;
}
댓글 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-comments h2 {
color: #666;
font-family: Georgia, Times New Roman, serif;
font-size: 130%;
}
댓글 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.comment-body {
color: #666;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
커뮤니티 질문 및 답변
커뮤니티에서 콘텐츠의 디자인을 변경할 수 있습니다.
목차로 돌아가기
질문 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-title {
color: #484;
font-family: Verdana, Geneva, sans-serif;
font-size: 120%;
}
질문 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-text {
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
}
질문 링크의 색 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-text a {
color: #484;
}
질문 작성자 이름의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-author {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
링크 색을 변경하려면 다음 선택기 및 특성을 추가하거나 수정합니다.
.question-author a {
color: #484;
}
질문 작성자의 이름, 질문 게시 후 경과 시간 및 공유 링크는 보통 페이지에서 함께 그룹화되어 있으므로 이 3가지 요소를 모두 동일한 모양으로 디자인하는 것이 좋습니다. 다음과 같이 선택기를 결합하여 사용하면 됩니다.
.question-author, .question-published, .question-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
질문 게시 후 경과 시간의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-published {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
질문 공유 링크의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
답변 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-list-heading {
color: #4CC;
font-family: Verdana, Geneva, sans-serif;
font-size: 105%;
}
답변 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-text {
color: #333;
font-family: Tahoma, Geneva, sans-serif;
font-size: 105%;
}
답변 작성자 이름의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-author {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
링크 색을 변경하려면 다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-author a {
color: #484;
}
답변 작성자의 이름, 답변 게시 후 경과 시간 및 공유 링크는 보통 페이지에서 함께 그룹화되어 있으므로 이 3가지 요소를 모두 동일한 모양으로 디자인하는 것이 좋습니다. 다음과 같이 선택기를 결합하여 사용하면 됩니다.
.answer-author, .answer-published, .answer-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
답변 게시 후 경과 시간의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-published {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
답변 공유 링크의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
댓글 47개
Jacquelyn Redington
I am looking for a way to change the the font size and weight to the form fields when an end user is filling out a form. We use our platform as an internal HR ticketing system and we want to provide some instructions to a request form, it would nice nice to have the information bolded especially the acknowledgement check boxes that we have. I am assuming that I would need to input the each customized field ID to display the way that I want. If anyone has done this, please let me know. Thank you
0
Henrik Guldager Andersen
Hi, I am looking for a way to format the boxes on the user request form. background color etc.
Thank you for you help
Henrik Andersen
0
Jane M Langschied
I am looking for a recipe to automatically generate a Table of Contents in every article based on the heading selected. Is there a recipe already created?
1
Andrey Nikolaev
Can I change an article's CSS template for just one section or category rather than the entire Help Center?
0
Max
Hello there,
I am trying to modify the appearance of Send a request link button, but nothing changes.. I am with Copenhagen v3.1.0. Is it because the colour chosen on the homepage og theming is overriding my code ?
Here is my code if it can help
Thank you loads !
0
Casey Keefe
Hi Greg Katechis - Thanks! Yes, we have been getting the same result. This code has been on the live page for months with no reported issues as well.
For a bit more scope - we are essentially trying to add some login functionality to one of the forms and when updating the code, I came across this script error, so figured I would try and fix it while adding the new functionality.
0
Greg Katechis
Thanks for sharing! I just tried a for loop on my new request page and I was getting a similar linting "error", but when I loaded the page, it was executing properly. I can bring this to our dev team to see what's going on here, but first I'd like to know if you're seeing the same behavior as I am. Just let me know if the code is working and if it is, at least we know that's not the issue and we can narrow the scope of the fix.
0
Casey Keefe
Thank you Greg Katechis ! This code is currently on new_request_page.hbs
0
Greg Katechis
Hi Casey! It's difficult to say for sure, but one possibility is that you're adding this to your script.js file, that could be one possibility. You don't need to wrap any js code in script tags on that file, so this is one possible error that would show up. If that isn't what you're doing, could you let me know which file you're adding this to?
0
Casey Keefe
Hi Everyone - Anyone have any ideas why the closing tag for <script> here is showing in red? I've gone line-by-line, but can't seem to figure it out. Thanks in advance!
0
댓글을 남기려면 로그인하세요.