LS3.x'te Yeni Tema Sistemi
From LimeSurvey Manual
Giriş
Lütfen dikkat: LimeSurvey'in önceki sürümlerinde anketin nasıl göründüğünü, renkler, yazı tipleri, düzen ve (bazı) davranışlar açısından nasıl sunulduğunu belirleyen dosyalara "şablon" deniyordu. Yeni anlayış doğrultusunda bunlara artık "tema" denir; şablon ise örnek anketler için ayrılmıştır.
Bu sayfada şunları öğreneceksiniz:
- LimeSurvey 3.0'ın yeni tema sistemini kullanma.
- Kendi temalarınızı yönetmek için devralmayı kullanma.
- Temanıza görsel ekleme
- Anketleriniz ve anket gruplarınız için tema ayarlarını yönetme
LimeSurvey 3, Twig 1.29 ve Bootstrap tabanlı, tema devralmayı ve tema ayarlarını destekleyen tamamen yeni bir tema altyapısı sunar. Eski değiştirme anahtar sözcükleri sistemini tamamen ortadan kaldırır. Böylece ön yüz HTML'inin %100'ü özelleştirilebilir. Örneğin eski tema sisteminde, çalışma anında değerlendirme HTML'iyle değiştirilen {ASSESSMENTS} anahtar sözcüğü vardı. Tema tasarımcısının bu HTML'i özelleştirmesinin (JavaScript kullanmak dışında) bir yolu yoktu. Artık bu HTML'i üretmek için (Twig ile yazılmış) mantığı içeren assessments.twig adlı bir dosya var. Bu sayfalarda yeni tema altyapısının nasıl kullanılacağını açıklayacağız.
Twig'in nasıl çalıştığını burada ayrıntılı olarak anlatmayacağız. Twig, “sandbox” sistemi sayesinde yüksek düzeyde güvenlik sunan, oldukça basitleştirilmiş bir PHP türüdür (bunu Tema Altyapısı Çekirdek Kodu bölümünde daha ayrıntılı göreceğiz). PHP biliyorsanız Twig'de ustalaşmanız çok kolay olacaktır. PHP bilmiyorsanız bile öğrenmesi oldukça kolay olmalıdır. Lütfen Twig 1.X belgelerine göz atın:
https://twig.symfony.com/ Yönetim Arayüzünü Kullanarak Düzenleme
Tema listesi
Yönetim panosunda artık tema listesine erişmek için bir kutu bulunur:
Liste 5 sütuna ayrılmıştır:
- temanın ön izlemesi: temanın kök dizininde bulunan “preview.png” adlı bir görsel dosyasıdır
- temanın bildirimde (temanın kök dizinindeki config.xml) belirtilen “başlığı”
- temanın açıklaması: bildiriminde ayarlanmış bir metin
- temanın türü: Çekirdek tema (LimeSurvey ile birlikte gelir), Kullanıcı teması (upload dizinine eklenir), XML teması (veritabanına yüklenmemiştir)
- Genişletir: tema başka bir temayı genişletiyorsa, onun adı burada gösterilir
- Bazı işlem düğmeleri:
- Kur: bir temanın bildirimini yükleyerek veritabanına ekler ve anket düzeyinde seçilebilir hale getirir
- Kaldır: bir temanın yapılandırma kayıtlarını veritabanından siler
- Tema düzenleyici: sizi tema düzenleyiciye yönlendirir
- Tema ayarları: sizi tema ayarlarının genel yapılandırmasına götürür
Tema düzenleyici
Bu belge, LS'in önceki sürümündeki tema düzenleyicinin nasıl kullanılacağını bildiğinizi varsayar.
Tema düzenleyici, aslına olabildiğince yakın tutulmuştur. Bu nedenle bir çekirdek temayı açtığınızda onu düzenleyemezsiniz. Ancak artık “kopyala” düğmesi yerine bir “genişlet” düğmeniz vardır.
Tema devralma kavramına kısa bir özet
LS3'te bir tema artık başka bir temadan devralabilir, yani başka bir temayı “genişletebilir”. Bu, tema dizininin neredeyse boş olacağı, yalnızca özgün dosyalardan farklı olan dosyaları (görünümler, biçem sayfaları, betikler, kaynaklar vb.) içereceği anlamına gelir. Böylece çok sayıda farklı temayı bakımını yapmak zorunda kalmadan farklı kullanıcılarınız için bir tema grubu oluşturmanız kolaylaşır. Örneğin: kendi hazırladığınız bir temanız, ardından bir şirket için (logosu, biçemi, belki alt bilgide web sitesine bir bağlantı vb. ile) bir sürüm, başka bir şirket için başka bir sürüm vb. olabilir. Daha sonra özel temanızın CSS'ini ya da genel düzenini güncellediğinizde, ondan devralan tüm temalar otomatik olarak güncellenir. Devralmanın özyinelemeli olduğunu unutmayın: bir tema, başka bir temayı genişleten bir temayı genişletebilir vb.
Bu aynı zamanda LimeSurvey'in çekirdek temalarından birini genişletirseniz, güncellemelerinden yararlanmaya devam edeceğiniz anlamına gelir.
Kullanıcı arayüzündeki yenilikler
LimeSurvey'in Monochrome temasını genişletmek için Tema listesine gidin, Monochrome temasının “Tema düzenleyici” düğmesine tıklayın. Ardından “genişlet” düğmesine tıklayın ve yeni adı “extends_monochrome” olarak onaylayın.
Şimdi (dosya/FTP istemcinizle) upload dizinine giderseniz yeni bir dizin oluşturulduğunu göreceksiniz: upload/themes/extends_monochrome Bu dizin bir XML dosyası ve dizinler içerir, ancak dizinlerin çoğu boştur. Ne görünümleri ne CSS ne de JS içerir. Yine de bu temayı bir anketten normal bir tema gibi seçebilirsiniz ve tam olarak monochrome teması gibi görünür.
Bir tema genişletilirken özgün temanın kaynakları (jpg, png vb.) kopyalanır. Bunun nedeni, özgün temadaki bir CSS dosyasını yerel olarak kopyalarsanız ve bu dosya o kaynaklara (ör. background-image ifadesinde olduğu gibi) başvuruyorsa, bu görselleri geçerli temanın yolunda bulması gerekmesidir. extends_monochrome temasının tema düzenleyicisi şöyle görünür:
Eski tema düzenleyiciyle arasında büyük bir fark yoktur. Başlıcalarını sıralayalım:
- Dosya listesindeki devralınmış anahtar sözcüğü. Dosyanın tema dizininde bulunmadığı ve özgün temadaki dosyanın kullanılacağı anlamına gelir.
- Ana düzenleyici ( ACE düzenleyici ) seçili dosyanın içeriğini gösterir. Dosyalar yalnızca HTML, CSS veya JS değil, aynı zamanda Twig ifadeleri de içerir. Bu Twig ifadeleri, daha önce çekirdeğin derinliklerinde bulunan ve artık özelleştirilebilen bazı mantığı tema görünümlerine taşıma olanağı sunar.
- Bu nedenle üst menüdeki açılır seçicide artık daha fazla ekran türü bulunur. Daha önce bulunmayan veya gerçekten özelleştirilemeyen ‘Anket listesi’, ‘Yükle’, ‘Kaydet’, ‘Hata’, ‘Kayıt’, ‘Değerlendirmeler’, ‘Yanıtları yazdır’ gibi sayfaları fark edeceksiniz.
- Dosya listesinin altındaki ‘ipucu’ bağlantısı, HTML'inize görsel eklemenin Twig yolunu gösterir
- ‘Değişiklikleri kaydet’ düğmesi Yerel kalıba kopyala ve değişiklikleri kaydet düğmesine dönüşür
Hızlı örnek: görsel ekleme
Yerel kalıba kopyala ve değişiklikleri kaydet düğmesi tam olarak adının söylediğini yapar: dosyanın içinde herhangi bir şeyi düzenleyip bu düğmeye tıklarsanız, dosyayı düzenlediğiniz temaya kopyalar ve değişikliklerinizi kaydeder.
Örneğin: layout_global.twig dosyasına tıklayın, ardından içerik bloğundan ( {% block content %}) hemen önce “TEST” metnini ekleyin ve düğmeye tıklayın. Dosyanın etiketinin “devralınmış” yerine “yerel” olarak değiştiğini ve düğmenin artık basit bir Değişiklikleri kaydet düğmesi olduğunu görebilirsiniz.
Bir dosya gezgini açıp upload/themes/extends_monochrome/views/ dizinine giderseniz, yalnızca layout_global.twig dosyasını içerdiğini ve “TEST” metninin orada olduğunu göreceksiniz.
Şimdi rastgele bir metin eklemek yerine bir görsel ekleyeceğiz. İpucu bağlantısına tıklarsanız size şunu söyler:
Bir .twig dosyasında bir görsel kullanmak için:
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Twig belgelerini okuduysanız (ve bu noktada okumuş olmanız gerekir), {{ function( ) }} ifadesinin bir işlevin sonucunu ekrana yazdırdığını bilirsiniz. Burada işlev image( ) işlevidir.
Ne yaptığını merak ediyorsanız, kodunu burada bulabilirsiniz (RC3 sürümü): RC3'teki image() işlevi
Kodu anlamazsanız endişelenmeyin; nasıl çalıştığını bilmeniz gerekmez, neden ve nasıl kullanılacağını bilmeniz yeterlidir.
image() işlevini iki nedenle kullanmalısınız:
- image işlevi, görseli bulmak için tema içinde döngü yapar. Üzerinde çalıştığınız tema başka bir temaya bağlı olarak genişletilmişse ve görseli eklediğiniz dosyayı yerel olarak kopyalarsanız ancak görsel yerel temaya kopyalanmamışsa, görselin nerede olduğunu bulmak için tema devralma ağacında döngü yapar.
- Varlık yöneticisini kullanır, böylece temanızın performansını artırır. Bu konuda daha fazla bilgi için Yii Varlık Yöneticisi belgelerine bakın: http://www.yiiframework.com/wiki/148/understanding-assets/
Bu nedenle temanıza görsel eklemek için:
- görseli sağdaki dosya yükleyiciyle her zamanki gibi yükleyin ve ardından herhangi bir twig dosyasında istediğiniz yere ekleyin:
{{ image('./files/myfile.png') }}
- Görseliniz için alternatif metin eklemek istiyorsanız (ekran okuyucular ve HTML doğrulaması için), şunu ekleyin:
{{ image('./files/myfile.png'), ‘my alternative text’ }}
- Bir sınıf özniteliği ve bir kimlik eklemek istiyorsanız:
{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}
Yapılacaklar listemizdeki bazı işler
- Kullanıcılara özel bir ön izleme dosyasını doğrudan düzenleyiciden yükleme olanağı vermek
- Yerel dosyayı silip devralınan duruma dönmek için bir düğme eklemek
- Yalnızca CSS dosyalarında kullanılan görseli kopyalamak (bildirimde kopyalanacak dosya olarak listeleyerek)
- Geçerli temanın hangi temayı genişlettiğini (varsa) hatırlatmak
Tema ayarları
LS3'ün bir başka yeniliği tema ayarları sayfasıdır. Daha sonra göreceğimiz gibi, tema yaratıcıları kendi ayarlarını ve hatta kendi yönetim ayarları sayfalarını oluşturabilir. Burada çekirdek temaların ayarlar sayfasının nasıl çalıştığına kısaca bakacağız. Tema ayarlarına genel düzeyde erişmek için: tema listesinde “Tema ayarları”na tıklayın
Gelişmiş ayarlar
Tema ayarları sekmesini açtığınızda basit ayarlar veya gelişmiş ayarlar bölümünü düzenlemeyi seçebilirsiniz. “Gelişmiş ayarlar”, veritabanındaki ana tema yapılandırma alanlarına erişmenizi sağlayan yalın bir formdur. Nasıl çalıştığını anlamak için XML dosyası ve sıfırdan tema oluşturma hakkındaki bilgileri de okumalısınız. Bu nedenle oldukça karmaşıktır ve ileri düzey kullanıcılar için hazırlanmıştır.
Ancak gelişmiş ayarları düzenlemek istiyorsanız gelişmiş ayarlar sekmesine tıklayın
- Dosyalar için CSS: Şablona eklenmesi gereken CSS dosyaları;
- Dosyalar için JS: Şablona eklenmesi gereken JS dosyaları;
- Dosya yazdırma için CSS: Bir şablon yazdırılırken yüklenecek CSS dosyaları;
- Ayarlar: Bu alan, şablon görünümüne aktarılması gereken ayarları (ve değerlerini) içerir;
- CssFramework Name: Yüklenecek CSS çerçevesinin adı. Şimdilik yalnızca Bootstrap veya hiçbiri;
- Cssframework Css: Bu alanda çekirdek bootstrap.css dosyasını, özel bir sürümüyle değiştirebilirsiniz;
- Cssframework Js: Çekirdek boostrap.js alanı buradan, özel bir sürümüyle değiştirilebilir;
- Yüklenecek paketler: Bu ayardan LimeSurvey'in bazı çekirdek varlık paketlerini yükleyebilirsiniz.
Üst kısımda, temanın dosya dizinine dosya yüklemenizi sağlayan bir yükleme alanı göreceksiniz. Bu parametreler temanın tüm görünümünü değiştirmek için kullanılabilir.
Uyarı! : Ne yaptığınızı bilmiyorsanız değerlere dokunmayın!
Basit ayarlar
Basit ayarlar sayfası temanın kendisinden gelir. Temanın /options dizinindeki bir twig dosyası ve bazı JavaScript ile oluşturulur: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Bozuk bağlantı)
Bu sayfa bir temadan diğerine tamamen farklı olabilir ve tema sağlayıcılarının kendi görünüm ve işleyişlerini oluşturmaları önemle teşvik edilir. 
Basit ayarlar sayfası, gelişmiş formdaki girdileri doldurmaktan başka bir şey yapmaz. Bunu, basit sayfada bir ayarı açıp kapatarak ve gelişmiş formdaki ilgili girdinin buna göre nasıl değiştiğini görerek anlayabilirsiniz. Örneğin varsayılan temanın basit ayarlarında Bootswatch temasını “Darkly” olarak değiştirip (kaydetmeden bile) gelişmiş ayarlar sekmesine tıklarsanız, “Cssframework Css” alanının şu değerden değiştiğini göreceksiniz:
{"replace": [["css/bootstrap.css","css/flatly.css"]]}
öğesinden
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
öğesine değişir. Çekirdek temalar için basit ayarlar şunlardır:
- Ajax kipi: Sonraki sayfa ajax ile mi (daha hızlı) yoksa sayfa yenilenerek mi (hata ayıklama için daha iyi) yüklensin
- Arka plan görseli: Evet olarak ayarlanırsa pattern.png adlı görsel yüklenir (Master sürümünde bir dosya seçici ile değiştirilecektir)
- Kutu kapsayıcı: Hayır olarak ayarlanırsa sorular bir kutu içinde yer almaz (böylece ekran genişliğinden büyük geniş diziler kullanabilirsiniz)
- Marka logosu: Hayır olarak ayarlanırsa anketin adı üst çubukta gösterilir, aksi halde dosya dizinindeki görsellerden birini logo olarak seçebilirsiniz.
- İçerik canlandırılsın: Evet olarak ayarlanırsa anketin gövdesi yüklendiğinde uygulanacak canlandırmalardan birini seçebilirsiniz
- Soru canlandırılsın: Aynısı sorular için geçerlidir
- Uyarılar canlandırılsın: Aynısı uyarılar için geçerlidir
- Bootstrap teması: Burada yüklenecek bir Bootstrap temasını seçebilirsiniz. Bu temalar Bootswatch sitesinden gelir: https://bootswatch.com/3/
Canlandırmalar için kullanılan kitaplık animate.css'dir: https://daneden.github.io/animate.css/
Elbette bir tema sağlayıcısı kendi canlandırma kitaplığını ekleyebilir ya da hiç canlandırma kitaplığı kullanmayabilir.
Monochrome temaları, yönetim kullanıcı arayüzüyle aynı Bootstrap renk temasını kullanır. CSS çatısı değiştirme sistemini kullanmazlar, yalnızca bir CSS dosyası eklerler. Bu nedenle tema sağlayıcıları için özel temalarla çalışmanın başka bir yolunu gösterir.
Devralma sistemi
Önceki bölümde bir temanın başka bir temayı genişletebileceğini gördük. Bir tema yapılandırması da başka bir tema yapılandırmasından devralabilir. Bu, belirli bir tema için şu düzeylerde yapılandırmanız olabileceği anlamına gelir:
- genel düzey (tema listesinden erişilebilen, az önce gördüğümüz düzey)
- anket grubu düzeyi
- son olarak anket düzeyi.
Belirli bir düzeydeki her parametre üst düzeyden devralabilir: anket grubu devralma. Önce anket grubu düzeyine bakalım.
Anket grubu düzeyinde
LS3'ün diğer büyük yeniliklerinden biri de anket grubu sistemidir. Artık anketlerinizi düzenlemek için farklı gruplar oluşturabilirsiniz. Bu bölüme erişmek için anket listesine gidin ve ardından anket grupları sekmesine tıklayın:
Bu listede iki işlem düğmesi vardır. Grup boşsa silebilirsiniz. Aksi halde her zaman düzenleyebilirsiniz. Düzenle düğmesine tıkladığınızda Anket grubu yapılandırma sayfasına ulaşırsınız:
Bu sayfanın üçüncü sekmesi “Bu anket grubu için şablon ayarları” olarak adlandırılır. Üzerine tıklarsanız tema listesindekiyle aynı tema listesini görürsünüz; tek fark burada yalnızca ayarlar düğmesinin görünür olmasıdır (tema düzenleyiciye yalnızca ana listeden ulaşılabilir).
Şimdi Varsayılan Şablon için ayarlar düğmesine tıklarsanız şunu görürsünüz:
- Her şey devralınsın, tüm yapılandırmanın Genel yapılandırma düzeyinden devralınacağı anlamına gelir.
- Gelişmiş ayarlar sayfasına giderseniz tüm alanların devral olarak ayarlandığını görürsünüz.
- Basit ayarlarda "Her şey devralınsın" için "Hayır"a tıklarsanız yine genel ayarlar sayfasına çok benzer bir sayfa görürsünüz. Tek fark, her alanı evet, hayır ya da devral olarak ayarlayabilmeniz ve her açılır seçicide bir devral' değeri bulunmasıdır.
Bir anket grubu başka bir grubun alt grubu olabilir. Bu durumda üst grubundan devralır.Anket düzeyinde
Bir anketi düzenlerken sol çubuk menüsünde yeni bir “Tema ayarları” girişi görürsünüz. Bu giriş sizi geçerli anket için seçilen Temanın ayarlar sayfasına götürür. Anket grubundakiyle aynı devralma sistemini bulursunuz, ancak bu kez devral, ayarın anketin Anket grubundan devralınacağı anlamına gelir.
Kullanım örneği
Farklı şirketler (A ve B) için tek bir tema kullandığınızı varsayalım. Favori ayarlarınızı genel düzeyde belirlersiniz (örneğin: ajax açık, içerik kayarak girişle canlandırılsın, uyarılar nabız efektiyle). Ardından her şirket için bir anket grubu oluşturursunuz: A şirketinin tüm anketlerini barındıracak bir anket grubu ve B şirketinin tüm anketlerini barındıracak bir anket grubu. Bu düzeyde yalnızca logoyu ve arka planı ayarlar, diğer ayarların devralınmasına izin verirsiniz. Böylece A grubundaki tüm anketler A şirketinin logosunu, B grubundaki tüm anketler B şirketinin logosunu kullanır. A şirketinin anketlerinden biri için anketin konusuna uygun farklı bir arka plan kullanabilirsiniz: yalnızca anket düzeyindeki ayarlarda arka planı değiştirirsiniz. B şirketinden biri nabız efektli uyarının çok sert olduğunu ve belirerek giriş gibi daha yumuşak bir şeyi tercih edeceğini söylerse, uyarı canlandırmasını yalnızca B Anket Grubu düzeyinde değiştirirsiniz ve bu gruptaki tüm anketler artık bu canlandırmayı kullanır. A şirketi logosunu değiştirirse bunu A Anket Grubu düzeyinde değiştirebilirsiniz ve bu gruptaki tüm anketler yeni logoyu kullanır.
Tema özelleştirme hakkında SSS
Burada forumda sorulan ve temanızı özelleştirmenize yardımcı olabilecek bazı soruların yanıtlarını bulacaksınız.
CSS/JS özelleştirme: varlık yöneticisi ("değişikliklerim neden uygulanmıyor?")
Bir temanın CSS/JS kodunu favori düzenleyicinizle doğrudan düzenleyerek güncellemeye çalışıyorsanız, değişikliklerinizin uygulanmamasına şaşırabilirsiniz.
2.50 sürümünden beri LS, Yii varlık yöneticisini kullanmaktadır:
Varlıklar hakkında Yii Belgeleri
Bir temanın CSS/JS dosyalarını rastgele bir dizeye sahip tmp/ alt dizinine taşır (örn: "tmp/1ef64ml/"). Dolayısıyla bir css/js dosyasında değişiklik yapıp bunu varlık yöneticisine bildirirseniz dosyalar yeni adlı bir alt dizine kopyalanır; böylece kullanıcının web tarayıcısı önbelleği güncellenir ve yeni css/js görülür. Aksi halde tarayıcı önbelleğini temizlemeleri gerekirdi.
Varlık yöneticisi açıkken başlıktaki CSS bağlantıları şöyledir:
Görebileceğiniz gibi hepsi tmp/ alt klasörlerine işaret eder.
Varlık yöneticisi kapalıyken başlıktaki CSS bağlantıları şöyledir:
Görebileceğiniz gibi temanın gerçek dosyalarına işaret eder.
Elbette Varlık Yöneticisi dosyayı değiştirdiğinizi bilmiyorsa, eski tmp/ dizinindeki eski dosya değişmeden kalır ve değişiklikleriniz hiçbir zaman uygulanmaz.Bir temanın CSS/JS dosyalarını düzenlerken çeşitli olanaklarınız vardır:
- LS Tema düzenleyicisini kullanabilirsiniz: varlık yöneticisiyle ilgilenir ve hiçbir şey için endişelenmeniz gerekmez
- Hata ayıklama kipini açabilirsiniz: varlık yöneticisini kapatır, böylece temalarınızın gerçek css/js dosyaları çağrılır (ancak bu durumda her yüklemede tarayıcı önbelleğinizi yenilemeniz gerekir)
- Varlık önbelleğini yenileyebilirsiniz: Genel ayarlar -> Genel -> Varlık önbelleğini temizle yolundan
Özel CSS'yi düzenlemek için tema düzenleyiciyi kullanmak açık ara en iyi çözümdür.
Tema düzenleyiciyi kullanmak, yeni tema motorunun mimarisini anlamanıza yardımcı olur.
Ayrıca fruity temasını özelleştiriyorsanız CSS özgüllüğüne dikkat edin: tanımların çoğu ".fruity" seçicisini (body öğesinin sınıflarından biri) kullanır.
Temama özel yazı tipleri ekleme
Kolay yol: Google Font CDN kullanımı
Bootswatch Anket Teması Google Font CDN kullanır. Nasıl çalıştığına bakalım: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
Ardından Lato yazı tipi CSS kurallarıyla kullanılır: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
body {
...
font-family: "Lato";
...
}
Özel temanızda herhangi bir Google yazı tipini bu şekilde kullanabilirsiniz. Elbette temanızın ayarlarından yazı tipi seçicisini kaldırmalısınız. options.twig dosyasındaki şu satırları silin: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230
Yerel yazı tipi kullanımı
Elbette yazı tipi dosyalarını indirip Google CDN yerine yerel sunucudan da kullanabilirsiniz (gizlilik açısından daha iyidir). Nasıl yapıldığına dair bir örnek olarak noto yazı tipinin yerel sürümümüz: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
@font-face {
font-family: 'Noto Sans';
font-weight: 300;
font-style: normal;
src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
Tema css dosyanızda çok benzer bir tanım kullanabilir, ardından NotoSans-Regular.ttf dosyasını temanızın css/font-src/ klasörüne kopyalayabilirsiniz.
Ardından bu yazı tipini yukarıdaki gibi body öğenize (veya başka bir öğeye) uygulayın ve varsayılan ayar yazı tipi seçicisini kaldırın.
Seçeneklerde kendi yazı tipi seçicinizi oluşturma
Şimdilik, ayarlarda kendi yazı tipinizi eklemek için çekirdek yazı tipi seçicisini kolayca kullanamazsınız. Önce son kullanıcıya özel paketleri yükleme olanağı vermemiz gerekir (bkz. sonraki paragraf: Fruity Yazı Tipi Seçicisine Bir Bakış)
Şu şekilde ilerleyin:
- Temanıza CDN veya yerel sunucu kullanarak iki yazı tipi (my_custom_font ve my_custom_other_font) ekleyin
- Ardından css dosyanızda iki yeni sınıf ekleyin:
.font-my_custom_font {
font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
font-family: 'my_custom_other_font';
}
- Temanızın XML dosyasında bir yazı tipi seçeneği ekleyin (varsayılan olan my_custom_font olacaktır) :
<options>
....
<font>my_custom_font</font>
</options>
- option.twig dosyasında şu satırları ekleyerek yazı tipi seçicinizi ekleyin (şimdilik test edilmedi; çalışmazsa forumda bildirin):
<div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
<hr/>
</div>
<div class='row action_hide_on_inherit'>
<div class='col-sm-12'>
<div class='panel panel-default'>
<div class='panel-heading'>{{ "My custom fonts" | t }}</div>
<div class='panel-body'>
<div class='form-group row'>
<label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
<div class='col-sm-12'>
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
{% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
{% endif %}
<optgroup label="{{ "My Custom fonts" | t }}">
<option class="font-my_custom_font" value="custom_font" data-font-package="" >Custom</option>
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" >Other</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Artık kullanıcılarınız bu iki yazı tipi arasında seçim yapabilmelidir.
Fruity Yazı Tipi Seçicisine Bir Bakış
İleride son kullanıcıya, yazı tipi paketleri dahil kendi varlık (asset) paketlerini yükleme olanağı vereceğiz. Bu, yazı tiplerinin özelleştirilmesini çok kolaylaştıracaktır.
Yii Paketlerini anlamak için:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
LimeSurvey paketleri farklı dosyalarda tanımlanır. Yazı tipi paketleri burada tanımlanmıştır:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Örneğin Noto yazı tipi paketi burada tanımlanmıştır:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
'font-noto' => array(
'devBaseUrl' => 'assets/fonts/',
'basePath' => 'fonts',
'css' => array(
'noto.css',
),
),
İçerdiği noto.css dosyası burada:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Dosyanın sonundaki ".font-noto" css sınıfı tanımına dikkat edin:
@font-face {
font-family: 'Noto Sans';
...
}
...
.font-noto{
font-family: 'Noto Sans';
}
Vanilla Temasında noto yazı tipi, noto paketi eklenerek ve yazı tipi seçeneği noto olarak tanımlanarak kullanılır:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79
<packages>
....
<add>font-noto</add>
</packages>
<options>
....
<font>noto</font>
</options>
Ardından body sınıfındaki yazı tipi bu değer kullanılarak tanımlanır:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... >
Elbette XML dosyası, tema yapılandırmanız için yalnızca varsayılan değerleri içerir. Ancak bu değerler aslında veritabanında ("template_configuration" tablosu (Soru: "template_" mi, "theme_" mi?)) json dizeleri olarak tanımlanır ve oradan okunur. option.js dosyası, gelişmiş sekme formundaki değeri değiştirmek için yalnızca basit ayarlardaki yazı tipi seçicisinin değerini kullanır: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174
Dolayısıyla "varlık paketi yükleme" işlevi kullanılabilir olduğunda, mevcut tüm yazı tipi paketlerini tarayıp seçiciye ekleyen bir betik eklemek kolay olacaktır.
Anket öğelerinin konumunu ve görünümünü denetlemek için tema ayarları ekleme
Bu eğitim, anket öğelerini çeşitli konumlarda göstermek üzere genişletilmiş bir temaya nasıl ayar ekleneceğini gösterir. Bu örnekte, anket başlığını iki farklı konumda göstermek için tema ayarları oluşturacağız.
Basitlik açısından eğitimi, LimeSurvey sürümü 3.4.3'teki "bootswatch" temasının bir uzantısı üzerine kuracağız.Özel bir tema oluşturma
- "bootswatch" temasını yukarıda açıklandığı şekilde genişletin.
- custom.css dosyasını yukarıda açıklandığı şekilde yerel temaya kopyalayın.
Yeni tema ayarları oluşturma
- /themes/survey/bootswatch/options/ içeriğini /upload/themes/survey/yourThemeName/options/ dizinine kopyalayın.
- /upload/themes/survey/yourThemeName/options/options.twig dosyasını bir düzenleyicide açın ve "{# Bootstrap Bootswatch theme #}" ifadesini bulun. Üst öğesi olan <div class='row'> öğesinden hemen önce şunu ekleyin:
{# Custom survey name in navbar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Yes </label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Custom survey name below progress bar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Yes </label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> - /upload/themes/survey/yourThemeName/config.xml dosyasını açın ve "options" bloğuna şu şekilde görünecek biçimde iki öğe ekleyin:
<options> <ajaxmode>on</ajaxmode> ... <surveyname1>on</surveyname1> <surveyname2>on</surveyname2> </options>
- Bu, Tema ayarları ekranında şuna benzer iki yeni seçenek sunmalıdır:
Gezinti çubuğundaki anket başlığı için değiştirilmiş görünüm
- /upload/themes/survey/yourThemeName/views/subviews/header/ adında yeni bir dizin oluşturun.
- /themes/survey/vanilla/views/subviews/header/nav_bar.twig dosyasını bu yeni dizine kopyalayın.
- /themes/survey/vanilla/views/subviews/header/nav_bar.twig dosyasını açın ve "{# Logo option #}" ifadesini bulun. Bunun altında, logo/anket adı için olan IF ifadesini şu şekilde görünecek biçimde değiştirin:
{# Logo option #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container" {{ aSurveyInfo.attr.navbarbrand }} > {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }} </div> {% endif %} {% if( aSurveyInfo.options.surveyname1 == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} > {{ aSurveyInfo.name }} </div> {% endif %} - /upload/themes/survey/yourThemeName/css/custom.css dosyasına şuna benzer bir şey ekleyin:
.navbar-brand { line-height: 60px; font-size: 32px; }
- "Survey name in navbar" tema seçeneğini "Evet" olarak değiştirin.
- Şunu görmelisiniz:
İlerleme çubuğunun altındaki anket başlığı için değiştirilmiş görünüm
- /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews adında yeni bir dizin oluşturun.
- /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig dosyasını bu yeni dizine kopyalayın.
- /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig dosyasını açın ve anket adı için bir <h1> öğesi ekleyin. Dosya şu şekilde görünmelidir:
<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Custom survey name #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1> {% endif %} {# Group Name #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Group Description #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# PRESENT THE QUESTIONS This is the main part. It will render each question for this group #} <!-- PRESENT THE QUESTIONS --> {% for aQuestion in aGroup.aQuestions %} {{ include('./subviews/survey/question_container.twig') }} {% endfor %} <!-- Hidden inputs --> {% if aGroup.show_last_group == true %} <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %} {% if aGroup.show_last_answer == true %} <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %} </div>
- /upload/themes/survey/yourThemeName/css/custom.css dosyasına şuna benzer bir şey ekleyin:
.navbar-brand { line-height: 60ph1.custom-survey-name { margin: 0; text-align: center; }
- "Survey name below progress bar" tema seçeneğini "Evet" olarak değiştirin.
- Şunu görmelisiniz:
İndirilebilir dosyalar
- Örnek genişletilmiş tema: Media:Test_survey_names.zip
Sıfırdan tema oluşturma
Belgeler yakında eklenecektir.
Şimdilik yalnızca birkaç ipucu veriyoruz.
Tema yapısı
Dosyalar ve dizinler
Sıfırdan bir tema oluşturduğunuzda, Vanilla temasındaki dosya/dizin yapısına/css/js dosyalarına uymanız gerekmez. Zorunlu css/js dosyaları çekirdek tarafından eklenir (gerekirse bunları yine de kaldırabilirsiniz).
Temanızda bulunması zorunlu olan tek dosyalar yerleşim dosyalarıdır:
- layout_global.twig : anket doldurma sayfalarını oluşturur
- layout_survey_list.twig : anket listesini oluşturur (bu tema varsayılan olarak ayarlanmışsa)
- layout_errors.twig : anketin görüntülenmesini engelleyen hataları göstermek için kullanılır (yanlış anket kimliği, grup ön izlemesinde boş grup vb.)
- layout_user_forms.twig: kod (anket katılımcısı) ve kayıt gibi kullanıcı formlarını oluşturur.
- layout_print.twig : anketi PDF olarak yazdırmak için kullanılır
- layout_printanswers.twig: yanıtları yazdırır
Bu dosyaların içeriği ve hangi dosyaları içerip içermeyecekleri tamamen size bağlıdır. Vanilla'da bulduğunuz diğer tüm dosya ve dizinler tamamen isteğe bağlıdır; kodunuzu istediğiniz gibi düzenlemekte özgürsünüz.
Ön yüz görüntüleme kodunu incelerseniz, bu dosya adlarının doğrudan kodun içinde geçtiğini görürsünüz. Bu nedenle zorunludurlar.
İçerik
Vanilla'nın layout_global.twig dosyasında, ne gösterileceğine karar vermek için "include_content" adlı bir değişken kullandığımızı göreceksiniz. https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115
{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
{% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
aSurveyInfo.include_content o anda hangi işlemin yapıldığını belirtir: sorular mı gösteriliyor? gönderme sonucu mu gösteriliyor? tümünü temizle mi gösteriliyor? vb. Gördüğünüz gibi Vanilla'da her işlem için dahil edilecek bir dosya oluşturuyoruz. Dolayısıyla işlemlerin listesini öğrenmek istiyorsanız, Vanilla'nın views/subviews/content dizinine bakmanız ve "twig" uzantısını çıkarmanız yeterlidir: https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content
- clearall.twig
- firstpage.twig
- load.twig
- mainrow.twig
- main.twig
- optin.twig
- optout.twig
- outerframe.twig
- printanswers.twig
- quotas.twig
- register.twig
- save.twig
- submit_preview.twig
- submit.twig
- userforms.twig
LimeSurvey'in 2.x sürümleri için daha önce bir tema oluşturduysanız, bunların çoğunun LimeSurvey 2.x'teki eski pstpl dosyalarına karşılık geldiğini fark edeceksiniz. Yine de temanızda bu dosyaları bu adlarla bu dizinde oluşturmak zorunda değilsiniz. Örneğin, layout_global.twig içine her işlem için istediğiniz HTML'yi içeren büyük bir switch yapısı ekleyebilirsiniz.
config.xml bildirim dosyası
Temanın bildirim dosyası, temanız hakkındaki temel bilgileri içerir. Bir tema kurduğunuzda, bildirim dosyasının içeriği veritabanında template ve template_configuration adlı iki farklı tabloya yüklenir. Bu nedenle bir temanın bildirim dosyasını her değiştirdiğinizde temayı kaldırıp yeniden kurmanız (veya yalnızca sıfırlamanız) gerekir. Tema geliştirirken bu işlem can sıkıcı olduğundan, veritabanı kayıtları yerine doğrudan XML dosyasının kullanılmasını zorlayabilirsiniz. Bunun için config.php dosyasında hata ayıklama kipini açın ve 'force_xmlsettings_for_survey_rendering' değerini true yapın.
Metadata bölümü
Karmaşık bir şey yok: yalnızca temanızla ilgili temel bilgiler. Bu bilgiler templates_configuration tablosuna aktarılır.
<metadata>
<name>the_name_of_your_theme</name>
<title>The Title of your theme</title>
<creationDate>16/10/2017</creationDate>
<author>Your Name</author>
<authorEmail>your@email.org</authorEmail>
<authorUrl>http://www.yourwebsite.org</authorUrl>
<copyright>Your Copyright </copyright>
<license>Licence of your theme</license>
<version>version of your theme</version>
<apiVersion>3</apiVersion>
<description>Description of your theme</description>
<extends>parent_theme</extends>
</metadata>
Birkaç not:
- name: veritabanında anahtar olarak kullanılır. Bu nedenle benzersiz olmalı ve özel karakter içermemelidir (boşluk olmamalı). Büyük/küçük harf ayrımının dikkate alınmadığını unutmayın.
- Title: temanızın adını farklı listelerde göstermek için kullanılır. Özel karakterler içerebilir.
- description: anket temalarının ana listesinde kullanılır. Özel karakterler ve hatta HTML kodu içerebilir.
- extends: isteğe bağlıdır, üst temaları tanımlar. Bu temada herhangi bir dosya (twig/js/css/jpg vb.) yoksa, dosya üst temada aranır.
3 çekirdek temadan (Vanilla, Bootswatch, Fruity) birini genişlettiyseniz, "extends" değerini bir üst temadan diğerine değiştirebilirsiniz. Elbette temayı sıfırlamanız gerekecektir.
Dosyalar bölümü
Bu bölüm önemlidir. template_configuration tablosundaki files_css, files_js, files_print_css alanlarına JSON dizileri olarak aktarılır.
Örn: Material Premium temasının dosyalar bölümü:
<files>
<css>
<add>css/bootstrap-material-design.css</add>
<add>css/ripples.min.css</add>
<replace>css/ajaxify.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
</css>
<js>
<replace>scripts/theme.js</replace>
<replace>scripts/ajaxify.js</replace>
<add>scripts/material.js</add>
<add>scripts/ripples.min.js</add>
<replace>scripts/custom.js</replace>
</js>
<print_css>
<add>css/print_theme.css</add>
</print_css>
</files>
Bu bölümdeki tüm CSS/JS dosyaları anket başlatıldığında yüklenir (ajax kipinde. Ajax kipi kapalıysa, elbette tüm dosyalar her sayfada yeniden yüklenir).
Bu dosyalar, temanın adına göre oluşturulan bir Yii varlık paketine eklenir. Bu nedenle Varlık Yöneticisi açıkken (hata ayıklama kipi kapalıyken) bu dosyalar temanın geri kalanıyla birlikte tmp dizinine kopyalanır (böylece CSS ve JS içinde görsel dosyalara ulaşmak için göreli yol kullanabilirsiniz).
Yii'deki Varlık Yöneticisi hakkında: https://www.yiiframework.com/wiki/148/understanding-assets
Yii'deki paketler hakkında: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Bu dosyalar devralma sistemini kullanır. Yani bir temaya CSS/JS dosyası eklerseniz ancak dosya temada yoksa, motor bu temanın tüm üst temalarına bakar ve bulduğu ilk dosyayı kullanır. Bu nedenle bir kullanıcı temanızı tema düzenleyici aracılığıyla genişletirse, bu dosyaların tümü onun temasına devralınır. Anahtar sözcükler bu devralma sistemine atıfta bulunur.
- add : dosyayı temaya ve bu temadan türeyen tüm temalara ekler
- replace: üst temadaki dosyanın yerine geçer
- remove: dosyayı çekirdek paket dahil herhangi bir paketten kaldırır (3.14 sürümünden itibaren)
config.php içinde 'force_xmlsettings_for_survey_rendering' ayarını yaparak yapılandırmanın veritabanı yerine XML'den okunmasını sağlayabileceğinizi unutmayın (sıfırlama gerekmez). Bu, XML dosyalarında yaptığınız değişiklikleri test etmeyi kolaylaştırır ve XML'de her değişiklik yaptığınızda temayı kaldırıp yeniden kurmanızı önler.
Bu anahtar sözcükler hakkında birkaç not:
Devralma ipuçları
Daha önce açıklandığı gibi, "add" anahtar sözcüğü üst temalardan birinde bulunan bir dosyaya başvurabilir. Yani bu bölüme bir dosya "ekleyebilir" ve bu dosyanın kendi temanızda değil, üst temalarınızdan birinde bulunmasını sağlayabilirsiniz. Motor tüm üst temalara bakar ve bulduğu ilk dosyayı kullanır. Dosyayı bulamazsa, yapılandırmada hata ayıklama kipi açıksa ve genel ayarlarda ön yüz JS hata ayıklama kipi açıksa, konsolda bir ileti sizi uyarır. Örneğin my_theme içine <add>css/unexisting.css</add> eklersek konsolda şunu görürüz:
(¯`·._.·(¯`·._.· Theme Configuration Error ·._.·´¯)·._.·´¯)
Can't find file 'css/unexisting.css' defined in theme 'my_theme'Hata ayıklama kipi kapalıysa hiçbir hata görünmez. Motor hatalı add ifadelerini yalnızca yok sayar.
Ne zaman add, ne zaman replace kullanmalıyım, ne zaman üst temaya bırakabilirim?
Önce şunu belirtelim: add ve replace aslında aynı anahtar sözcüktür. Birini ya da diğerini kullanabilirsiniz, motor aynı işlemi yapar. Bunlar, amacınızın ne olduğunu anlasınlar diye okuyucular için ayrı tutulmuştur.
Üst temayla aynı adlı bir dosyayı "ekleyemezsiniz": bu dosya her zaman üst temadakinin yerine geçer. Örneğin "my_mother_theme/foo.css" adlı bir dosyanız varsa ve alt temaya "foo.css" adlı bir dosya eklerseniz, temaya yalnızca "daughter_theme/foo.css" eklenir. "my_mother_theme/foo.css" dosyasını korumak istiyorsanız "daughter_theme/foo.css" için "daughter_theme/bar.css" gibi başka bir ad seçin. Yani "add" anahtar sözcüğü bir "replace" anahtar sözcüğü gibi kullanılabilir.
Nedenini merak ediyorsanız: bu, devralınan temaların otomatik olarak oluşturulmasını çok kolaylaştırır; dosya bölümünü kopyalamak sorunsuz çalışır (bir dosyayı kullanıma alırken "add" ifadesini "replace" olarak değiştirmeniz gerekmez).
Daha açık olması için Fruity örneğini ele alalım. İşte onun CSS dosya bölümü:
<css>
<add>css/variations/sea_green.css</add>
<replace>css/animate.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
</css>
Fruity içindeki custom.css dosyasına bakarsanız, vanilla'dakiyle tamamen aynıdır. Fruity içindeki custom.css dosyasını silebilirdik; bu durumda vanilla'nın dosyası yüklenirdi. Ayrıca <replace>custom.css</replace> ifadesini Fruity bildiriminden kaldırabilirdik; bu durumda vanilla'daki ifade kullanılır ve vanilla'nın custom.css dosyası yüklenirdi.
Peki Fruity bildiriminde neden <replace>custom.css</replace> ifadesini kullanıyoruz? Yanıt basit: son kullanıcının Fruity temasını kullanıma alabilmesini, dosyayı kendi yerel temasında değiştirebilmesini ve değiştirilmiş bu dosyayı devralan temasından yükleyebilmesini istiyoruz. Anlamak için Fruity'yi kullanıma alın ve oluşan temaya bakın. Bu temada custom.css dosyası bile yoktur. Dolayısıyla Fruity'ninki kullanılır. Ancak kullanıcı bu dosyayı kullanıma alınan temada oluşturursa (tema düzenleyicide "Kullanıma al" düğmesine tıklayarak), bu dosya kendi temasından yüklenir.
Genel olarak:
Hiçbir temayı kullanıma almayan, sıfırdan bir tema oluşturuyorsanız CSS/JS dosyalarınızı eklemek için yalnızca add ifadesini kullanın. Çok kolay.
Başka bir temayı kullanıma alan bir tema oluşturuyorsanız ve kullanıcıların üst temadaki CSS/JS dosyasını kullanıma alabilmesini istemiyorsanız: bildiriminizde add ifadesini kullanmayın. Dosyalar yine de üst temanın yapılandırmasından yüklenir.
Başka bir temayı kullanıma alan bir tema oluşturuyorsanız ve üst temadaki bir dosyanın yerine geçmek istiyorsanız: replace anahtar sözcüğünü kullanın (add anahtar sözcüğü aynı sonucu verir).
Başka bir temayı kullanıma alan bir tema oluşturuyorsanız, belirli bir CSS/JS dosyasının yerine geçmiyor ama kullanıcıların bu dosyayı kullanıma alabilmesini istiyorsanız: bildiriminizde bu dosya için "replace" ifadesini kullanın. Dosyanın yerine geçmeseniz bile bildirimde replace anahtar sözcüğünü kullanarak kullanıcının isterse bunu yapmasına izin vermiş olursunuz.
Yalnızca bu son durumu anlamak biraz zihin jimnastiği gerektirir; diğer tüm durumlar basittir.
CSS ve JS dosyalarını doğrudan twig kodundan da kaydedebilirsiniz. Bu dosyalar yalnızca twig dosyası istendiğinde yüklenir. Kullanıcıların bu JS/CSS dosyalarını tema düzenleyiciden devralabilmesini istiyorsanız Template:RegisterTemplateCssFile('my style.css') ve Template:RegisterTemplateScript('my script.js') işlevlerini kullanmayı unutmayın. Bu işlevleri kullanmazsanız temanız çalışabilir, ancak devralma bozulur. Bu, Template:Image('my picture.jpg') işlevindeki mantıkla aynıdır.
&action=edit&redlink=1){kind=link}
remove anahtar sözcüğü
remove anahtar sözcüğü yalnızca 3.14 sürümünden itibaren kullanılabilir. Bununla, çekirdek paketler dahil herhangi bir paketten herhangi bir CSS dosyasını kaldırabilirsiniz. Material Premium Theme'de Awesome Bootstrap Checkbox dosyalarını kaldırmak için kullanılır:
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
Bu nedenle paketteki dosyayla tamamen aynı sözdizimini kullanmalısınız (örneğin klasör yolu olmadan yalnızca "awesome-bootstrap-checkbox.css" çalışmaz). Çekirdek paketlerin ve dosyalarının tam listesini /application/config/packages.php ve config/third_party.php içinde bulabilirsiniz. Örneğin awesome-bootstrap-checkbox.css için: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56
'css'=> array(
'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
),
remove etiketinde kullanılacak tam adı bulmanın bir başka yolu da varlık yöneticisini açmaktır (hata ayıklama kipini kapatarak veya yapılandırmada 'use_asset_manager'=>true ayarlayarak). Bu durumda kullanılacak yol, tmp dizinindeki rastgele dizinin hemen ardından gelen yoldur. Örneğin awesome-bootstrap-checkbox.css için:
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
Kaldırmamanız gereken dosyalar:
jquery-3.1.1.min.js : gerekli
jquery-migrate-3.0.0.min.js : gerekli
survey.js : gerekli
moment-with-locales.min.js : tarih soru türü için gerekli (ve sanırım bazı diğerleri için de)
em_javascript.js : tüm ExpressionScript JavaScript kodları için gerekli
Seçenekler bölümü
Bu bölüm temanızın seçenekleriyle ilgilidir. template_configuration tablosundaki "options" alanını JSON dizisi olarak doldurmak için kullanılır.
Daha fazla bilgi
Bazı notlar
NOT: Bir temanın XML dosyasını düzenlerseniz, değişikliğin dikkate alınması için temayı kaldırıp yeniden yüklemeniz gerekir.
NOT: Bunu önlemek için veritabanı yerine XML dosyasının kullanılmasını zorlayabilirsiniz. config.php dosyasında hata ayıklama kipini açın ve şu satırın yorumunu kaldırın:
'force_xmlsettings_for_survey_rendering' => true, // Veritabanı yerine XML dosyasının kullanılmasını zorlamak istiyorsanız yorumu kaldırın (kolay tema geliştirme için)
Dikkat: her şey XML dosyasından yüklenecektir (seçenekler dahil).
NOT: CSS/JS dosyalarını Tema düzenleyici kullanmadan el ile düzenlerseniz ve hata ayıklama kipi kapalıysa, artık varlık önbelleğinin temizlenmesini zorlayabilirsiniz. "Genel ayarlar" içinde "Genel" sekmesindeki "Varlık önbelleğini temizle" düğmesine tıklayın.
NOT: Şu bölümü kaldırırsanız