Menü

Anasayfa Haberler Forum Dosyalar Linkler Yazılar Site Haritası Bize Yazın

İçerik

Arama

Son üyeler

daPhNe	2010/9/6
epolattuna	2010/9/4
Carlo4566	2010/9/2
hillthomps	2010/9/2
waltermu	2010/8/29

Temalar

Kimler sitede

8 kişi online (4 üye Yazılar bölümünde geziyor)

Üye: 0
Ziyaretçi: 8

devamı...

Ziyaretçi Sayısı

Bugün :
Dün :
Toplam :

Alexa

Ana sayfa / xoopshocasi.com / Tema Dersleri / Sıfırdan Tema Yapımı - 1

Sıfırdan Tema Yapımı - 1

Herhalde XOOPS kullananların en merak ettikleri konuların başında kendi temalarını nasıl yapacakları geliyordur. Ben de artık bu konuya hiç değilse bir giriş yapabilmek amacıyla bu dökümanı hazırladım. Öncelikle şunu söylemeliyim ki ben bu dökümanın hazırlanmasında her ne kadar en ince ayrıntıyı bile anlatmaya çalışsam da yine de belli bir html bilgisi olan arkadaşlarımız ancak kendi temalarını yapabileceklerdir.

Başlıyoruz...

Bu dersi okuyarak yaratacağınız temanın basitçe 3 adet dosyası olacak bunlar theme.html, style.css ve logo.gif..bunlardan logo.gif dosyasını dilediğiniz özelleştireceksiniz..bu üç dosya aynı klasörde bulunacak ben bu klasörü vereceğim örneklerde themes/turkxoops/ olarak kabul edeceğim..farklı bir ayarlama yapabilmek için gerekli yerleri özelleştirmelisiniz..şimdi bir metin editörü açarak işe başlayalım..dilerseniz Windows'un Not Defteri'ni veya daha profesyonel bir metin editörünü kullanabilirsiniz

theme.html'yi oluşturuyoruz

temamızın temelini bu dosya oluşturacak ama aslında görsel olarak pek bir etkisi olmayacak..sitemizin görünüm ayarları için sadece bir klavuz olacak diyebiliriz..şimdi aşağıdaki kodları yazarak işe başlayalım

Başlıyoruz..bu satır ile kullandığımız html standartını belirtiyoruz

 
 xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">

head kısmında ön tanımlamaları yapacağız..eğer bilginiz yoksa bu kısımı değiştirmemenizi tavsiye ederim

alttaki satır sitemizin dil kodlamasını belirtiyor..eğer Türkçe karakteler konusunda sorun yaşıyorsanız ilk olarak buraya bakmanızı öneriyorum :) şu anda admin panelden yaptığımız ayarları alacak şekilde isterseniz direk olarak Türkçe için win-1254 kullanabilirsiniz

 
 http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />

bu satır da içeriğin dilini belirtiyor Türkçe için content="tr" olmalı

 
 http-equiv="content-language" content="<{$xoops_langcode}>" />

bu satır arama motorlarının sayfanızı nasıl taraması gerektiğini ayarlar

 
 name="robots" content="<{$xoops_meta_robots}>" />

sitenizin arama motorlarında kullanılacak anahtar kelimeleri

 
 name="keywords" content="<{$xoops_meta_keywords}>" />

sitenizin arama motorlarında kullanılacak tanımlaması

 
 name="description" content="<{$xoops_meta_description}>" />
" content="<{$xoops_meta_rating}>" />

sitenizin yapımcısının adı..yani adınız

 
 name="author" content="<{$xoops_meta_author}>" />

sitenizin telif haklarını belirten açıklamalar

 
 name="copyright" content="<{$xoops_meta_copyright}>" />

sitenizi hazırlamak için kullandığınız editörün adı

 
 name="generator" content="XOOPS" />

sitenizin başlığı

 
</span></a></span><span class="sc2"><span class="kw2"><</span><span class="br0">{</span>$xoops_sitename<span class="br0">}</span><span class="kw2">></span></span> - <span class="sc2"><span class="kw2"><</span><span class="br0">{</span>$xoops_pagetitle<span class="br0">}</span><span class="kw2">></span></span><span class="sc2"><span class="kw2">

biri sitenizi sık kullanılanlara eklediğinde kullanılacak simge..şu anda anadizininizdeki favicon.ico dosyası kullanılıyor..yolu veya dosyayı değiştirebilirsiniz

 
 href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />

xoops'un kendi css dosyasını sayfalarımıza ekliyoruz

 
 rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />

temamızın css dosyasını sayfalarımıza ekliyoruz

 
 rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />

bu satırı her düzenlediğiniz temaya mutlaka eklemelisiniz..buna xoops'un sistem dosyası da denebilir

 
<{$xoops_module_header}>

bu kısım da bütün temalarda olacak..xoops'un javascript fonksiyonları için gerekli

 

 type="text/javascript">

evet head bölümünü tüm ayrıntılarıyla işledik..zaten bu bölümü çoğu zaman tüm temalarınızda değiştirmeden kullanırsınız..herhangi bir sorun çıkması haricinde değiştirmeye pek gerek yok..şimdi işin esas can alıcı kısmı olan body bölümüne geçelim

ben bu örnekte sayfalarımızı ortalanmış ve genişliği önceden belirlenmiş bir tabloda barındırıcam onun için kendisinden sonra gelen her şeyi merkezleyen center tagi ile işe başlıyorum..taglerin içinde göreceğiniz id, class gibi bazı parametreleri önemsemeyin çünkü bunlara style.css dosyasını hazırlarken değineceğiz

 




class="anatablo">


	evet başlangıcı yaptık..şimdi hemen, en üstte görünmesini istediğim site logomu ekliyorum..burada tr satır td ise sütun açıyor


		 
	
	
	



		bu
		kodun normal html ile arasında biraz fark var o da xoops'un öntanımlı
		değişkenleri..bu örnekte $xoops_url değişkenini kullanarak kullanıcıyı
		sitesinin tam yolunu yazma zahmetinden kurtarıyoruz..şimdi sitemizi
		ziyaret edenlerin işine yarayacak bir hızlı erişim menüsü
		oluşturalım..bunu tablomuzun ikinci satırında yapabiliriz..bu arada
		modül yollarını değiştirmeniz gerekebilir


				 
		
		
		



		burada
		html'in çok kullanışlı bir nimetinden yararlandık..kodları içiçe
		kullandık..burada bir tablonun herhangi bir sütununda başka bir tablo
		yaratılabileceğini de görmüş oldunuz..belki de web tasarımın kırılma
		noktası olarak burayı gösterebiliriz..tabi sizde benim gibi
		tasarımınızı tümüyle tablolar üzerine oturtuyorsanız..şimdi sayfamızın
		kullanıcılara gösterilecek içeriğine geçebiliriz


				 
		
		
		

	 
	
	
	
	
	
		
			
			 style="text-align:center">
			 align="center" src="<{$xoops_url}>/themes/turkxoops/logo.jpg" border="0" alt="Site Logosu" />
			
			
		
		
		
		
		
		
			
			
			
			width="100%"style="border:2px dotted #ee9933">id="ust_menu">
				  
				
				
					
						 
						
						 style="text-align:center">
						 href="<{$xoops_url}>/">ANASAYFA
						
						
						align:center">
						<{$xoops_url}>/modules/news/">HABERLER
						
						
						 style="text-align:center">
						 href="<{$xoops_url}>/modules/mydownloads/">DOSYALAR
						
						
						align:center">
						<{$xoops_url}>/modules/newbb/">FORUM
						
						
						 style="text-align:center">
						 href="<{$xoops_url}>/modules/debaser/">ANIMASYONLAR
						
						
					
					
				
			
			
			
			
			

			
		
		
		
		
		
		
			
			
			
			class="sayfa_icerigi">


						burada
						kesiyorum çünkü burdan sonrası biraz daha detaylı ve şimdiye kadar
						üzerinde durduklarımızdan daha işlevsel olacak..şimdi sayfalarımızda
						gözüken sol blokun kodlarını sayfamıza ekliyoruz..lütfen buradan
						sonraki bölümleri çok daha dikkatli inceleyin


												 
						
						
						


						

						evet
						bu kod sol blokları sayfamızda gösterecek..bizim için can alıcı olan
						nokta..benim örnek olarak verdiğim sol_blok, baslik ve icerik
						kelimeleri..bu html elemanlarını bu şekilde isimlendiriyoruz ki daha
						sonra toplu şekilde bir css dosyası içinden düzenleyebilelim..sol blok
						gördüğünüz gibi çok kolay oldu..ama orta blok biraz karışık..devam
						ediyoruz..

						

						
												
						 
						
						
						



						şimdi sizin de tahmin ettiğiniz gibi sıra sağ bloklara geldi..sol bloğun hemen hemen aynısı işte eklemeniz gereken kodlar


												 
						<{if $xoops_showrblock == 1}>
						
						
						
<{/if}>

						

						içerik kısmımız bitti..öyleyse şimdi tüm bu sütunları içinde barındıran satırımızı ve tablomuzu da kapatabiliriz

						

						
												 
						
						
						
						
				 
				
				
					
						
						
						
						
						 id="sol_blok" rowspan="100">
						<{foreach item=block from=$xoops_lblocks}>
						
						
						 class="baslik"><{$block.title}>
						
						
						
						
						 class="icerik"><{$block.content}>
						
						
						<{/foreach}>
						
						
						
						 id="orta_blok">
						

						

						aşağıdaki
						kod sayfalarımızda en üstte çıkan orta blok üçlüsünü çağıracak..dikkat
						edin önce böyle bir bloğun olup olmadığına bakıyor..bu kontrolün
						yapılmadığı tek yer sol blok

						

						
												 

						<{if $xoops_showcblock == 1}>

						
						cellspacing="0">
							 
							
							
								
									
									 id="orta_orta_blok" colspan="2">
									<{foreach item=block from=$xoops_ccblocks}>
									
									
									 class="baslik"><{$block.title}>
									
									
									
									
									 class="icerik"><{$block.content}>
									
									
									<{/foreach}>
									
									
								
								
								
									
									 id="orta_sol_blok">		
									<{foreach item=block from=$xoops_clblocks}>
									
									
									 class="baslik"><{$block.title}>
									
									
									
									
									 class="icerik"><{$block.content}>
									
									
									<{/foreach}>
									
									
									 id="orta_sag_blok">		
									<{foreach item=block from=$xoops_crblocks}>
									
									
									 class="baslik"><{$block.title}>
									
									
									
									
									 class="icerik"><{$block.content}>
									
									
									<{/foreach}>
									
									
								
								
							
						
						

						<{/if}>

						
						
						

						

						

						bu
						yazıyı buraya kadar sıkılmadan okuyan biri tahminen çalışma mantığını
						zaten kavramıştır..başlıca iki adet php dili operatörü kullanılıyor..if
						ve foreach..ingilizce bilen biri için bunları anlamak kolay..if
						operatörü yanında verilen koşul doğruysa sonrasında gelenleri yapıyor
						yanlışsa orası atlanıyor..foreach ise sonrasında gelen ifadelerin her
						sonuç için tekrarlanmasını sağlıyor..bu da aynı konumdaki birden çok
						bloğu arka arkaya sıralanmasını sağlıyor..üst orta blokları
						tamamladığımıza göre şimdiden seçilen modülün içeriğinin sayfada
						gösterilmesini sağlayan kodları yerleştirelim, bu iş modüllerin aksine
						gayet kolay olacak..

						

						
						
												 
						
						
						 id="modul_icerigi">
						<{$xoops_contents}>
						
						
						
						
						
						
						

						

						eğer
						benim verdiğim id değerlerini değiştiriyorsanız..bunları aklınızda
						tutmanızda yarar var..çünkü temayı tema yapan bu değerlere göre
						oluşturulan css dosyasıdır..artık orta bölümde gözükecek içeriğimiz
						sonlandığına göre yukarıda orta_blok id'si ile açtığımız tablo sütununu
						da kapatalım

						

						
						
												 
						
						
						
						
						
						
						
						
						 id="sag_blok" rowspan="100">
						<{foreach item=block from=$xoops_rblocks}>
						
						
						 class="baslik"><{$block.title}>
						
						
						
						
						 class="icerik"><{$block.content}>
						
						
						<{/foreach}>
						
						
						
					
					
				
			
			
			

			

			bu aşamada footer dediğimiz alt bilgileri taşıyan bir tablo oluşturabilirsiniz..benim hazırladığım örnek şöyle

			

			
			
						 

			
			cellspacing="0"id="alt_bilgi"width="100%">
				   
				
				
					
						
						 style="text-align: center">
						
						
						 width="85%" color="#cccccc" size="2">
						
						
					
					
					
						
						 style="text-align: center"> 
						 href="mailto:boracanbula@gmail.com">Bora Canbula -  href="http://www.modernfizik.co.nr" target="_blank">ModernFizik

						
						 href="http://www.xoops.org/" target="_blank">XOOPS -  href="http://www.turkxoops.com" target="_blank">TurkXOOPS
						
						
					
					
				
			
			

			
			
			
			

			

			

			burdan sonra en başta açtıklarımızı sırasıyla kapatıyoruz

bu dökümanın ikinci parçasını oluşturan style.css dosyasını da sitemizdeki dersler bölümünden okuyabilirsiniz

Bora Canbula ------------- xoopshocasi@xoopshocasi.com

Ayrıca bakınız

Bu sayfayı bir arkadaşınıza tavsiye edin!