Tema düzenleyici

Giriş

Bir anket teması, anketinizin katılımcılara nasıl göründüğünü belirler: sayfa düzeni, renkler, yazı tipleri, logolar ve her sorunun biçimlendirmesi. Temalar Twig şablonları, CSS ve JavaScript ile oluşturulur ve CSS çerçevesi olarak Bootstrap 5 kullanır.

Birçok yaygın değişiklik için hiç kod yazmanız gerekmez. Logo, renkler, yazı tipleri ve çeşitli görüntüleme ayarları tema ayarları ile değiştirilebilir. Daha ileri gitmek istediğinizde, örneğin kendi CSS veya JavaScript kodunuzu eklemek, bir sayfanın HTML kodunu değiştirmek ya da teması için görseller ve başka dosyalar yüklemek istediğinizde bu sayfada açıklanan tema düzenleyiciyi kullanın.

LimeSurvey aşağıdaki çekirdek anket temalarıyla birlikte gelir:

• Fruity TwentyThree (fruity_twentythree): Varsayılan tema.
• Bootstrap Vanilla (vanilla): Kendi Bootstrap tabanlı temasını oluşturmak isteyen geliştiriciler için sade bir temel tema.
• Fruity (fruity) ve Bootswatch (bootswatch): Her ikisi de Bootstrap Vanilla temasını genişletir.

Tek tek soru türlerinin görünümü anket teması tarafından değil, soru temaları tarafından belirlenir. Bir soru türünün HTML kodunu değiştirmek için bir soru teması oluşturun.

Başlamadan önce

Tema düzenleyiciyi kullanmak için genel Temalar iznine (genel izinler bölümüne bakın) sahip olmanız ya da süper yönetici olmanız gerekir. Bir temayı kullanıma almak için Ekle hakkı, değişiklikleri kaydetmek için Güncelleme hakkı, bir temayı silmek veya bir dosyayı temizlemek için Sil hakkı gerekir.

  Hatalı bir tema, onu kullanan tüm anketlerin kullanılamaz hale gelmesine neden olabilir. Temayı canlı bir ankette kullanmadan önce değişikliklerinizi bir anket ön izlemesiyle test edin.

Çekirdek temalar düzenlenemez: onları kullanıma alın

Çekirdek temalar LimeSurvey ile birlikte güncellenir, bu nedenle bunları doğrudan değiştiremezsiniz. Birini özelleştirmek için onu kullanıma alın. Kullanıma alma işlemi, üst temasındaki her şeyi devralan yeni bir kullanıcı teması oluşturur. Temanız yalnızca değiştirdiğiniz dosyaları içerir; geri kalan her şey üst temadan alınır. Böylece LimeSurvey üst temayı güncellediğinde temanız hata düzeltmelerinden ve iyileştirmelerden yararlanmaya devam eder.

Bir temayı kullanıma almak için şunlardan birini yapın:

• Yapılandırma > Temalar bölümüne gidin, temanın satırının sonundaki eylemler menüsünü (⋯) açın ve Kullanıma al düğmesine tıklayın veya
• Temayı tema düzenleyicide açın ve araç çubuğundaki Kullanıma al düğmesine tıklayın.

Yeni tema için bir ad girin. Ardından tema düzenleyici yeni temanızı açar.

Temaların depolandığı yer

• Çekirdek temalar: LimeSurvey kurulumunuzdaki themes/survey/ klasörü.
• Kullanıcı temaları (kullanıma alınan, yüklenen veya içe aktarılan temalar): upload/themes/survey/.

Bir kullanıcı temasının dosyalarını kendi düzenleyicinizle doğrudan sunucu üzerinde de düzenleyebilirsiniz. Tema düzenleyiciyi de kullanmaya devam edebilmeniz için, sonrasında web sunucusunun dosyaları hâlâ okuyup yazabildiğinden emin olun.

Tema düzenleyici

Tema düzenleyiciyi açmak için Yapılandırma > Temalar bölümüne gidin, temanın satırının sonundaki eylemler menüsünü (⋯) açın ve Tema düzenleyici düğmesine tıklayın.

Bir çekirdek temayı açarsanız, bunun standart bir tema olduğunu belirten bir not görüntülenir ve temayı kullanıma almanız için bir bağlantı sunulur. Dosyalarına ve ön izlemeye bakabilirsiniz ancak değişiklikleri kaydedemezsiniz.

Araç çubuğu

• Dışa aktar: Temayı ZIP dosyası olarak indirir.
• Kullanıma al: Bu temadan devralan yeni bir tema oluşturur (yukarıya bakın).
• Yeniden adlandır: Temayı yeniden adlandırır. Yalnızca kullanıcı temaları için kullanılabilir.
• Sil: Temayı siler. Varsayılan tema olarak ayarlanmış temayı silemezsiniz.
• Tema: Tema düzenleyiciyi başka bir temaya geçirir.
• Sayfa: Ön izlemede hangi anket sayfasının gösterileceğini ve düzenleme için hangi dosyaların listeleneceğini seçer. Sayfalar şunlardır: Soru, Anket listesi, Karşılama, Tamamlandı, Değerlendirmeler, Hata, Tümünü temizle, Yükle, Kaydet, Kayıt, Yanıtları yazdır, Herkese açık istatistikler, PDF, Kotalar aşıldı, Gezinme ve Katılımcı.

Dosyaları düzenleme

Sağdaki paneller, seçili sayfa tarafından kullanılan dosyaları listeler:

• Ekran bölümü dosyaları: Sayfayı oluşturan Twig şablonları.
• JavaScript dosyaları
• CSS dosyaları
• Diğer dosyalar: Temanın görselleri, yazı tipleri ve diğer tüm dosyaları.

Bir dosyayı düzenleyicide açmak için dosya adına tıklayın. Devralınmış olarak işaretlenen dosyalar üst temadan gelir. Devralınmış bir dosyayı yine de düzenleyebilirsiniz: düzenleyicinin altındaki düğmede Yerel kalıba kopyala ve değişiklikleri kaydet yazar ve kaydettiğinizde dosya, değişiklikleriniz ile birlikte temanıza kopyalanır. Bundan sonra üst temanın dosyası yerine sizin kopyanız kullanılır.

Temanıza ait dosyaların yanında bir Temizle düğmesi bulunur. Temizle işlemi kopyanızı siler, böylece üst temadaki dosya yeniden kullanılır.

Dosya yükleme

Temanıza görsel, yazı tipi veya başka dosyalar eklemek için Diğer dosyalar panelinin altındaki yükleme alanını kullanın. Yüklenen dosyalar temanın files/ klasöründe saklanır. Varsayılan olarak görselleri (gif, ico, jpg, jpeg, png) ve şu dosya türlerini yükleyebilirsiniz: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq ve lsg. Yöneticiniz bu listeleri config.php dosyasındaki allowedthemeimageformats ve allowedthemeuploads ayarlarıyla değiştirebilir.

Yüklenen bir görseli Twig dosyasında göstermek için image() işlevini kullanın:

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

CSS dosyalarında yüklenen dosyalara css klasörüne göre göreli bir yolla başvurun, örneğin url('../files/background.jpg').

Ön izleme

Düzenleyicinin altında, seçilen ekran örnek içerikle birlikte ön izlemede gösterilir. Sayfayı farklı ekran boyutlarında denetlemek için Mobil, 640x480, 800x600, 1024x768 ve Tam düğmelerini kullanın.

Ön izleme örnek veriler kullanır ve her biçemi gerçek bir anketteki gibi tam olarak göstermeyebilir. Değişikliklerinizi her zaman gerçek bir anket ön izlemesinde de denetleyin.

Temaları içe ve dışa aktarma

• Bir temayı başka bir LimeSurvey kurulumuna taşımak için tema düzenleyici araç çubuğunda Dışa aktar düğmesine tıklayın. Bu işlem temayı ZIP dosyası olarak indirir.
• Bir temayı ZIP dosyasından kurmak için Yapılandırma > Temalar bölümüne gidin ve Karşıya Yükle & Kur düğmesine tıklayın.

Bir tema nasıl oluşturulur

Tema klasörü

Bir tema klasörü şunları içerir:

• config.xml: Tema bildirimi: ad, üst tema, CSS ve JavaScript dosyaları, tema ayarları ve tema düzenleyicide gösterilen ekranlar.
• views/: Twig şablonları. layout_global.twig, çoğu anket sayfası için ana düzendir. Diğer düzenler özel sayfalarda kullanılır; örneğin herkese açık anket listesi için layout_survey_list.twig ve hata sayfaları için layout_errors.twig. views/subviews/ klasörü, düzenlerin içerdiği daha küçük şablonları barındırır.
• css/ ve scripts/: Temanın CSS ve JavaScript dosyaları.
• files/: Tema tarafından kullanılan görseller ve diğer dosyalar.
• options/: Tema ayarları sayfası.

Twig şablonları

Şablonlar anket verilerini aSurveyInfo değişkeninde alır. İçerdiği her şeyi görmek için application/config/config.php dosyasında hata ayıklama kipini açın ve layout_global.twig dosyasındaki body öğesinin sonuna şu satırı ekleyin:

{{ dump(aSurveyInfo) }}

Şablonlarda kullanabileceğiniz işlevler için Kullanılabilir Twig işlevleri sayfasına bakın. Güvenlik nedeniyle şablonlar bir korumalı alanda çalışır, bu yüzden yalnızca bu işlevler kullanılabilir.

config.xml

<files> bölümü, anket sayfalarında yüklenen CSS ve JavaScript dosyalarını listeler:

• <add> bir dosya ekler. Üst temada aynı ada sahip bir dosya zaten varsa dosyanız onun yerine geçer.
• <remove> üst temanın bir dosyasının yüklenmesini engeller.

Üst temanın dosyalarını yeniden listelemeniz gerekmez: onlar zaten yüklenir.

LimeSurvey, bir tema kurulduğunda config.xml dosyasını okur ve ayarları veritabanında saklar. Kurulu bir temanın config.xml dosyasını değiştirdikten sonra dosyayı yeniden yüklemek için Yapılandırma > Temalar bölümüne gidin, temanın eylemler menüsünü (⋯) açın ve Temizle düğmesine tıklayın.

Kendi CSS ve JavaScript kodunuzu ekleme

Her çekirdek temada kendi kodunuz için ayrılmış iki dosya vardır:

• css/custom.css: Diğer tüm CSS dosyalarından sonra yüklenir, bu nedenle kuralları temanın biçemlerini geçersiz kılar.
• scripts/custom.js: Temanın kendi JavaScript kodundan sonra yüklenir.

Bir temayı genişlettiğinizde değiştirmeniz gereken dosyalar bunlardır. Temanız üst temanın güncellemelerini almaya devam etsin diye, temanın ana CSS dosyalarını düzenlemek yerine CSS kodunuzu custom.css dosyasına ekleyin.

Daha fazla dosya eklemek için dosyaları karşıya yükleyin ve temanızın config.xml dosyasındaki <files> bölümünde listeleyin. Üst temada bulunmayan bir dosya adı kullanın, aksi halde dosyanız üst temanın dosyasının yerine geçer:

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

Anket sayfaları varsayılan olarak Ajax ile yüklenir, bu nedenle katılımcı sonraki sayfaya geçtiğinde tarayıcı sayfayı tamamen yeniden yüklemez. JavaScript kodunuzu hem ilk sayfa yüklemesinde hem de her Ajax sayfa yüklemesinde çalıştırın:

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

Soruları CSS ile biçemleme

Bu bölümdeki tüm örnekler temanızın custom.css dosyasına eklenir.

Sayfa sınıfları

<html> ve <body> öğeleri, tüm sayfaları biçemlemek için kullanabileceğiniz sınıflar taşır:

• html: Dil kodu (örneğin en) ve metin yönü (dir-ltr veya dir-rtl).
• body: Temanın ve her üst temanın adı (örneğin fruity_twentythree), yazı tipi (örneğin font-ibm-sans), dil (örneğin lang-en) ve logo gösterildiğinde brand-logo.

Soru kapsayıcı sınıfları

Her soru, question-container sınıfına sahip bir öğenin içine yerleştirilir. Bu öğe ayrıca şunları taşır:

• Soru türünün sınıfı (aşağıdaki tabloya bakın).
• mandatory: Soru zorunludur veya esnek zorunludur.
• input-error: Yanıt doğrulamadan geçemedi veya zorunlu bir soru yanıtlanmadı.
• missing: Sorunun yanıtlanmamış kısımları var ve katılımcı soruyu geçmiş durumda.
• ls-hidden ve ls-irrelevant: Soru, koşulu nedeniyle gizlenmiştir.
• ls-hidden-attribute: Soru, "Bu soru her zaman gizlensin" ayarı nedeniyle gizlenmiştir.
• Sorunun CSS sınıfları ayarına (Görünüm altında) girilen tüm sınıflar. Bunu tek tek soruları biçemlemek için kullanın.

Örneğin, yanıtlanmamış zorunlu bir Liste (radyo) sorusu:

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

Soru türü sınıfları

Soru türü	Sınıf	Tür kodu
5 noktalı seçim	.choice-5-pt-radio	5
Dizi	.array-flexible-row	F
Dizi (5 noktalı seçim)	.array-5-pt	A
Dizi (10 noktalı seçim)	.array-10-pt	B
Dizi (Artış/Aynı/Düşüş)	.array-increase-same-decrease	E
Dizi (Rakamlar)	.array-multi-flexi	:
Dizi (Yazılar)	.array-multi-flexi-text	;
Dizi (Evet/Belirsiz/Hayır)	.array-yes-uncertain-no	C
Sütuna göre dizi	.array-flexible-column	H
Çift ölçekli dizi	.array-flexible-dual-scale	1
Tarih/Saat	.date	D
Denklem	.equation	*
Dosya yükleme	.upload-files	|
Cinsiyet	.gender	G
Çok uzun serbest yazı	.text-huge	U
Dil değiştirici	.language	I
Liste (açılan)	.list-dropdown	!
Liste (radyo)	.list-radio	L
Açıklamalı liste	.list-with-comment	O
Uzun serbest yazı	.text-long	T
Birkaç seçim	.multiple-opt	M
Açıklamalar ile birkaç seçenek	.multiple-opt-comments	P
Birkaç sayısal giriş	.numeric-multi	K
Birkaç kısa yazı	.multiple-short-txt	Q
Sayısal giriş	.numeric	N
Sıralama	.ranking	R
Kısa serbest yazı	.text-short	S
Yazı görünümü	.boilerplate	X
Evet/Hayır	.yes-no	Y

Bir sorunun bölümleri için sınıflar

Soru kapsayıcısının içinde yanıt alanı şu sınıfları kullanır. Bazıları sorunun görünüm ayarlarına bağlıdır: örneğin Dizi (Rakamlar), açılan listeler yerine onay kutuları gösterdiğinde farklı sınıflar kullanır.

Sınıf	Kullanım amacı	Kullanıldığı yerler (örnekler)
.ls-answers	Tüm yanıt seçeneklerini içeren öge	Tüm soru türleri
.answers-list	Yanıt seçeneklerinin listesi veya satırı	Liste (radyo), Birkaç seçim, Sıralama, çoğu dizinin satırları
.subquestion-list, .questions-list	Alt soruların listesi veya tablosu	Diziler, Birkaç kısa yazı, Birkaç sayısal giriş
.answer-item	Tek bir yanıt seçeneği veya giriş	Neredeyse tüm soru türleri
.noanswer-item	"Yanıt yok" seçeneği	Diziler, 5 noktalı seçim, Açıklamalı liste
.question-item	Aynı zamanda yanıt olan bir alt soru	Birkaç seçim, Birkaç kısa yazı, Birkaç sayısal giriş
.radio-list	Radyo düğmelerinin listesi veya satırı	Liste (radyo), 5 noktalı seçim, Açıklamalı liste, radyo düğmeli dizilerin satırları
.radio-array	Radyo düğmelerinden oluşan tablo	Dizi, Dizi (5 noktalı seçim), Dizi (10 noktalı seçim), Dizi (Artış/Aynı/Düşüş), Dizi (Evet/Belirsiz/Hayır)
.radio-item	Etiketiyle birlikte tek bir radyo düğmesi	Liste (radyo), 5 noktalı seçim, Açıklamalı liste, radyo düğmeli diziler
.checkbox-list	İşaret kutularının listesi	Birkaç seçim, Açıklamalar ile birkaç seçenek
.checkbox-array	İşaret kutularından oluşan tablo	İşaret kutusu yerleşimli Dizi (Rakamlar)
.checkbox-item	Etiketiyle birlikte tek bir işaret kutusu	Birkaç seçim, Açıklamalar ile birkaç seçenek, İşaret kutusu yerleşimli Dizi (Rakamlar)
.checkbox-text-item	Yazı alanı olan bir işaret kutusu	Açıklamalar ile birkaç seçenek
.comment-item	İşaret kutusunun yanındaki açıklama alanı	Açıklamalar ile birkaç seçenek
.text-list	Yazı girişlerinin listesi	Birkaç kısa yazı, Birkaç sayısal giriş
.text-item	Tek bir yazı girişi	Kısa, uzun ve çok uzun serbest yazı, Birkaç kısa yazı, Dizi (Yazılar)
.number-list, .numeric-item	Sayısal girişler	Birkaç sayısal giriş, Sayısal giriş
.number-array	Sayısal girişlerden oluşan tablo	Dizi (Rakamlar), Dizi (Yazılar)
.text-array	Yazı girişlerinden oluşan tablo	Dizi (Yazılar), Dizi (Rakamlar)
.dropdown-array, .dropdown-list, .dropdown-item	Açılır listeli tablolar, satırlar ve hücreler	Dizi (Rakamlar), açılır listeli Çift ölçekli dizi
.date-item	Tarih girişi	Tarih/Saat
.upload-item	Dosya yükleme alanı	Dosya yükleme
.answertext	Bir dizi satırındaki alt soru metni	Diziler
.col-answers	Alt soru metinlerinin bulunduğu sütun	Diziler
.ls-heading	Yanıt seçeneklerinin bulunduğu başlık satırı	Diziler
.ls-odd, .ls-even	Dönüşümlü satırlar	Diziler
.ls-label-xs-visibility	Yalnızca küçük ekranlarda ve ekran okuyuculara görünen etiket	Dizilerin hücreleri
.ls-input-group-extra	Bir girişin ön eki veya son eki	Kısa serbest yazı, Sayısal giriş, Birkaç kısa yazı, Birkaç sayısal giriş
.ls-js-hidden	JavaScript etkinken gizlenir	Çift ölçekli dizi, Liste (radyo)
.ls-no-js-hidden	JavaScript etkin değilken gizlenir	Sıralama
.ls-js-hidden-sr	JavaScript etkinken gizlenir ancak ekran okuyucular tarafından yine de okunur	Sıralama

Liste (radyo) türünde, "Yanıt yok" seçeneği noanswer-item yerine no-anwser-item sınıfına sahiptir (yazım bu şekildedir).

Örneğin, Liste (radyo) sorusunun yanıtlarının HTML kodu şöyledir:

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

Doğrulama ve ipucu sınıfları

Doğrulama ipuçları (örneğin "Aşağıdaki yanıtlardan birini seçin" veya "Lütfen 1 ile 10 arasında bir sayı girin") her zaman ls-em-tip sınıfına sahiptir. Katılımcı yanıt verirken LimeSurvey, ipucunun kuralı karşılandığında ls-em-success, karşılanmadığında ls-em-error sınıfını ekler; böylece iki durumu farklı biçimlendirebilirsiniz. Sorunun İpucu gizlensin ayarıyla gizlenen ipuçları hide-tip sınıfını alır.

Her ipucunun ayrıca türüne ait bir sınıfı vardır:

Sınıf	İpucu
.em_default	Soru türünün varsayılan ipucu (örneğin "Aşağıdaki yanıtlardan birini seçin")
.em_num_answers	En az veya en çok yanıt sayısı
.em_value_range	En küçük veya en büyük değer
.em_sum_range	Değerlerin en küçük veya en büyük toplamı
.em_sum_equals	Değerlerin toplamı belirli bir tutara eşit olmalıdır
.em_value_integer	Yalnızca tam sayılara izin verilir
.em_numbers_only	Yalnızca sayılara izin verilir
.em_other_numbers_only	"Diğer" alanında yalnızca sayılara izin verilir
.em_other_comment_mandatory	"Diğer" seçeneği seçilmiş ancak yazı alanı boş
.em_regex_validation	Yanıt, doğrulama desenine uymalıdır
.em_q_fn_validation	Soru geçerliliği denklemi
.em_sq_fn_validation	Alt soru geçerliliği denklemi

Sağdan sola (RTL) yazılan diller

Sağdan sola yazılan dillerde <html> öğesi dir-rtl sınıfına sahiptir ve çekirdek temalar ana CSS dosyalarının RTL sürümünü yükler. Yalnızca sağdan sola yazılan dillere uygulanacak kurallar için CSS kodunuzda .dir-rtl kullanın.

İpuçları ve püf noktaları

Bu örnekler, bir çekirdek temadan genişlettiğiniz temanın custom.css dosyasına (veya belirtilen yerlerde bir Twig dosyasına) eklenir. Örneklerde #c0392b değerini kendi renginizle değiştirin.

Radyo düğmelerinin ve işaret kutularının rengini değiştirme

Fruity TwentyThree ile birlikte gelen renklerden birini kullanmak için tema ayarları bölümünde bir Tema rengi seçin. Tema ayarları ayrıca farklı bir Simgeyi denetle seçmenize de olanak tanır.

Başka bir renk için custom.css dosyasına CSS ekleyin. Çekirdek temalar, tarayıcının varsayılan radyo düğmeleri ve işaret kutuları yerine kendi çizdikleri öğeleri kullanır; bu nedenle rengi değiştirmek, bu çizilmiş öğeleri değiştirmek anlamına gelir.

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 ve 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;
}

Renk ile arka plan arasında yeterli karşıtlık bırakın; böylece az gören katılımcılar da hangi yanıtların seçili olduğunu görebilir.

Radyo düğmelerini ve işaret kutularını büyütme

Daha büyük radyo düğmelerine ve işaret kutularına telefonlarda ve tabletlerde dokunmak daha kolaydır. Bu, tüm çekirdek temalarda çalışır:

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

Fruity TwentyThree temasında ayrıca radyo düğmeleri ile yanıt metni arasına biraz boşluk ekleyin:

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

Yaklaşık 1,4 değerine kadar olan değerler başka bir değişiklik gerektirmeden çalışır. Daha büyük değerlerde denetimler, küçük ekranlarda yanıt metniyle ve dizi satırlarının kenarlarıyla çakışmaya başlar; bu nedenle çevrelerine daha fazla boşluk eklemeniz gerekir.

İlerleme çubuğunun rengini değiştirme

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

İçeriği yalnızca bir dilde gösterme

<body> öğesi, lang-en veya lang-fr gibi geçerli dili belirten bir sınıfa sahiptir. Bunu, örneğin altbilgideki bir yardım satırı gibi her dilde farklı içerik göstermek için kullanabilirsiniz. Her dil için metni temanızın subviews/footer/footer.twig gibi bir Twig dosyasına ekleyin:

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

Ardından custom.css dosyasında diğer dillerin metnini gizleyin:

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

Her ankete farklı bir logo kullanma

Her logo için ayrı bir temaya ihtiyacınız yoktur. Tema ayarları tek bir anket için belirlenebilir: anketi açın, Anket ayarları menüsünde Tema ayarları seçeneğine tıklayın ve farklı bir Logo dosyası seçin. Bkz. Tema ayarları.

Özel bir favicon görüntüleme

Favicon, tarayıcı sekmesinde ve yer imlerinde görüntülenen küçük simgedir. Çekirdek temalar, temanın files/favicon.ico dosyasını gösterir. Kendi simgenizi kullanmak için dosyaya favicon.ico adını verin ve genişlettiğiniz temanın Diğer dosyalar panelinden yükleyin. Bu dosya, üst temanın simgesinin yerine geçer.

Fruity TwentyThree temasında logoyu ortalama

Tema ayarlarında Logo seçeneğini açın, ardından şunu custom.css dosyasına ekleyin:

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

Herkese açık anket listesine kendi logonuzu ekleyin

Herkese açık anket listesi varsayılan olarak LimeSurvey logosunu gösterir. Kendi logonuzu göstermek için:

1. Fruity TwentyThree temasını genişletin ve temanızı tema düzenleyicide açın.
2. Logonuzu Diğer dosyalar panelinden yükleyin.
3. Anket listesi ekranını seçin ve layout_survey_list.twig dosyasını açın.
4. {{ include('./ls_logo_svg.twig') }} satırını içeren <div> öğesini bulun. Bu <div> öğesinin tamamını, include satırı da dahil, bu adımların altında gösterilen kodla değiştirin.
5. Yerel kalıba kopyala ve değişiklikleri kaydet düğmesine tıklayın.
6. Yapılandırma > Genel ayarlar > Genel ayarlar bölümüne gidin ve temanızı Herkese açık anket listesi ve hata sayfaları için tema olarak seçin.

Yüklediğiniz dosyanın adını ve alternatif metin olarak kuruluşunuzun adını kullanın:

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

Çift ölçekli dizilere ayırıcı çizgi ekleyin

Çift ölçekli dizi türündeki bir sorunun iki ölçeği arasına dikey çizgi çizmek için:

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

Sorularda JavaScript

Anketlerinizin tüm sayfalarında JavaScript çalıştırmak için, onu temanızın custom.js dosyasına ekleyin (bkz. yukarıda).

Tek bir sorunun veya grubun metnine de betik ekleyebilirsiniz. LimeSurvey, XSS süzgeci kullanıcınız için kapalı değilse bu metinlerdeki betikleri kaldırır. Süzgeç hiçbir zaman süper yöneticilere uygulanmaz. Diğer kullanıcılar için Yapılandırma > Genel ayarlar > Güvenlik bölümünde HTML kodundan XSS süzülsün seçeneği kapatılmalıdır. Bunu yalnızca anketleri düzenleyebilen herkese güveniyorsanız yapın. Ayrıntılar ve örnekler için Workarounds: Manipulating a survey at runtime using Javascript sayfasına bakın.