Open edX’i Özelleştirmek – Bölüm II: Temalar

Artistanbul bünyesinde iş hayatıma başladığımda tanıştığım, tanıştığımdan beri uğraştığım, uğraştığımdan beri de sevdiğim bir “canavar” Open edX. Bu yazıda bir Open edX teması hazırlayacağız.

Serinin bir önceki yazısında Ege Güneş‘in bahsettiği gibi kurulumun ardından pek çok istek gelmeye başladı. Bu isteklerin bazıları da kurulumunu yaptığımız Open edX’in nasıl göründüğüyle alakalıydı. Bugün sizlere Open edX’i temalandırmaya başladığımda “şunları bilsem çok güzel olurdu” dediğim şeyleri anlatacağım.

 

Kapsamlı Temalandırma – Comprehensive Theming

Open edX’in kıyafetlerini değiştirirken aynı zamanda da yeni sürümlere geçişte sorun yaşamamak için hayatımıza “Comprehensive Theming” isimli bir kavram sokuyor.  Open edX’in temalandırma çatısı edX’in nasıl göründüğünü istediğiniz gibi değiştirmeye olanak sağlıyor. Üstelik bunu yaparken edX’in çekirdeğine dokunmanıza gerek kalmıyor. EdX’in bu yeteneğiyle birkaç kurala uyduktan sonra yapabileceklerinizin bir sınırı yok.

Bu temalandırma konsepti temelinde Open edX ilk kurulduğunda gelen temanın “ezilmesi” ile gerçekleştiriliyor. Comprehensive Theming aktif edildikten sonra Open edX arayüzü oluştururken ilk olarak tanımlanmış temaya bakıyor. Eğer aynı isimli dosya burada mevcutsa temanın dosyasını, değilse Open edX’in kendi dosyasını kullanıyor. Bu sayede örnek olarak sadece profil sayfasını temalandırıp hayatınıza devam edebiliyorsunuz.

 

Open edX’i temalandıralım

İlk olarak Comprehensive Theming’i aktifleştirmemiz gerekiyor:

• edX’in kurulu olduğu dizinde “edx-platform”un bir üstündeki dizinde bulunan “lms.env.json” dosyası içindeki aşağıdaki satırı bulup “true” olarak


ENABLE_COMPREHENSIVE_THEMING : true


• Yine aynı dosya içinde aşağıdaki satırı bulup temamızın olduğu klasörü gösteriyoruz.


COMPREHENSIVE_THEME_DIRS : [
"tema/dosyalarının/bulunduğu/yol"
],

• Bir sonraki adımda edX’in kullanacağı temayı belirtmemiz gerekiyor. “lms.env.json” dosyası içerisinde aşağıdaki satırı bulup temamızın ismiyle değiştiriyoruz.

   DEFAULT_SITE_THEME : "temanın-adı",

• Son olarak temamızın kullandığı bazı dosyaları derlenmesi, sıkıştırılması gibi işlemler için “paver” komutu çalıştırmamız gerekiyor. “edx-platform” klasörünün içinde aşağıdaki komutu çalıştırıyoruz.

paver update_assets
Artık temamız kullanıma hazır durumda. İşlemlerin etkili olabilmesi için LMS ve CMS’in yeniden başlatılması gerekiyor.

Ufak bir örnek yaparak yazıyı sonlandırmak istiyorum, logoyu değiştirelim ve footer’ın arkaplan rengini değiştirelim.

 

Open edX’in kendi temasında footer bu şekilde görünüyor. Bunu biraz değiştirip arkaplan rengini ve var olan logoyu değiştirelim. Bunun için öncelikle logomuzu gerekli yere koyalım. Tema klasörümüzün içinde “tema-adi/lms/static/images” klasörü içine adı “logo.png” olacak şekilde logomuzu yerleştirelim. edX bu dosyayı gördüğü anda artık varsayılan logo dosyası yerine bizim koyduğumuz logo dosyasını kullanmaya başlayacak.

Biraz da CSS ile oynamak için öncelikle kendi kurallarımızı yazacağımız bir _custom.scss dosyası oluşturalım “tema-adi/lms/static/sass” klasörü içinde. Footer’ın arkaplan rengini değiştirmek için örnek olarak hazırladığım _custom.scss;

.wrapper-footer {
background: #212121;
}


Oluşturduğumuz bu yeni dosya ile var olan edX kurallarını genişletmek için `lms-main-v1.scss` dosyasını ezmemiz gerekiyor. Sass klasörü içinde “lms-main-v1.scss” adında bir dosya oluşturuyoruz. Önce edX’in kendi dosyasını dahil edip, üstüne kendi kurallarımızı tanımladığımız `custom.scss` dosyasını ekliyoruz.

// Import the core Sass file Open edX
@import 'lms/static/sass/lms-main-v1';
// Import our custom overrides
@import 'custom';

Paver komutunu tekrar çalıştırıp derledikten ve Open edX’i yeniden başlattıktan sonra yaptığımız değişiklikleri göreceğiz.

 

Gördüğünüz gibi çekirdek kodlara dokunmadan sadece istediğimiz yeri temalandırabildik. Open edX’in bu yeteneği sayesinde her türlü arayüz giydirilebilir hale geliyor.

Serinin bir sonraki yazısında Open edX XBlock’larının nasıl kullanıldığından bahsedeceğiz.