Tema yapımına geçmeden önce kısaca CSS ve Joomla!

Bu yazıyı okuduğunuza göre muhtemelen sizde benim gibi Joomla! ile ilgileniyorsunuz. Hatta bu başlık dikkatinizi çekip tıkladıysanız joomla ile tema yapımı konusunda kaynak arayışı içerisindesiniz demektir. Geçen gün yazdığım bir yazımda joomla teması yapımını anlatacağımdan bahsettim ve nasıl bir tema yapmamız gerektiği konusunda joomla kullananlara danıştım. Farklı şekillerde istek gelmesi güzel. Yalnız joomla kullanıcıları henüz tam olarak ne yapmamız gerektiğine karar vermediler. Bu yüzden isterseniz öncelikle o konuyu okuyarak, sizde öneride bulunun.

Bu yazımda Joomla ile CSS arasındaki ilişkiden bahsetmeye çalışacağım. Tema yapımının en zor tarafı CSS ile uğraşmaktır. Bu yüzden CSS konusunda az da olsa bilginizin olmasının, tema yapımında sizi çok rahatlatacağına eminim.

CSS Nedir?

Fatih Hayrioğlu sitesinde CSS'yi "Cascading Style Sheets (CSS) HTML ‘deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır" şeklinde tanımlamış. CSS 1996′da W3C tarafından duyuruldu ve o gündür bugündür geliştirilmeye devam etmektedir.

CSS bize her bakımdan avantaj sağlamaktadır. Avantaj sağlaması ve HTML'ye eklenmesiyle bütün webmasterların gözde dili haline gelmiştir. CSS, sayfa dizaynında bize esneklik sağlaması için üretilmiş bir dildir. Ayrıca CSS'yi, CSS bağlantılarını kullanarak istediğimiz sayfalara etki ettirebiliyoruz. Bu özellik bize sitemizin görünümünde ufak bir değişiklik yapmak istediğimizde yüzlerce sayfanın kodunu değiştirmek yerine sadece css dosyasında değişiklik yaparak işlerimizin oldukça kolaylaşmasını sağlıyor. Konumuz Joomla ile CSS hakkında kısaca bilgi vermek olduğu için CSS ile ilgili daha detaylı bilgiyi bu adresi takip ederek öğrenebilirsiniz.

Niye CSS kullanıyoruz?

Joomla temalarını hazırlarken CSS'ten faydalanmaktayız. Böylelikle işlerimiz oldukça kolay hale gelmekte. CSS teknolojisinin olmadığını ve sitemizi sadece tablo ve HTML kullanarak hazırladığımızı düşünelim. Sitemizin yüzlerce sayfası var. Siteyi ilk hazırlarken içerik başlıklarının renklerini kırmızı ve büyüklüklerini 20px olarak ayarladık. Sitemizi yayına verdiğimiz gün bir arkadaşınız başlıkları bu şekilde bir kırmızı yerine keşke biraz daha koyu bir renk yapsaydın ve boyutunu büyültseydin deseydi ne yapardınız? Yüzlerce sayfayı tek tek açarak bu değişikliği uygulamanız gerekirdi.

İşte bu tür bir olayda, bu kadar eziyet yaşamamak için sitelerimizde CSS kullanıyoruz. Tek bir dosya üzerine tüm biçimlendirmelerimizi kaydediyoruz ve yüzlerce sayfalık sitemiz bu tek dosyayı kullanıyor. Böylelikle ufak bir renk değişimi için yüzlerce sayfada değişiklik yapmak yerine, bir dosyada bir satırlık bir değişiklik yapıyoruz.

Bir CSS dosyasının görünümü şu şekildedir. Tabi ki resimdeki 11 satır sadece çok kısa bir bölümünü gösteriyor.

Joomla Temalarında CSS

Joomla da her güncel içerik yönetim sisteminde kullanıldığı gibi temalarında CSS teknolojisini kullanıyor. Joomla temanızın içerisindeki css dosya yada dosyaları genel olarak templates/temanizinadi/css/ klasörü içerisinde yer alıyor. Bazı temalarda bir tek CSS dosyası bulunmasına rağmen bazı temalarda 3,4,5 tane CSS dosyası bulunuyor olabilir. Böyle yapılmasındaki amaç, kodların daha derli toplu ve ayrı bölümler için ayrı dosyalarda çalışma isteğidir. Fakat en iyi sayfa performans için en az sayıda CSS dosyası kullanmalıyız. Böylelikle bir sayfayı göstermek için sunucuya daha az istek gönderilir, ne kadar az istek gönderirsek o kadar hızlı yanıt alır ve sunucuyu yormamış oluruz.

Bu ekran görüntüsünde Joomla 1.7'de standart olarak gelen atomic temasının CSS klasörü içerisinde yer alan dosyalarını görüyorsunuz.

Blueprint klasörü, css'i biraz daha gelişmiş kullanabilmek için ayrı bir framework yapısını inceliyor. Biz ilk aşamada framework kullanmayacağız.

index.html dizine dışarıdan erişimi kapatmak için kullanılmış bir dosya.

template_ie.css dosyası İnternet Explorer tarayıcılarını kullanarak sitemize girenlerin site görünümünde tarayıcı farklılığı yaşamaması için IE için ayrıca kod yazılması gerektiği durumlarda kullandığımız css dosyası.

template_rtl.css dosyası sitemizin yazılarının soldan sağa doğru değilde, sağdan sola yazdırmak istediğimiz durumlarda bunu otomatik olarak yapılmasına yardımcı olan css kodlarının yer aldığı dosya.

template.css dosyası ise bizi asıl ilgilendiren dosya. Kodlamamızı bu dosya içerisine yapacağız.

CSS üzerinde denemeler yapmak istiyorsanız, örnek bir joomla sitesi kurarak, kullandığınız temanın CSS dosyasını açabilirsiniz. Buradaki CSS dosyasında yazıların büyüklüklerini, renkleri ve diğer bazı özellikleri değiştirmeye çalışınız. Böylelikle ben diğer yazımı yayınlayana kadar CSS konusunda bazı basit detayları çözmüş olursunuz. 

Bu yazımda CSS ve Joomla Temalarında CSS konusuna değindim fakat CSS konusunda detaylı bilgi vermedim. CSS çok kapsamlı bir konu olduğu için internetteki farklı kaynaklardan araştırma yapmalısınız. Benim tavsiyem buradaki sayfada yer alan yazıları yukarıdaki ilk makaleden başlayarak aşağıya doğru okumanız. Böylelikle tema yapımına başladığınızda çok daha rahat edersiniz. Bu arada CSS kısaltmasının "si es es" şeklinde okunduğunu bilmekte yarar var. 

Takıldığınız yerleri twitter yada forum üzerinden çekinmeden sorabilirsiniz.