테마 편집기

소개

설문조사 테마는 참여자에게 설문조사가 어떻게 보이는지를 제어합니다. 페이지 레이아웃, 색상, 글꼴, 로고, 모든 질문의 스타일이 여기에 포함됩니다. 테마는 Twig 템플릿, CSS, JavaScript로 구성되며 CSS 프레임워크로 Bootstrap 5를 사용합니다.

일반적인 변경 사항 중 상당수는 코드 없이도 가능합니다. 로고, 색상, 글꼴 및 여러 표시 설정은 테마 옵션에서 변경할 수 있습니다. 더 많은 작업이 필요한 경우, 즉 자체 CSS 또는 JavaScript를 추가하거나, 페이지의 HTML을 변경하거나, 테마에 사용할 이미지 및 기타 파일을 업로드하려면 이 페이지에서 설명하는 테마 편집기를 사용하십시오.

LimeSurvey에는 다음과 같은 핵심 설문조사 테마가 포함되어 있습니다.

• Fruity TwentyThree(fruity_twentythree): 기본 테마입니다.
• Bootstrap Vanilla(vanilla): Bootstrap 기반의 자체 테마를 만들려는 개발자를 위한 기본 테마입니다.
• Fruity(fruity)와 Bootswatch(bootswatch): 둘 다 Bootstrap Vanilla를 확장합니다.

개별 질문 유형의 모양은 설문조사 테마가 아니라 질문 테마에서 제어합니다. 질문 유형의 HTML을 변경하려면 질문 테마를 생성하십시오.

시작하기 전에

테마 편집기를 사용하려면 전역 테마 권한(전역 권한 참조)이 있거나 슈퍼관리자여야 합니다. 테마를 확장하려면 생성 권한이, 변경 사항을 저장하려면 업데이트 권한이, 테마를 삭제하거나 파일을 재설정하려면 삭제 권한이 필요합니다.

  오류가 있는 테마는 해당 테마를 사용하는 모든 설문조사를 사용할 수 없게 만들 수 있습니다. 테마를 실제 설문조사에 적용하기 전에 설문조사 미리보기로 변경 사항을 테스트하십시오.

핵심 테마는 편집할 수 없으므로 확장하십시오

핵심 테마는 LimeSurvey와 함께 업데이트되므로 직접 변경할 수 없습니다. 핵심 테마를 사용자 지정하려면 해당 테마를 확장하십시오. 확장하면 상위 테마의 모든 내용을 상속하는 새 사용자 테마가 생성됩니다. 새 테마에는 사용자가 변경한 파일만 포함되며, 나머지는 모두 상위 테마에서 가져옵니다. 이렇게 하면 LimeSurvey가 상위 테마를 업데이트할 때 버그 수정과 개선 사항이 테마에도 계속 적용됩니다.

테마를 확장하려면 다음 중 하나를 수행하십시오.

• 설정 > 테마로 이동하여 해당 테마 행 끝의 작업 메뉴(⋯)를 열고 확장을 클릭합니다.
• 테마 편집기에서 테마를 열고 도구 모음의 확장을 클릭합니다.

새 테마의 이름을 입력하십시오. 그러면 테마 편집기에서 새 테마가 열립니다.

테마 저장 위치

• 핵심 테마: LimeSurvey 설치 폴더의 themes/survey/.
• 사용자 테마(확장, 업로드 또는 가져온 테마): upload/themes/survey/.

서버에서 원하는 편집기로 사용자 테마의 파일을 직접 편집할 수도 있습니다. 이후에도 테마 편집기를 계속 사용할 수 있도록 웹 서버가 파일을 읽고 쓸 수 있는 상태인지 확인하십시오.

테마 편집기

테마 편집기를 열려면 설정 > 테마로 이동하여 해당 테마 행 끝의 작업 메뉴(⋯)를 열고 테마 편집기를 클릭합니다.

핵심 테마를 열면 표준 테마임을 알리는 안내와 함께 테마를 확장할 수 있는 링크가 표시됩니다. 파일과 미리보기는 볼 수 있지만 변경 사항은 저장할 수 없습니다.

도구 모음

• 내보내기: 테마를 ZIP 파일로 다운로드합니다.
• 확장: 이 테마를 상속하는 새 테마를 생성합니다(위 참조).
• 이름 변경: 테마의 이름을 변경합니다. 사용자 테마에서만 사용할 수 있습니다.
• 삭제: 테마를 삭제합니다. 기본 테마로 설정된 테마는 삭제할 수 없습니다.
• 테마: 테마 편집기를 다른 테마로 전환합니다.
• 화면: 미리보기에 표시할 설문조사 페이지와 편집용으로 나열할 파일을 선택합니다. 화면은 질문, 설문조사 목록, 시작, 완료, 평가, 오류, 모두 지우기, 불러오기, 저장, 등록, 응답 인쇄, 공개 통계, PDF, 할당량 초과, 탐색, 참여자입니다.

파일 편집

오른쪽 패널에는 선택한 화면에서 사용하는 파일이 나열됩니다.

• 화면 부분 파일: 페이지를 구성하는 Twig 템플릿입니다.
• JavaScript 파일
• CSS 파일
• 기타 파일: 이미지, 글꼴 및 테마의 기타 모든 파일입니다.

파일명을 클릭하면 편집기에서 파일이 열립니다. 상속됨으로 표시된 파일은 상위 테마에서 가져온 파일입니다. 상속된 파일도 편집할 수 있습니다. 이 경우 편집기 아래의 버튼에 로컬 테마로 복사하여 변경 사항 저장이라고 표시되며, 저장하면 변경한 내용과 함께 파일이 사용자 테마로 복사됩니다. 그 이후에는 상위 테마의 파일 대신 사용자 테마의 복사본이 사용됩니다.

사용자 테마에 속한 파일에는 재설정 버튼이 있습니다. 재설정하면 복사본이 삭제되어 상위 테마의 파일이 다시 사용됩니다.

파일 업로드

기타 파일 패널 하단의 업로드 필드를 사용하여 이미지, 글꼴 또는 기타 파일을 테마에 추가할 수 있습니다. 업로드한 파일은 테마의 files/ 폴더에 저장됩니다. 기본적으로 이미지(gif, ico, jpg, jpeg, png)와 다음 파일 형식을 업로드할 수 있습니다: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq, lsg. 관리자는 config.php의 allowedthemeimageformats 및 allowedthemeuploads 설정으로 이 목록을 변경할 수 있습니다.

업로드한 이미지를 Twig 파일에 표시하려면 image() 함수를 사용하십시오.

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

CSS 파일에서는 css 폴더를 기준으로 한 상대 경로로 업로드한 파일을 참조합니다. 예: url('../files/background.jpg').

미리보기

편집기 아래의 미리보기에는 선택한 화면이 샘플 콘텐츠와 함께 표시됩니다. 모바일, 640x480, 800x600, 1024x768, 완료응답 버튼을 사용하여 다양한 화면 크기에서 페이지를 확인할 수 있습니다.

미리보기는 샘플 데이터를 사용하므로 실제 설문조사와 똑같이 모든 스타일을 표시하지 않을 수 있습니다. 변경 사항은 항상 실제 설문조사 미리보기에서도 확인하세요.

테마 가져오기 및 내보내기

• 테마를 다른 LimeSurvey 설치본으로 옮기려면 테마 편집기 도구 모음에서 내보내기를 클릭하세요. 테마가 ZIP 파일로 다운로드됩니다.
• ZIP 파일에서 테마를 설치하려면 설정 > 테마로 이동하여 탑재 및 설치를 클릭하세요.

테마의 구성

테마 폴더

테마 폴더에는 다음이 들어 있습니다.

• config.xml: 테마 매니페스트입니다. 이름, 상위 테마, CSS 및 JavaScript 파일, 테마 옵션, 테마 편집기에 표시되는 화면이 정의되어 있습니다.
• views/: Twig 템플릿입니다. layout_global.twig는 대부분의 설문조사 페이지에 사용되는 기본 레이아웃입니다. 다른 레이아웃은 특수 페이지에 사용됩니다. 예를 들어 layout_survey_list.twig는 공개 설문조사 목록용, layout_errors.twig는 오류 페이지용입니다. views/subviews/ 폴더에는 레이아웃에 포함되는 작은 템플릿이 들어 있습니다.
• css/ 및 scripts/: 테마의 CSS 및 JavaScript 파일입니다.
• files/: 테마에서 사용하는 이미지 및 기타 파일입니다.
• options/: 테마 옵션 페이지입니다.

Twig 템플릿

템플릿은 aSurveyInfo 변수로 설문조사 데이터를 받습니다. 이 변수에 들어 있는 모든 내용을 보려면 application/config/config.php에서 디버그 모드를 켜고 layout_global.twig의 body 요소 끝에 다음 줄을 추가하세요.

{{ dump(aSurveyInfo) }}

템플릿에서 사용할 수 있는 함수는 사용 가능한 Twig 함수를 참조하세요. 보안상의 이유로 템플릿은 샌드박스에서 실행되므로 이 함수들만 사용할 수 있습니다.

config.xml

<files> 섹션에는 설문조사 페이지에서 로드되는 CSS 및 JavaScript 파일이 나열됩니다.

• <add>는 파일을 추가합니다. 상위 테마에 같은 이름의 파일이 이미 있으면 사용자의 파일이 그 파일을 대체합니다.
• <remove>는 상위 테마의 파일이 로드되지 않도록 합니다.

상위 테마의 파일은 어차피 로드되므로 다시 나열할 필요가 없습니다.

LimeSurvey는 테마를 설치할 때 config.xml을 읽어 설정을 데이터베이스에 저장합니다. 설치된 테마의 config.xml을 변경한 후에는 설정 > 테마로 이동하여 해당 테마의 작업 메뉴(⋯)를 열고 재설정을 클릭하면 파일을 다시 로드합니다.

사용자 CSS 및 JavaScript 추가

모든 핵심 테마에는 사용자 코드를 위한 파일이 두 개 마련되어 있습니다.

• css/custom.css: 다른 모든 CSS 파일 뒤에 로드되므로 이 파일의 규칙이 테마의 스타일보다 우선합니다.
• scripts/custom.js: 테마 자체의 JavaScript 뒤에 로드됩니다.

테마를 확장할 때는 이 파일들을 수정하세요. 테마의 기본 CSS 파일을 직접 편집하지 말고 custom.css에 CSS를 추가하면 상위 테마의 업데이트를 계속 받을 수 있습니다.

파일을 더 추가하려면 파일을 업로드한 후 테마의 config.xml에 있는 <files> 섹션에 나열하세요. 상위 테마에 없는 파일명을 사용해야 합니다. 그렇지 않으면 사용자의 파일이 상위 테마의 파일을 대체합니다.

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

설문조사 페이지는 기본적으로 Ajax로 로드되므로 참여자가 다음 페이지로 이동할 때 브라우저가 전체 페이지를 다시 로드하지 않습니다. JavaScript는 첫 페이지 로드와 모든 Ajax 페이지 로드 시 모두 실행되도록 하세요.

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

CSS로 질문 스타일 지정

이 섹션의 모든 예제는 테마의 custom.css 파일에 넣습니다.

페이지 클래스

<html> 및 <body> 요소에는 전체 페이지의 스타일을 지정하는 데 사용할 수 있는 클래스가 있습니다.

• html: 언어 코드(예: en)와 텍스트 방향(dir-ltr 또는 dir-rtl)입니다.
• body: 테마 및 각 상위 테마의 이름(예: fruity_twentythree), 글꼴(예: font-ibm-sans), 언어(예: lang-en), 그리고 로고가 표시될 때의 brand-logo입니다.

질문 컨테이너 클래스

각 질문은 question-container 클래스를 가진 요소로 감싸집니다. 이 요소에는 다음 클래스도 함께 지정됩니다.

• 질문 유형의 클래스(아래 표 참조)
• mandatory: 질문이 필수 또는 소프트 필수입니다.
• input-error: 응답이 유효성 검사를 통과하지 못했거나 필수 질문에 응답하지 않았습니다.
• missing: 질문에 아직 응답하지 않은 부분이 있는데 참여자가 이미 그 질문을 지나쳤습니다.
• ls-hidden 및 ls-irrelevant: 질문이 조건에 의해 숨겨져 있습니다.
• ls-hidden-attribute: 질문이 "이 질문 항상 숨기기" 설정에 의해 숨겨져 있습니다.
• 질문의 CSS 클래스 설정(표시 아래)에 입력한 모든 클래스입니다. 개별 질문의 스타일을 지정할 때 사용하세요.

예를 들어 응답하지 않은 필수 목록 (Radio) 질문은 다음과 같습니다.

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

질문 유형 클래스

질문 유형	클래스	유형 코드
5점 척도	.choice-5-pt-radio	5
배열	.array-flexible-row	F
배열 (5점 척도)	.array-5-pt	A
배열(10점 척도)	.array-10-pt	B
배열 (증가, 동일, 감소)	.array-increase-same-decrease	E
배열 (숫자)	.array-multi-flexi	:
배열 (텍스트)	.array-multi-flexi-text	;
배열 (예/불확실/아니오)	.array-yes-uncertain-no	C
컬럼 별 배열	.array-flexible-column	H
배열 이중 척도	.array-flexible-dual-scale	1
날짜/시간	.date	D
수식	.equation	*
파일 업로드	.upload-files	|
성별	.gender	G
대량 자유 서술	.text-huge	U
언어 변경	.language	I
목록 (드롭다운 메뉴)	.list-dropdown	!
목록 (Radio)	.list-radio	L
해설있는 목록	.list-with-comment	O
장문 자유 서술	.text-long	T
다수 답안	.multiple-opt	M
해설있는 다중 선택	.multiple-opt-comments	P
여러 숫자 입력	.numeric-multi	K
짧은 서술 여러 개	.multiple-short-txt	Q
숫자 입력	.numeric	N
순위	.ranking	R
짧은 자유 서술	.text-short	S
텍스트 디스플레이	.boilerplate	X
예/아니오	.yes-no	Y

질문 구성 요소별 클래스

질문 컨테이너 안에서 응답 영역은 다음 클래스를 사용합니다. 일부는 질문의 표시 설정에 따라 달라집니다. 예를 들어 배열 (숫자)은 드롭다운 대신 체크박스를 표시할 때 다른 클래스를 사용합니다.

클래스	용도	사용하는 곳(예시)
.ls-answers	모든 응답 옵션을 담는 요소	모든 질문 유형
.answers-list	응답 옵션의 목록 또는 행	목록 (Radio), 다수 답안, 순위, 대부분의 배열의 행
.subquestion-list, .questions-list	하위 질문의 목록 또는 표	배열, 짧은 서술 여러 개, 여러 숫자 입력
.answer-item	하나의 응답 옵션 또는 입력	거의 모든 질문 유형
.noanswer-item	"응답 없음" 옵션	배열, 5점 척도, 해설있는 목록
.question-item	응답을 겸하는 하위 질문	다수 답안, 짧은 서술 여러 개, 여러 숫자 입력
.radio-list	라디오 버튼의 목록 또는 행	목록 (Radio), 5점 척도, 해설있는 목록, 라디오 배열의 행
.radio-array	라디오 버튼 표	배열, 배열 (5점 척도), 배열(10점 척도), 배열 (증가, 동일, 감소), 배열 (예/불확실/아니요)
.radio-item	레이블이 있는 라디오 버튼 하나	목록 (Radio), 5점 척도, 해설있는 목록, 라디오 배열
.checkbox-list	체크박스 목록	다수 답안, 해설있는 다중 선택
.checkbox-array	체크박스 표	체크박스 레이아웃을 사용하는 배열 (숫자)
.checkbox-item	레이블이 있는 체크박스 하나	다수 답안, 해설있는 다중 선택, 체크박스 레이아웃을 사용하는 배열 (숫자)
.checkbox-text-item	텍스트 필드가 있는 체크박스	해설있는 다중 선택
.comment-item	체크박스 옆의 해설 필드	해설있는 다중 선택
.text-list	텍스트 입력 목록	짧은 서술 여러 개, 여러 숫자 입력
.text-item	텍스트 입력 하나	짧은 자유 서술, 긴 자유 서술, 대량 자유 서술, 짧은 서술 여러 개, 배열 (텍스트)
.number-list, .numeric-item	숫자 입력	여러 숫자 입력, 숫자 입력
.number-array	숫자 입력 표	배열 (숫자), 배열 (텍스트)
.text-array	텍스트 입력 표	배열 (텍스트), 배열 (숫자)
.dropdown-array, .dropdown-list, .dropdown-item	드롭다운이 있는 표, 행, 셀	배열 (숫자), 드롭다운을 사용하는 배열 이중 척도
.date-item	날짜 입력	날짜/시간
.upload-item	파일 업로드 영역	파일 업로드
.answertext	배열 행의 하위 질문 텍스트	배열
.col-answers	하위 질문 텍스트 열	배열
.ls-heading	응답 옵션이 있는 헤더 행	배열
.ls-odd, .ls-even	번갈아 나타나는 행	배열
.ls-label-xs-visibility	작은 화면과 스크린 리더에서만 보이는 레이블	배열의 셀
.ls-input-group-extra	입력의 접두사 또는 접미사	짧은 자유 서술, 숫자 입력, 짧은 서술 여러 개, 여러 숫자 입력
.ls-js-hidden	JavaScript가 활성화되면 숨겨짐	배열 이중 척도, 목록 (Radio)
.ls-no-js-hidden	JavaScript가 활성화되지 않으면 숨겨짐	순위
.ls-js-hidden-sr	JavaScript가 활성화되면 숨겨지지만 스크린 리더는 계속 읽음	순위

목록 (Radio)에서 "응답 없음" 옵션은 noanswer-item 대신 no-anwser-item 클래스를 사용합니다(철자가 이와 같음).

예를 들어, 다음은 목록 (Radio) 질문의 응답에 대한 HTML입니다.

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

유효성 검사 및 팁 클래스

유효성 검사 팁(예: "다음 응답들 중 하나를 선택하십시오" 또는 "1에서 10 사이의 숫자를 입력하십시오")에는 항상 ls-em-tip 클래스가 있습니다. 참여자가 응답하는 동안 LimeSurvey는 팁의 규칙이 충족되면 ls-em-success를, 충족되지 않으면 ls-em-error를 추가하므로 두 상태를 다르게 스타일링할 수 있습니다. 질문의 팁 숨기기 설정으로 숨겨진 팁에는 hide-tip 클래스가 추가됩니다.

각 팁에는 유형별 클래스도 있습니다.

클래스	팁
.em_default	질문 유형의 기본 팁(예: "다음 응답들 중 하나를 선택하십시오")
.em_num_answers	응답의 최소 또는 최대 개수
.em_value_range	최솟값 또는 최댓값
.em_sum_range	값의 합계에 대한 최솟값 또는 최댓값
.em_sum_equals	값의 합이 지정된 합계와 같아야 함
.em_value_integer	정수만 허용됨
.em_numbers_only	숫자만 허용됨
.em_other_numbers_only	"기타" 필드에는 숫자만 허용됨
.em_other_comment_mandatory	"기타" 옵션이 선택되었지만 텍스트 필드가 비어 있음
.em_regex_validation	응답이 유효성 검사 패턴과 일치해야 함
.em_q_fn_validation	질문 유효성 방정식
.em_sq_fn_validation	하위 질문 유효성 검사식

오른쪽에서 왼쪽으로 쓰는(RTL) 언어

오른쪽에서 왼쪽으로 쓰는 언어에서는 <html> 요소에 dir-rtl 클래스가 추가되며, 핵심 테마는 주 CSS 파일의 RTL 버전을 불러옵니다. 오른쪽에서 왼쪽으로 쓰는 언어에만 적용할 규칙에는 CSS에서 .dir-rtl을 사용하십시오.

팁과 요령

이 예제들은 핵심 테마를 확장하여 만든 테마의 custom.css(또는 명시된 경우 Twig 파일)에 넣습니다. 예제에서 #c0392b를 원하는 색상으로 바꾸십시오.

라디오 버튼과 체크박스의 색상 변경

Fruity TwentyThree에 포함된 색상 중 하나를 사용하려면 테마 옵션에서 테마 색상을 선택하십시오. 테마 옵션에서는 다른 아이콘 확인을 선택할 수도 있습니다.

다른 색상을 사용하려면 custom.css에 CSS를 추가하십시오. 핵심 테마는 브라우저의 기본 라디오 버튼과 체크박스 대신 자체적으로 그린 요소를 사용하므로, 색상을 바꾸려면 이렇게 그려진 요소를 변경해야 합니다.

Fruity TwentyThree:

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla, Fruity 및 Bootswatch:

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

시력이 낮은 참여자도 어떤 응답이 선택되었는지 알아볼 수 있도록 색상과 배경 사이에 충분한 대비를 유지하십시오.

라디오 버튼과 체크박스 크기 키우기

라디오 버튼과 체크박스가 크면 휴대폰과 태블릿에서 누르기 더 쉽습니다. 이 방법은 모든 핵심 테마에서 작동합니다.

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

Fruity TwentyThree에서는 라디오 버튼과 응답 텍스트 사이에 간격도 추가하십시오.

.radio-item label {
    padding-left: 14px;
}

약 1.4까지의 값은 추가 변경 없이 작동합니다. 값이 더 크면 작은 화면에서 컨트롤이 응답 텍스트 및 배열 행의 가장자리와 겹치기 시작하므로 주위에 여백을 더 추가해야 합니다.

진행률 표시줄의 색상 변경

.progress-bar {
    background-color: #c0392b;
}

하나의 언어에서만 콘텐츠 표시

<body> 요소에는 lang-en, lang-fr과 같이 현재 언어를 나타내는 클래스가 있습니다. 이를 사용하여 언어별로 다른 콘텐츠(예: 바닥글의 도움말 문구)를 표시할 수 있습니다. 각 언어의 텍스트를 subviews/footer/footer.twig와 같은 테마의 Twig 파일에 추가하십시오.

<div class="help-fr" lang="fr">Pour de l'aide, appelez le 000000</div>
<div class="help-en" lang="en">For help, please call 000000</div>

그런 다음 custom.css에서 다른 언어의 텍스트를 숨기십시오.

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

설문조사별로 다른 로고 사용

로고마다 별도의 테마를 만들 필요는 없습니다. 테마 옵션은 개별 설문조사에 대해 설정할 수 있습니다. 설문조사를 열고 설문조사 설정 메뉴에서 테마 옵션을 클릭한 다음 다른 로고 파일을 선택하십시오. 테마 옵션을 참조하십시오.

사용자 지정 파비콘 표시

파비콘은 브라우저 탭과 북마크에 표시되는 작은 아이콘입니다. 핵심 테마는 테마의 files/favicon.ico 파일을 표시합니다. 나만의 아이콘을 사용하려면 파일 이름을 favicon.ico로 지정하고 확장한 테마의 기타 파일 패널에 업로드하십시오. 그러면 부모 테마의 아이콘이 대체됩니다.

Fruity TwentyThree에서 로고 가운데 정렬

테마 옵션에서 로고를 켠 다음 custom.css에 다음을 추가하세요:

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

공개 설문조사 목록에 나만의 로고 추가

공개 설문조사 목록에는 기본적으로 LimeSurvey 로고가 표시됩니다. 나만의 로고를 표시하려면 다음과 같이 하세요:

1. Fruity TwentyThree를 확장하고 테마 편집기에서 해당 테마를 엽니다.
2. 기타 파일 패널에서 로고를 업로드합니다.
3. 설문조사 목록 화면을 선택하고 layout_survey_list.twig 파일을 엽니다.
4. {{ include('./ls_logo_svg.twig') }}를 포함하는 <div>를 찾습니다. include 줄을 포함하여 이 <div> 전체를 이 단계 아래에 나오는 코드로 바꿉니다.
5. 로컬 테마로 복사하여 변경 사항 저장을 클릭합니다.
6. 설정 > 전역 설정 > 일반으로 이동하여 공개 설문조사 목록 및 오류 페이지용 테마로 해당 테마를 선택합니다.

업로드한 파일의 이름을 사용하고, 대체 텍스트로는 조직의 이름을 사용하세요:

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

이중 척도 배열에 구분선 추가

배열 이중 척도 질문의 두 척도 사이에 세로선을 그리려면 다음과 같이 합니다:

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

질문에서 JavaScript 사용

설문조사의 모든 페이지에서 JavaScript를 실행하려면 테마의 custom.js에 넣으세요(위 참조).

단일 질문 또는 그룹의 텍스트에 스크립트를 추가할 수도 있습니다. 사용자에게 XSS 필터가 꺼져 있지 않으면 LimeSurvey는 이러한 텍스트에서 스크립트를 제거합니다. 이 필터는 슈퍼 관리자에게는 적용되지 않습니다. 다른 사용자의 경우 설정 > 전역 설정 > 보안에서 HTML에서 XSS 필터링을 꺼야 합니다. 설문조사를 편집할 수 있는 모든 사람을 신뢰하는 경우에만 이렇게 하세요. 자세한 내용과 예제는 Workarounds: Manipulating a survey at runtime using Javascript를 참조하세요.