Trình chỉnh sửa chủ đề

Giới thiệu

Chủ đề khảo sát quyết định giao diện khảo sát của bạn hiển thị với người tham gia: bố cục trang, màu sắc, phông chữ, logo và kiểu dáng của từng câu hỏi. Các chủ đề được xây dựng bằng mẫu Twig, CSS và JavaScript, và sử dụng Bootstrap 5 làm framework CSS.

Nhiều thay đổi thông thường hoàn toàn không cần viết mã. Bạn có thể thay đổi logo, màu sắc, phông chữ và một số cài đặt hiển thị bằng các chủ đề tùy chọn. Hãy dùng trình chỉnh sửa chủ đề được mô tả trong trang này khi bạn muốn làm nhiều hơn: thêm CSS hoặc JavaScript của riêng bạn, thay đổi HTML của một trang, hoặc tải lên hình ảnh và các tệp khác cho chủ đề của bạn.

LimeSurvey đi kèm các chủ đề khảo sát cốt lõi sau:

• Fruity TwentyThree (fruity_twentythree): Chủ đề mặc định.
• Bootstrap Vanilla (vanilla): Một chủ đề nền tảng đơn giản dành cho các nhà phát triển muốn xây dựng chủ đề dựa trên Bootstrap của riêng họ.
• Fruity (fruity) và Bootswatch (bootswatch): Cả hai đều mở rộng Bootstrap Vanilla.

Giao diện của từng loại câu hỏi được điều khiển bởi chủ đề câu hỏi, không phải bởi chủ đề khảo sát. Để thay đổi HTML của một loại câu hỏi, hãy tạo một chủ đề câu hỏi.

Trước khi bắt đầu

Để sử dụng trình chỉnh sửa chủ đề, bạn cần có quyền toàn cục Chủ đề (xem quyền toàn cục) hoặc là siêu quản trị viên. Mở rộng một chủ đề cần quyền Tạo, lưu thay đổi cần quyền Cập nhật, còn xóa một chủ đề hoặc thiết lập lại một tệp cần quyền Xóa.

  Một chủ đề có lỗi có thể khiến mọi khảo sát sử dụng nó không thể dùng được. Hãy kiểm tra các thay đổi của bạn bằng cách xem trước khảo sát trước khi sử dụng chủ đề trong khảo sát chính thức.

Không thể chỉnh sửa chủ đề cốt lõi: hãy mở rộng chúng

Các chủ đề cốt lõi được cập nhật cùng với LimeSurvey nên bạn không thể thay đổi trực tiếp. Để tùy chỉnh một chủ đề, hãy mở rộng nó. Việc mở rộng sẽ tạo ra một chủ đề người dùng mới kế thừa mọi thứ từ chủ đề cha. Chủ đề của bạn chỉ chứa các tệp bạn thay đổi; mọi thứ còn lại được lấy từ chủ đề cha. Nhờ vậy, chủ đề của bạn vẫn nhận được các bản sửa lỗi và cải tiến khi LimeSurvey cập nhật chủ đề cha.

Để mở rộng một chủ đề, hãy thực hiện một trong hai cách:

• Vào Thiết lập > Chủ đề, mở menu hành động (⋯) ở cuối hàng của chủ đề và nhấp vào Mở rộng, hoặc
• Mở chủ đề trong trình chỉnh sửa chủ đề và nhấp vào Mở rộng trên thanh công cụ.

Nhập tên cho chủ đề mới. Sau đó trình chỉnh sửa chủ đề sẽ mở chủ đề mới của bạn.

Nơi lưu trữ các chủ đề

• Chủ đề cốt lõi: themes/survey/ trong bản cài đặt LimeSurvey của bạn.
• Chủ đề người dùng (chủ đề được mở rộng, tải lên hoặc nhập vào): upload/themes/survey/.

Bạn cũng có thể chỉnh sửa trực tiếp các tệp của một chủ đề người dùng trên máy chủ bằng trình soạn thảo của riêng bạn. Hãy đảm bảo máy chủ web vẫn có thể đọc và ghi các tệp sau đó, để bạn có thể tiếp tục sử dụng trình chỉnh sửa chủ đề.

Trình chỉnh sửa chủ đề

Để mở trình chỉnh sửa chủ đề, hãy vào Thiết lập > Chủ đề, mở menu hành động (⋯) ở cuối hàng của chủ đề và nhấp vào Trình chỉnh sửa chủ đề.

Nếu bạn mở một chủ đề cốt lõi, một ghi chú sẽ cho bạn biết đây là chủ đề tiêu chuẩn và cung cấp liên kết để mở rộng nó. Bạn có thể xem các tệp của chủ đề và bản xem trước, nhưng không thể lưu thay đổi.

Thanh công cụ

• Xuất: Tải chủ đề xuống dưới dạng tệp ZIP.
• Mở rộng: Tạo một chủ đề mới kế thừa từ chủ đề này (xem phần trên).
• Đổi tên: Đổi tên chủ đề. Chỉ khả dụng cho chủ đề người dùng.
• Xóa: Xóa chủ đề. Bạn không thể xóa chủ đề đang được đặt làm chủ đề mặc định.
• Chủ đề: Chuyển trình chỉnh sửa chủ đề sang một chủ đề khác.
• Màn hình: Chọn trang khảo sát nào được hiển thị trong bản xem trước và những tệp nào được liệt kê để chỉnh sửa. Các màn hình gồm: Câu hỏi, Danh sách khảo sát, Chào mừng, Đã hoàn thành, Đánh giá, Lỗi, Làm sạch tất cả, Tải, Lưu, Đăng ký, In câu trả lời, Thống kê công cộng, PDF, Đã vượt quá hạn mức, Điều hướng và Người tham gia.

Chỉnh sửa tệp

Các bảng ở bên phải liệt kê các tệp được màn hình đã chọn sử dụng:

• Tệp màn hình: Các mẫu Twig tạo nên trang.
• Tệp JavaScript
• Các tệp CSS
• Tập tin khác: Hình ảnh, phông chữ và mọi tệp khác của chủ đề.

Nhấp vào tên tệp để mở nó trong trình chỉnh sửa. Các tệp được đánh dấu Inherited (kế thừa) đến từ chủ đề cha. Bạn vẫn có thể chỉnh sửa một tệp kế thừa: khi đó nút bên dưới trình chỉnh sửa hiển thị Sao chép vào Mẫu/theme đang dùng và lưu các thay đổi, và việc lưu sẽ sao chép tệp vào chủ đề của bạn cùng với các thay đổi của bạn. Từ đó trở đi, bản sao của bạn sẽ được sử dụng thay cho tệp của chủ đề cha.

Các tệp thuộc về chủ đề của bạn có nút Thiết lập lại. Thiết lập lại sẽ xóa bản sao của bạn, do đó tệp từ chủ đề cha được sử dụng trở lại.

Tải lên tệp

Sử dụng trường tải lên ở cuối bảng Tập tin khác để thêm hình ảnh, phông chữ hoặc các tệp khác vào chủ đề của bạn. Các tệp đã tải lên được lưu trong thư mục files/ của chủ đề. Theo mặc định, bạn có thể tải lên hình ảnh (gif, ico, jpg, jpeg, png) và các loại tệp sau: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq và lsg. Quản trị viên của bạn có thể thay đổi các danh sách này bằng các cài đặt allowedthemeimageformats và allowedthemeuploads trong config.php.

Để hiển thị một hình ảnh đã tải lên trong tệp Twig, hãy sử dụng hàm image():

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

Trong các tệp CSS, hãy tham chiếu đến các tệp đã tải lên bằng đường dẫn tương đối so với thư mục css, ví dụ url('../files/background.jpg').

Xem trước

Bên dưới trình chỉnh sửa, bản xem trước hiển thị màn hình đã chọn với nội dung mẫu. Sử dụng các nút Điện thoại di động, 640x480, 800x600, 1024x768 và Đầy đủ để kiểm tra trang ở các kích thước màn hình khác nhau.

Bản xem trước sử dụng dữ liệu mẫu và có thể không hiển thị chính xác mọi kiểu dáng như một khảo sát thực tế. Hãy luôn kiểm tra các thay đổi của bạn trong bản xem trước khảo sát thực tế.

Nhập và xuất chủ đề

• Để chuyển một chủ đề sang một bản cài đặt LimeSurvey khác, hãy nhấp vào Xuất trên thanh công cụ của trình chỉnh sửa chủ đề. Chủ đề sẽ được tải xuống dưới dạng tệp ZIP.
• Để cài đặt một chủ đề từ tệp ZIP, hãy vào Thiết lập > Chủ đề và nhấp vào Tải lên & cài đặt.

Cấu trúc của một chủ đề

Thư mục chủ đề

Một thư mục chủ đề bao gồm:

• config.xml: Tệp kê khai của chủ đề: tên, chủ đề cha, các tệp CSS và JavaScript, các tùy chọn chủ đề và các màn hình hiển thị trong trình chỉnh sửa chủ đề.
• views/: Các mẫu Twig. layout_global.twig là bố cục chính cho hầu hết các trang khảo sát. Các bố cục khác được dùng cho các trang đặc biệt, ví dụ layout_survey_list.twig cho danh sách khảo sát công khai và layout_errors.twig cho các trang lỗi. Thư mục views/subviews/ chứa các mẫu nhỏ hơn mà các bố cục nhúng vào.
• css/ và scripts/: Các tệp CSS và JavaScript của chủ đề.
• files/: Hình ảnh và các tệp khác được chủ đề sử dụng.
• options/: Trang dành cho các tùy chọn chủ đề.

Mẫu Twig

Các mẫu nhận dữ liệu khảo sát trong biến aSurveyInfo. Để xem toàn bộ nội dung của biến này, hãy bật chế độ gỡ lỗi trong application/config/config.php và thêm dòng sau vào cuối phần tử body trong layout_global.twig:

{{ dump(aSurveyInfo) }}

Về các hàm bạn có thể dùng trong mẫu, xem Các hàm Twig khả dụng. Vì lý do bảo mật, các mẫu chạy trong môi trường sandbox, nên chỉ có các hàm này là khả dụng.

config.xml

Phần <files> liệt kê các tệp CSS và JavaScript được tải trên các trang khảo sát:

• <add> thêm một tệp. Nếu chủ đề cha đã có tệp cùng tên, tệp của bạn sẽ thay thế tệp đó.
• <remove> ngăn một tệp của chủ đề cha được tải.

Bạn không cần liệt kê lại các tệp của chủ đề cha: chúng vẫn được tải như bình thường.

LimeSurvey đọc config.xml khi một chủ đề được cài đặt và lưu các cài đặt vào cơ sở dữ liệu. Sau khi thay đổi config.xml của một chủ đề đã cài đặt, hãy vào Thiết lập > Chủ đề, mở menu hành động (⋯) của chủ đề và nhấp vào Thiết lập lại để tải lại tệp.

Thêm CSS và JavaScript của riêng bạn

Mỗi chủ đề cốt lõi có hai tệp dành riêng cho mã của bạn:

• css/custom.css: Được tải sau tất cả các tệp CSS khác, nên các quy tắc trong tệp này sẽ ghi đè kiểu của chủ đề.
• scripts/custom.js: Được tải sau JavaScript của chính chủ đề.

Khi bạn mở rộng một chủ đề, đây là các tệp cần thay đổi. Hãy thêm CSS của bạn vào custom.css thay vì chỉnh sửa các tệp CSS chính của chủ đề, để chủ đề của bạn tiếp tục nhận được các bản cập nhật từ chủ đề cha.

Để thêm nhiều tệp hơn, hãy tải chúng lên và liệt kê trong phần <files> của config.xml trong chủ đề của bạn. Hãy dùng tên tệp chưa tồn tại trong chủ đề cha, nếu không tệp của bạn sẽ thay thế tệp của chủ đề cha:

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

Theo mặc định, các trang khảo sát được tải bằng Ajax, vì vậy trình duyệt không tải lại toàn bộ trang khi người tham gia chuyển sang trang tiếp theo. Hãy chạy JavaScript của bạn cả ở lần tải trang đầu tiên và ở mỗi lần tải trang bằng Ajax:

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

Tạo kiểu câu hỏi bằng CSS

Tất cả các ví dụ trong phần này đều được đặt vào tệp custom.css của chủ đề của bạn.

Các lớp của trang

Các phần tử <html> và <body> mang các lớp mà bạn có thể dùng để tạo kiểu cho toàn bộ trang:

• html: Mã ngôn ngữ (ví dụ en) và hướng văn bản (dir-ltr hoặc dir-rtl).
• body: Tên của chủ đề và của từng chủ đề cha (ví dụ fruity_twentythree), phông chữ (ví dụ font-ibm-sans), ngôn ngữ (ví dụ lang-en), và brand-logo khi logo được hiển thị.

Các lớp của vùng chứa câu hỏi

Mỗi câu hỏi được bao bọc trong một phần tử có lớp question-container. Phần tử này còn mang thêm:

• Lớp của loại câu hỏi (xem bảng bên dưới).
• mandatory: Câu hỏi là bắt buộc hoặc bắt buộc mềm.
• input-error: Câu trả lời không vượt qua bước xác thực, hoặc một câu hỏi bắt buộc chưa được trả lời.
• missing: Câu hỏi vẫn còn các phần chưa được trả lời và người tham gia đã đi qua câu hỏi đó.
• ls-hidden và ls-irrelevant: Câu hỏi bị ẩn do điều kiện của nó.
• ls-hidden-attribute: Câu hỏi bị ẩn do cài đặt "Luôn ẩn câu hỏi này".
• Mọi lớp được nhập trong cài đặt (Các) lớp CSS của câu hỏi (trong mục Hiện). Hãy dùng cách này để tạo kiểu cho từng câu hỏi riêng lẻ.

Ví dụ, một câu hỏi Danh sách (nút chọn) bắt buộc chưa được trả lời:

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

Các lớp theo loại câu hỏi

Loại câu hỏi	Lớp	Mã loại
Lựa chọn 5 điểm	.choice-5-pt-radio	5
Mảng	.array-flexible-row	F
Mảng (lựa chọn 5 điểm)	.array-5-pt	A
Mảng (lựa chọn 10 điểm)	.array-10-pt	B
Mảng (Tăng/Không đổi/Giảm)	.array-increase-same-decrease	E
Mảng (số)	.array-multi-flexi	:
Mảng (Văn bản)	.array-multi-flexi-text	;
Mảng (Có/Không chắc chắn/Không)	.array-yes-uncertain-no	C
Mảng theo cột	.array-flexible-column	H
Mảng hai quy mô	.array-flexible-dual-scale	1
Ngày giờ	.date	D
Phương trình	.equation	*
Tải lên tệp	.upload-files	|
Giới tính	.gender	G
Văn bản tự do lớn	.text-huge	U
Chuyển đổi ngôn ngữ	.language	I
Danh sách (sổ xuống)	.list-dropdown	!
Danh sách (nút chọn)	.list-radio	L
Danh sách với bình luận	.list-with-comment	O
Văn bản tự do dài	.text-long	T
Nhiều lựa chọn	.multiple-opt	M
Nhiều lựa chọn với ý kiến	.multiple-opt-comments	P
Nhập liệu nhiều số	.numeric-multi	K
Nhiều văn bản ngắn	.multiple-short-txt	Q
Đầu vào dạng số	.numeric	N
Xếp hạng	.ranking	R
Văn bản tự do ngắn	.text-short	S
Hiển thị văn bản	.boilerplate	X
Có/Không	.yes-no	Y

Các lớp cho các phần của câu hỏi

Bên trong vùng chứa câu hỏi, khu vực câu trả lời sử dụng các lớp sau. Một số lớp phụ thuộc vào cài đặt hiển thị của câu hỏi: ví dụ, Mảng (số) dùng các lớp khác khi hiển thị hộp kiểm thay vì danh sách thả xuống.

Lớp	Dùng cho	Được dùng bởi (ví dụ)
.ls-answers	Phần tử chứa tất cả tùy chọn trả lời	Tất cả loại câu hỏi
.answers-list	Một danh sách hoặc hàng các tùy chọn trả lời	Danh sách (nút chọn), Nhiều lựa chọn, Xếp hạng, các hàng của hầu hết các mảng
.subquestion-list, .questions-list	Một danh sách hoặc bảng các câu hỏi phụ	Mảng, Nhiều văn bản ngắn, Nhập liệu nhiều số
.answer-item	Một tùy chọn trả lời hoặc một ô nhập liệu	Hầu hết các loại câu hỏi
.noanswer-item	Tùy chọn "Không có câu trả lời"	Mảng, Lựa chọn 5 điểm, Danh sách với bình luận
.question-item	Một câu hỏi phụ đồng thời là một câu trả lời	Nhiều lựa chọn, Nhiều văn bản ngắn, Nhập liệu nhiều số
.radio-list	Một danh sách hoặc hàng các nút chọn	Danh sách (nút chọn), Lựa chọn 5 điểm, Danh sách với bình luận, các hàng của mảng nút chọn
.radio-array	Một bảng các nút chọn	Mảng, Mảng (lựa chọn 5 điểm), Mảng (lựa chọn 10 điểm), Mảng (Tăng/Không đổi/Giảm), Mảng (Có/Không chắc chắn/Không)
.radio-item	Một nút chọn cùng nhãn của nó	Danh sách (nút chọn), Lựa chọn 5 điểm, Danh sách với bình luận, các mảng nút chọn
.checkbox-list	Một danh sách các hộp kiểm	Nhiều lựa chọn, Nhiều lựa chọn với ý kiến
.checkbox-array	Một bảng các hộp kiểm	Mảng (số) với bố cục hộp kiểm
.checkbox-item	Một hộp kiểm cùng nhãn của nó	Nhiều lựa chọn, Nhiều lựa chọn với ý kiến, Mảng (số) với bố cục hộp kiểm
.checkbox-text-item	Một hộp kiểm với một trường văn bản	Nhiều lựa chọn với ý kiến
.comment-item	Trường dẫn giải bên cạnh một hộp kiểm	Nhiều lựa chọn với ý kiến
.text-list	Một danh sách các ô nhập văn bản	Nhiều văn bản ngắn, Nhập liệu nhiều số
.text-item	Một ô nhập văn bản	Văn bản tự do ngắn, dài và lớn, Nhiều văn bản ngắn, Mảng (Văn bản)
.number-list, .numeric-item	Các ô nhập số	Nhập liệu nhiều số, Đầu vào dạng số
.number-array	Một bảng các ô nhập số	Mảng (số), Mảng (Văn bản)
.text-array	Một bảng các ô nhập văn bản	Mảng (Văn bản), Mảng (số)
.dropdown-array, .dropdown-list, .dropdown-item	Các bảng, hàng và ô có danh sách thả xuống	Mảng (số), Mảng hai quy mô với danh sách thả xuống
.date-item	Ô nhập ngày	Ngày giờ
.upload-item	Khu vực tải lên tệp	Tải lên tệp
.answertext	Văn bản câu hỏi phụ trong một hàng của mảng	Mảng
.col-answers	Cột chứa các văn bản câu hỏi phụ	Mảng
.ls-heading	Hàng tiêu đề chứa các tùy chọn trả lời	Mảng
.ls-odd, .ls-even	Các hàng xen kẽ	Mảng
.ls-label-xs-visibility	Một nhãn chỉ hiển thị trên màn hình nhỏ và với trình đọc màn hình	Các ô của mảng
.ls-input-group-extra	Tiền tố hoặc hậu tố của một ô nhập liệu	Văn bản tự do ngắn, Đầu vào dạng số, Nhiều văn bản ngắn, Nhập liệu nhiều số
.ls-js-hidden	Bị ẩn khi JavaScript đang hoạt động	Mảng hai quy mô, Danh sách (nút chọn)
.ls-no-js-hidden	Bị ẩn khi JavaScript không hoạt động	Xếp hạng
.ls-js-hidden-sr	Bị ẩn khi JavaScript đang hoạt động, nhưng vẫn được trình đọc màn hình đọc	Xếp hạng

In List (radio), the "No answer" option has the class no-anwser-item (with this spelling) instead of noanswer-item.

Ví dụ, đây là HTML của các câu trả lời trong một câu hỏi Danh sách (nút chọn):

<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>

Các lớp xác thực và gợi ý

Các gợi ý xác thực (chẳng hạn như "Chọn một trong những câu trả lời sau" hoặc "Vui lòng nhập một số từ 1 đến 10") luôn có lớp ls-em-tip. Trong khi người tham gia trả lời, LimeSurvey thêm ls-em-success khi quy tắc của gợi ý được đáp ứng và ls-em-error khi chưa được đáp ứng, nhờ đó bạn có thể tạo kiểu khác nhau cho hai trạng thái này. Các gợi ý bị ẩn bằng cài đặt Hide tip của câu hỏi sẽ có lớp hide-tip.

Mỗi gợi ý cũng có một lớp theo loại của nó:

Lớp	Gợi ý
.em_default	Gợi ý mặc định của loại câu hỏi (ví dụ: "Chọn một trong những câu trả lời sau")
.em_num_answers	Số câu trả lời tối thiểu hoặc tối đa
.em_value_range	Giá trị tối thiểu hoặc tối đa
.em_sum_range	Tổng các giá trị tối thiểu hoặc tối đa
.em_sum_equals	Các giá trị phải có tổng bằng một giá trị cho trước
.em_value_integer	Chỉ cho phép số nguyên
.em_numbers_only	Chỉ cho phép nhập số
.em_other_numbers_only	Chỉ cho phép nhập số trong trường "Khác"
.em_other_comment_mandatory	Tùy chọn "Khác" được chọn nhưng trường văn bản của nó để trống
.em_regex_validation	Câu trả lời phải khớp với mẫu xác thực
.em_q_fn_validation	Phương trình xác thực câu hỏi
.em_sq_fn_validation	Phương trình xác thực câu hỏi phụ

Các ngôn ngữ viết từ phải sang trái (RTL)

Đối với các ngôn ngữ viết từ phải sang trái, phần tử <html> có lớp dir-rtl và các chủ đề cốt lõi sẽ tải phiên bản RTL của tệp CSS chính. Hãy dùng .dir-rtl trong CSS của bạn cho các quy tắc chỉ áp dụng cho các ngôn ngữ viết từ phải sang trái.

Mẹo và thủ thuật

Các công thức này được đưa vào custom.css (hoặc vào một tệp Twig, nếu có ghi chú) của chủ đề mà bạn đã mở rộng từ một chủ đề cốt lõi. Trong các ví dụ, hãy thay #c0392b bằng màu của riêng bạn.

Thay đổi màu của nút radio và hộp kiểm

Để dùng một trong các màu có sẵn của Fruity TwentyThree, hãy chọn một Theme color trong các chủ đề tùy chọn. Các chủ đề tùy chọn cũng cho phép bạn chọn một Biểu tượng kiểm tra khác.

Đối với bất kỳ màu nào khác, hãy thêm CSS vào custom.css. Các chủ đề cốt lõi tự vẽ nút radio và hộp kiểm thay vì dùng loại mặc định của trình duyệt, vì vậy việc đổi màu có nghĩa là thay đổi các phần tử được vẽ này.

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 và 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;
}

Hãy giữ độ tương phản đủ lớn giữa màu này và màu nền, để những người tham gia có thị lực kém vẫn nhìn thấy được các câu trả lời đã chọn.

Làm nút radio và hộp kiểm lớn hơn

Nút radio và hộp kiểm lớn hơn sẽ dễ chạm hơn trên điện thoại và máy tính bảng. Cách này hoạt động trong tất cả các chủ đề cốt lõi:

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

Trong Fruity TwentyThree, hãy thêm một chút khoảng cách giữa nút radio và văn bản câu trả lời:

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

Các giá trị đến khoảng 1.4 hoạt động tốt mà không cần thay đổi thêm. Với các giá trị lớn hơn, các điều khiển bắt đầu chồng lên văn bản câu trả lời và mép của các hàng mảng trên màn hình nhỏ, vì vậy bạn cũng cần thêm khoảng cách xung quanh chúng.

Thay đổi màu của thanh tiến trình

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

Chỉ hiển thị nội dung trong một ngôn ngữ

Phần tử <body> có một lớp chứa ngôn ngữ hiện tại, chẳng hạn lang-en hoặc lang-fr. Bạn có thể dùng lớp này để hiển thị nội dung khác nhau theo từng ngôn ngữ, ví dụ một dòng trợ giúp ở chân trang. Hãy thêm văn bản cho từng ngôn ngữ vào một tệp Twig của chủ đề, chẳng hạn subviews/footer/footer.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>

Sau đó ẩn văn bản của các ngôn ngữ khác trong custom.css:

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

Sử dụng logo khác nhau cho từng khảo sát

Bạn không cần một chủ đề riêng cho mỗi logo. Các tùy chọn chủ đề có thể được đặt cho từng khảo sát riêng lẻ: hãy mở khảo sát, nhấp vào Theme options trong menu Thiết lập khảo sát và chọn một Tệp Logo khác. Xem Theme options/vi.

Hiển thị favicon tùy chỉnh

Favicon là biểu tượng nhỏ hiển thị trên thẻ trình duyệt và trong dấu trang. Các chủ đề cốt lõi hiển thị tệp files/favicon.ico của chủ đề. Để dùng biểu tượng của riêng bạn, hãy đặt tên là favicon.ico và tải lên trong bảng Tập tin khác của chủ đề mở rộng của bạn. Biểu tượng này sẽ thay thế biểu tượng của chủ đề cha.

Căn giữa logo trong Fruity TwentyThree

Bật Logo trong các chủ đề tùy chọn, sau đó thêm đoạn sau vào custom.css:

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

Thêm logo của riêng bạn vào danh sách khảo sát công khai

Danh sách khảo sát công khai hiển thị logo LimeSurvey theo mặc định. Để hiển thị logo của riêng bạn:

1. Mở rộng Fruity TwentyThree và mở chủ đề của bạn trong trình chỉnh sửa chủ đề.
2. Tải logo của bạn lên trong bảng Tập tin khác.
3. Chọn màn hình Danh sách khảo sát và mở layout_survey_list.twig.
4. Tìm <div> chứa {{ include('./ls_logo_svg.twig') }}. Hãy thay thế toàn bộ <div> này, bao gồm cả dòng include, bằng đoạn mã hiển thị bên dưới các bước này.
5. Nhấp vào Sao chép vào Mẫu/theme đang dùng và lưu các thay đổi.
6. Đi tới Thiết lập > Thiết lập toàn cục > Tổng quát và chọn chủ đề của bạn làm Theme for public survey list and error pages.

Hãy dùng tên tệp bạn đã tải lên, và dùng tên tổ chức của bạn làm văn bản thay thế:

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

Thêm đường phân cách vào mảng hai thang đo

Để vẽ một đường dọc giữa hai thang đo của câu hỏi Mảng hai thang đo:

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

JavaScript trong câu hỏi

Để chạy JavaScript trên tất cả các trang khảo sát của bạn, hãy đặt nó trong custom.js của chủ đề (xem phần trên).

Bạn cũng có thể thêm script vào nội dung của một câu hỏi hoặc một nhóm câu hỏi. LimeSurvey sẽ xóa script khỏi các nội dung này trừ khi bộ lọc XSS được tắt cho người dùng của bạn. Bộ lọc này không bao giờ áp dụng cho siêu quản trị viên. Với những người dùng khác, Bộ lọc HTML cho XSS phải được tắt trong Thiết lập > Thiết lập toàn cục > Bảo mật. Chỉ thực hiện việc này nếu bạn tin tưởng tất cả những người có thể chỉnh sửa khảo sát. Để biết chi tiết và ví dụ, xem Workarounds: Manipulating a survey at runtime using Javascript.