Joomla! 1.5 Temel Tema Yapımı - Open Info - TR // Açık Kaynak Danışmanınız
Joomla! 1.5 Temel Tema Yapımı Yazdır e-Posta
( 6 - Kullanıcı Oyu )
Makaleler - Joomla!
Engin tarafından yazıldı.   
Cumartesi, 22 Ağustos 2009 08:03
Öncelikle kurulu Joomla! siten içindeki "templates" klasörünü aç ve için "tutorial_template" adında bir klasör oluştur. Şablonumuzun tüm dosyaları bu klasörde olacak.

Yeni dizin içinde, "index.php" adında bir dosya  ve herhangi bir isimle "templateDetails.xml" oluştur. Daha sonra "css" klasörü  ve ardından içine template.css dosyası oluştur. Bu dosyaları oluşturmak için basit bir NotePad kullanın ve bilgisayarınızda saklayın ve  daha sonra FTP , File Manager ya da cPanel le dosyalarınızı sunucunuza gönderin.

Bu temel dosyalar her Joomla! Temasının düzgün çalışabilmesi için vardır.

index.php>> Mevcut modül pozisyonları ve Stil dosyasının yolunu belirtir. Bu şablon ana "bölümünde" olduğunu;

templateDetails.xml>>Bu Joomla uygulamaya şablonunuzu hakkında bilgi veren bir sistem dosyasıdır;

css/template.css>>Şablonunuzun stil dosyasıdır. Bu dosya web sitenizin her tarayıcıda düzgün çalışması için gereklidir;
"index.php" ile işe başlayalım:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>


Bu satır web sitenizin HTML çıkışını başında belirtir. Bu PHP kodu >> <jdoc:include type="head" /> << sayfanızda Joomla başlık içeriğinde yer alacak(sayfa başlığı , meta bilgisi , anahtar kelime vs.) bu uygulamanın idari sonunda eklediğinizi içerir.

Şimdi "body" bölümünü sitemize ekliyoruz

<body>

<jdoc:include type="component" />

</body>
</html>


Bu <jdoc:include type="component" /> hattı herhangi bir sayfanın ana içeriğini görüntüler.

"index.php" dosyamızı kaydediyoruz ve sitemizin yönetim paneline girip "tutorial_template" imizi aktif ediyoruz. Karşımıza sadece yazılar çıkacaktır. Şimdi bazı modül pozisyonlarını ekliyeceğiz. "index.php" dosyamızı yine açıyoruz ve <body> ve </body> içine şunu ekliyoruz:

<div id="container">
<div id="header"> <jdoc:include type="modules" name="top" /> </div>   
<div id="sidebar_left"> <jdoc:include type="modules" name="left" /> </div>
<div id="content"> <jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div>  
<div id="footer"> <jdoc:include type="modules" name="footer" /> </div>
</div>


Bu <jdoc:include type="modules" name="left" /> hattı nerede Joomla uygulamasına modülün nerede yayınlanması gerektiğini söyler. Geriye sadece top, right ve footer konumlarını eklemek kaldı.

Bu farkedilen çevrilmiş <div> etiketleri ve dersleri ve hakkında bilgi eklendi numarasıdır.  Ayrıca, biz  <div> etiketi içinde herşeyi tamamladık kimlik ile "conteiner" bize sayfanızın temel boyutları belirlemenize olanak sağlar. Bu noktada, bununla birlikte, index.php şu şekilde olmalıdır:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" /> </div>   
<div id="sidebar_left"><jdoc:include type="modules" name="left" /></div>
<div id="content"><jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div>  
<div id="footer"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>

Şimdi templateDetails.xml dosyasını düzenlemek gerekir. Dosyamızın içine aşağıdaki kodu yapıştırı:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>tutorial_template</name>
<creationDate>02/2008</creationDate>
<author>SiteGround</author>
<authorEmail> Bu e-Posta adresi istek dışı postalardan korunmaktadır, görüntülüyebilmek için JavaScript etkinleştirilmelidir </authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>SiteGround</copyright>
<license>SG TOS</license>
<version>1.0.0</version>
<description>Basic Joomla Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>

The templateDetails.xml dosyasının satırları üzerinde daha ayrıntılı bir göz atalım:

<install version="1.5" type="template"> Temanızın Joomla! versiyonu.
<name>tutorial_template</name> Bu satır şablonunuzu adını tanımlar. Bu yazının amacı için, "tutorial_template" kullanıyoruz;
<creationDate>02/2008</creationDate> Bu satır şablonun oluşturulması tarihi görüntüler;
<author>SiteGround</author> Bu satır tema yazarının adını belirtir;
<authorEmail> Bu e-Posta adresi istek dışı postalardan korunmaktadır, görüntülüyebilmek için JavaScript etkinleştirilmelidir </authorEmail> Yazarın e-mail adresi;
<authorUrl>http://www.siteground.com</authorUrl> Bu satır yazarın web sitesini belirtir;
<copyright>SiteGround</copyright> Bu satır temanızın Copyright bilgilerini içerir;
<license>SG TOS</license> Bu satır temanızın hangi lisans altında çalıştığını belirtir;
<version>1.0.0</version> Bu satır temanızın versiyon bilgisini belirtir;
<description>Basic Joomla Template</description> Bu satır tema açıklamasını içerir;

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files> Bu satırlarda kullandığınız şablonunuzun tüm dosyalarını belirtin.

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions> Bu satırları şablonunuza etkin olan konumları(modül pozisyonlarını) tanımlar.

Şimdi şablonumuz için stil dosyası oluşturalım. "index.php" dosyasını açarak </head> tagından önce aşağıdaki komutu yazıyoruz.

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/tutorial_template/css/template.css" type="text/css" />

Bu satır sitenize stil dosyasını yüklemesi için gerekli.

Son olarak "template.css" dosyasını düzenlemek kaldı. Bu dosyanın içine aşağıdaki kodları girin:

* {
padding: 0;
margin: 0;
}
img {
border: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float { 
float: left; 

.clear { 
clear: both; 

.overall {
background-color: #fff;   
}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
background: #FFFFFF;
}
#container {
width:960px;
margin: auto;
background-color: #f4f9fc;
border: 1px solid #e2e2e2;
text-align: left;
}
#header {
text-align: center;
background-color:#f4f9fc;
height: 80px;
}
#content {
width: 598px;
text-align: left;
background-color:#f4f9fc;
padding: 5px;
}
#sidebar_left {
text-align: center;
background-color:#f4f9fc;
width: 165px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#sidebar_right { 
background-color:#f4f9fc;
text-align: center;
width: 165px; 
border-left: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#footer { 
background-color:#f4f9fc;
text-align:center;
border-top: 1px solid #e2e2e2;
border-botom: 1px solid #e2e2e2;
padding: 5px;
}

Dosyayı kaydedin ve temanız kullanıma hazırdır.

Kaynak: http://www.siteground.com/tutorials/joomla15/joomla_create_template.htm

NOT: Bu çeviride hiçbir koda dokunulmamıştır.

Son Güncelleme: Cumartesi, 22 Ağustos 2009 08:35
 

Yorum ekle

Yorumların hepsi kontrol edildikten sonra yayınlanacaklardır. Güvenlik için bazı bilgileriniz kayıt altına alınmaktadır. Lütfen yorumlarınızı makaleyi zenginleştirmek için kullanınız.


Güvenlik kodu
Yenile

En Çok Tıklananlar

  • 0
  • 1
  • 2
  • 3
  • 4
prev
next

Firefox 3.5 için 10 tane uyumlu temalar

Silvermeel

Mozilla Firefox | Emre | Salı, 7 Temmuz 2009 | Hits: 2433

Devamı

Güncellenen 5 Ubuntu Temaları ve Sürpriz

Ubuntu için her zaman hazır olan bazı tema paketlerin güncelleştirilmiş paketlerini mutlaka indirin. Birbirinden güzel temalar için alternatifler fazla. 1. New WaveGTK tema, New Wave ile beraber:- GUI New Wave Configurator,- Emerald themes,- Compiz-...

Ubuntu Linux | Emre | Pazar, 2 Ağustos 2009 | Hits: 1652

Devamı

70+ Harika ve Güzel Firefox Masaüstü Ark

Dünyanın en fazla indirilen ve çok tutulan web tarayıcısı Firefox için arkaplan resimlerini masanızda süslemeye ne dersiniz? Bu yazımızda araştırdığımız 70+ Mükemmel Firefox Masaüstü Resimlerini sizler için paylaşıyoruz.  

Mozilla Firefox | Engin | Pazar, 2 Ağustos 2009 | Hits: 774

Devamı

Ubuntu'da OpenDNS ayarlamak

OpenDNS Nedir?OpenDNS, DNS veri tabanının bir bölümüne ilişkin bilgileri saklayan ve DNS sorgularına yanıt verip, bunları çözümleyen bir hizmettir.OpenDNS, Ubuntu Linux Sisteminde Nasıl Kullanabilirim?Bu birkaç basit işlemden ibaret. Öncelikle Networ...

Web Dünyası | Engin | Salı, 18 Ağustos 2009 | Hits: 502

Devamı

Joomla! 1.5.12 (Wojmamni Ama Woi)

Joomla takımı, Joomla 1.5.12 (Wojmamni Ama Woi) sürümünü duyurmuş bulunmaktadır. Bu sürümle beraber bir kaç bug çözülmüş ve 3 adet orta derecede güvenlik açığı kapatılmıştır. Güvenlik:- Orta derece Çekirdek Önyüz XSS- Orta derece Çekirdek JEXEC kontr...

Haberler | Engin | Çarşamba, 1 Temmuz 2009 | Hits: 446

Devamı

Ubuntu Reklam

Ubuntu: For Desktops, Servers, Netbooks and in the cloud


Creative Commons License
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License çatısı altında çalışmaktadır.


Bu site en iyi Mozilla Firefox 3 te görüntülenmektedir.
*Bu site Internet Explorer 8 de UYUMLULUK GÖRÜNÜMÜNDE düzgün olarak görüntülenmektedir.