| Joomla! 1.5 Temel Tema Yapımı |
|
|
| Makaleler - Joomla! |
| Engin tarafından yazıldı. |
| Cumartesi, 22 Ağustos 2009 08:03 |
|
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 |


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.