Drupal | Drupal Hakkında Bilgiler | The Cry | 2011 | Yeni

The Cry · 22 Ara 2010

Tema ile Standart Çıktıyı Değiştirmek

Drupal sitelerinizin sayfalarını oluşturan HTML kodu, birçok Drupal eklentisinin çıktılarından derlenmektedir. Eğer herhangi bir eklentinin sunduğu standart biçimlendirmeyi yeterli bulumuyorsanız, bu çıktıyı ihtiyacınıza göre değiştirerek sayfanın istediğiniz görünüme kavuşmasını sağlayabilirsiniz. Örneğin sitenizdeki arama kutusunu çok gösterişsiz buluyor ve buraya bir büyüteç ikonu ekleyip "Ara" kelimesini de "Müthiş gizemleri keşfet" şeklinde süslü bir ifadeyle değiştirmek istiyor olabilirsiniz. İşte böyle bir durumda, sistemin ürettiği standart çıktıyı kendi istediğiniz şekilde yani büyüteç ikonunu ve de metin değişikliğini sağlayacak şekilde baştan aşağı değiştirebilirsiniz.
Burada söz konusu olan "değiştirme" İngilizce "override" kelimesinin yerine kullanılmıştır; ancak tam bir karşılık olmadığından bazı yanlış anlaşılmalara sebep olabilir. Bizim bu anlatımda sıkça kullanacağımız "değiştirme" işlemi mevcut bir eklentinin koduna müdahale edilmeksizin yapılan bir işlemdir. Koda doğrudan müdahale etmek yerine, kodu kopyala/yapıştır yöntemiyle başka bir yere taşır ve değişiklikleri bu kopya üzerinde yaparız. Daha sonra da orjinal kod yerine bu yeni kopyanın kullanılmasını sağlarız. Böylece orjinal kod olduğu gibi kalır ve hiçbir işlem görmez; bunun yerine bizim değiştirmiş olduğumuz yeni versiyon kullanılır. Değişikliğin bu şekilde yapılması sayesinde çekirdek ve eklenti güncellemeleri sırasında yapmış olduğumuz değişiklikleri kaybetmek gibi bir endişimiz de olmayacaktır. Zaten Drupal dünyasında çekirdek koda müdahale etmek hiç de hoş karşılanan birşey değildir; bunu hiç bir zaman için aklınızdan çıkarmayın
Yukarıda bahsedilen "değişiklik" sürecini şu şekilde detaylandırabiliriz:

Değiştirmek istediğimiz biçimlendirmeyi üreten eklenti tespit edilir.
Bu aşamada iki ihtimal vardır:
- Eklenti biçimlendirmeyi bir tpl.php dosyası ile sağlıyordur (örneğin: Search eklentisindeki search-theme-form.tpl.php dosyası gibi). Bu durumda bu dosyanın bir kopyasını alıp tema klasörünüze taşırsınız (not: aslında tema klasöründe bulunan diğer tpl.php dosyaları da bu şekilde taşınıp üzerlerinde temaya özgü değişiklik yapılmış dosyalardır).
- Eklenti kodu içerisinde biçimlendirilmiş çıktıyı sunan bir fonksiyon mevcuttur (ör: Guestbook eklentisindeki theme_guestbook() fonksiyonu gibi). Bu durumda ise ilgili fonksiyonu kullanılan temanın template.php dosyasına kopyala/yapıştır yaparak ve fonksiyon adında yer alan "theme" kısmına da kullanılan temanın adını yazarak aktarırsınız (ör: Garland temasına aktarıyorsak garland_guestbook olmalı).
Koypalamış olduğunuz tema dosyasında ya da fonksiyonda istediğiniz değişiklikleri yapar ve kaydedersiniz.
Yapılan değişikliklerin etkili olabilmesi için tema önbelleğini temizlersiniz (bunun için Yönet » Site kurulumu » Temalar sayfasını ziyaret etmek yeterlidir).

PHP konusunda yeterince bilginiz yoksa bu işlemler gözünüzü korkutabilir belki ama basit değişiklikler için zaten PHP bilmenize gerek olmuyor. Önemli olan istediğiniz görünümü elde edebilmek için kullanmanız gereken HTML'i yazabilmek ve bunu kodun ilgili kısmına yerleştirebilmek. Tabii ki biraz PHP ve JS sihiri ile kıskanılacak işlere de imza atabilirsiniz Ancak ne yaparsanız yapın, denemelerinizi yayında olan bir siteniz üzerinde değil öncelikle bir test sitesi üzerinde gerçekleştirmeyi unutmayın.
Bazen yapmak istediğiniz değişiklikler için HTML kodlarıyla uğraşmaya gerek olmayabilir. Örneğin bazı değişiklikler sadece CSS kullanılarak yapılabilmektedir. Eklentilerin kendi .css dosyalarında sundukları biçimlendirme bilgilerini değiştirmek için yapabileceğiniz iki şey var:

Değiştirmek istediğiniz elemanın class veya id'sini tespit edip (bu işlem için Firefox tarayıcısındaki Firebug eklentisi tavsiye edilir) bunlara ait biçim bilgilerini eklentinin .css dosyasından temanızın style.css dosyasına kopyala/yapıştır ile taşır ve değiştirirsiniz.

Eklentinin .css dosyasını kopyala/yapıştır ile tema klasörüne aktarırsınız ve bu kopyayı istediğiniz gibi değiştirirsiniz. Daha sonra temanın .info dosyasına şu satırları eklediğinizde artık eklentinin kendi .css dosyası yerine temanızdaki kopyası kullanılır.

Kod:

[COLOR=Yellow][B]stylesheets[COLOR=#009900][[/COLOR]all[COLOR=#009900]][/COLOR][COLOR=#009900][[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] style[COLOR=#339933].[/COLOR]css
 stylesheets[COLOR=#009900][[/COLOR]all[COLOR=#009900]][/COLOR][COLOR=#009900][[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR][COLOR=#339933].[/COLOR]css[/B][/COLOR] eklentinin_orjinal_css_dosyasinin_adi

Not: Elbette bu değişikliklerden sonra yukarıda da bahsedildiği gibi tema önbelleğini temizlemeniz gerekiyor.
Tema üzerinden sistemin standart çıktısını değiştirmek birçok farklı uygulamayı içeren oldukça geniş ve detaylı bir konudur. Bu konuda zaman içinde yazılacak detaylı anlatımları bu sayfayanın alt-sayfalarında bulabileceksiniz.
Kaynaklar:
- Overriding themable output (Drupal 6 theme guide)

The Cry · 22 Ara 2010

Blok ile Banner yapmak

Bu dersimizde, sitenizde reklam alanı olarak kullanabileceğiniz, - banner, resim v.b. ekleyeceğiniz- bir blok yaratmayı anlatacağım. İsterseniz bu alana sitenizin tanıtımını yapan bir resim ekleyerek sitenizin reklamını yapabilirsiniz. Sitenizde yayınlamak istediğiniz reklamların bannerını da bu alana yerleştirmeniz mümkündür.
Öncelikle ihtiyaç duyacağımız en önemli şey, reklamı yapılacak sitenin veya sitenizin banner denilen resmidir. Bunun için özel olarak yapılmış bir gif dosyası kullanabilirsiniz. Gif dosyaları ardarda gösterilen resimlerden oluşur. Eğer isterseniz gif yerine jpg formatında sabit bir resim de kullanabilirsiniz. Bu resmin genişliğini ve yüksekliği pixel cinsinden bilmelisiniz. Bu dosyayı sitenizin serverında uygun gördüğünüz bir adrese kopyalayınız.
1- Önce sitenizde blok ekle sayfasını açın
Site Yapısı > Bloklar > Blok ekle
2- Blok Açıklaması'na dilediğiniz ismi verebilirsiniz.
Ör: Blokyeri_Banner1
gibi sonradan hatırlayabileceğiniz bir isim de olabilir.
Bloğu yayınlayacağınız alanı ilk başta tespit etmeniz lazım. Çünkü eklenecek resmin boyutları yayınlandığı alan için önem taşımaktadır. Sol, sağ, üst, alt, başlık v.b. gibi bir blok alanında çıkacağı için karışmaması için isme bu alanı da verebilirsiniz.
3- Blok Gövdesi'ne aşağıdaki kodu ekleyin. Bu alanda giriş yaparken metin editörü kullanmamayı tercih edin. Aksi halde kodlarınız anlamsız hale dönüşebilir.
<p> <a href="http://sitenizinadi.com/istediğinizsayfaninadresi"> <img alt="Resmin üzerine gelindiğinde gözükecek yazı" height="150" width="240"="http://www.sitenizinadi.com/files/Banner1.gif" /> </a></p> src

Kodun Açıklaması:
http://sitenizinadi.com/istediğinizsayfaninadresi = Bu adres banner ya da resim tıklandığında gidilmesini istediğiniz adres olmalıdır.
"Resmin üzerine gelindiğinde gözükecek yazı" = Mause resmin üstüne geldiğinde çıkmasını istediğiniz yazıyı yazmalısınız. ÖR: "Sitemize Kayıt Olun"
height="150" = Banner veya resmin pixel olarak yüksekliği
width="240" = Banner veya resmin pixel olarak genişliği
"http://www.sitenizinadi.com/files/Banner1.gif" = Banner veya resim dosyasının sitenize yüklendiği ftp adresi ve dosyanın adı
4- Özel görünürlük ayarları:
* Kullanıcılar bu bloğu görüp görmeyeceklerini kontrol edemezler. (bunu seçmeniz en doğrusu)
Bu bloğu öntanımlı olarak göster fakat kullanıcıların gizlemesine izin ver.
Bu bloğu öntanımlı olarak gizle fakat kullanıcıların göstermesine izin ver.
5- Role özel görünürlük ayarları:
Bloğu belli roller için göster: Aşağıda yer alan rollerden birini veya bir kaçını tercih edebilirsiniz. Eğer rol seçmezseniz, blok tüm kullanıcılar tarafından görülebilir. Sitenize kayıtlı olmayan kullanıcıları seçtiğiniz zaman "Siteye kayıt olun" reklamını kayıtlı kullanıcıların görmesini engellersiniz.
6- Sayfaya özel görünürlük ayarları:
Listelenen sayfalar haricindeki tüm sayfalarda göster.
Sadece listelenen sayfalarda göster.
Yukarıdaki tercihlerinden bir tanesi seçmeniz durumunda aşağıdaki kutuda sitenizde reklamın veya resmin yayınlanmasını istediğiniz sayfaları alt alta girmeniz gereklidir. Sadece sayfa yazarsanız yazdığınız sayfada gözükür. sayfa/* yazarsanız sayfa ile başlayan tüm alt sayfalarda gözükür. Bu alanda "http:// www .sitenizinadi.com" kullanmanıza yoktur. "http://www. sitenizinadi.com/sayfa" ve "http: //www.sitenizinadi.com/sayfa/1" gibi olan adreslerin yayınlanacağı alt sayfa isimleri önemlidir.
Anasayfa için <front> yazmanız yeterlidir.
ÖRNEK:

sayfa
sayfa/*
<front>

7- Bloğu kayıt edin.
8- Şimdi geldik sitemize eklediğimiz banner veya resmimizi yayınlamaya.
Site Yapısı > Bloklar sayfasına gidip aşağıdaki listeden yarattığımız Blokyeri_Banner1 bloğunu seçip yayınlanacağı yeri belirliyoruz. Ve Blokları Kayıt et deyip kayıt ediyoruz.

The Cry · 22 Ara 2010

Temel CSS konuları

Birçoğumuz, CSS bilmeden de Drupal'i kullanabileceğimizi düşünüyor. Ancak Drupal ve hazır temaların sağladığı görünümün dışına çok az dahi olsa çıkmak istediğimizde yolumuz muhakkak CSS'den geçecektir.
Aslında CSS öğrenmek, bir programlama dili öğrenmekten çok daha basit. Öncelikle CSS'in Drupal ile ilişkisine bakalım:
Drupal bir sayfanın içeriğini oluşturmak için PHP kullanıyor. PHP sayesinde ziyaretçinin önüne gelen HTML kodu oluşturuluyor. HTML çıktısının görünümünü ise o sayfaya bağlı olan CSS kodları belirliyor. Yani bir sayfanın içeriğini (yazı, resim, dosya vs.) HTML kodu sağlarken, bu içeriğin yerleşimini, renklerini, boyutlarını CSS kodları belirliyor. CSS kodlarını 3 yerde bulabiliriz:
1. HTML kodunun içinde, ilgili yerlerde
2. HTML kodunda HEAD bölgesinin içinde
3. Ayrı bir CSS uzantılı dosyada (bu dosya HTML kodunun başında tanımlanıyor)
Drupal için konuşacak olursak, genellikle 3. yol kullanılıyor. Bir temanın kullanacağı CSS dosyaları ise tema klasöründeki info dosyasında belirtiliyor. Genellikle her tema dosyası style.css adında bir dosya kullanıyor. Bunun dışında site yerleşimi için ayrıca layout.css, yazıcıdan çıktı görünümünü belirlemek için print.css veya farklı tarayıcılara etki edebilecek ie6.css, ie7.css gibi dosyalar da bulunabiliyor.
Ortak içeriğe etki eden birden fazla CSS kodu varsa bu kodlardan birinin seçilmesi gerekiyor. Tarayıcının belirlediği önem sırası şöyle:
1. Tarayıcının kendi CSS kodları
2. Dışarıdan alınan CSS dosyası
3. HEAD kısmında tanımlı CSS kodları
4. HTML kodu içindeki CSS kodları
Ancak bir içeriğin bazı özellikleri bir yerde, diğer özellikleri farklı bir yerdeyse bu iki bilgi birleştiriliyor. Örneğin:
Dış CSS dosyasında:

h1{
color : red;
font-size : 12px;
}

HEAD alanındaki kodda ise:
h1{
color : black;
font-weight : bold;
}

ise, sonuçta h1 öğesine etki eden özellikler

color: red;
font-size: 12px;
font-weight: bold;

oluyor; yani h1 başlıkları 12 piksel büyüklüğünde, kalın ve kırmızı renkli oluyor.
Serinin bir sonraki dersi olan CSS: class ve id kavramları'nda, CSS dosyalarında kullanılan "class" ve "id" kavramlarına bakacağız.
NOT: İngilizce olarak sunulan en başarılı CSS derslerinden birini bu adreste bulabilirsiniz.

The Cry · 22 Ara 2010

CSS: class ve id kavramları

CSS dosyalarındaki stillerin etki edeceği elemanlar, HTML'deki "element"ler, "classlar" veya "id"lerdir.
Elementler, tanımlı HTML kodlarıdır. Örneğin a, h1, body, div, p... Bu elementlere etki edecek CSS kodları ise şu şekilde tanımlanır:

Kod:

div {..............;} p {............;} body {..............;}

Örneğin body için yazılan CSS kodu, body altındaki herşeyi etkiler.
"class" ve "id" tanımları, kullanım açısından aslında hiç farklı değildir. Ancak tanımları farklıdır. Aynı "class", aynı sayfa içinde birden çok elemente verilebilir. Ancak "id" her eleman için farklıdır, aynı sayfada aynı id'ye sahip iki eleman olamaz. class ve id isimleri HTML kodunda tanımlanır. Örnek:

Kod:

<p class="paragraph">................</p> <div id="header">................</div>

CSS dosyasında bir classa etki edecek kodu yazmak için başa nokta (.) işareti koyulur. Örnek:

Kod:

.paragraph {................;}

CSS dosyasında bir idye etki edecek kodu yazmak için başa diyez (#) işareti koyulur. Örnek:

Kod:

#header {................;}

Bildiğiniz gibi HTML kodu içindeki elementler birbirinin içine girmiş halde bulunuyor. Bu sıralama, CSS'de istenilen elementi, classı veya idyi seçebilmek için kullanılır. Örneğin HTML kodumuz:

Kod:

<div id="header"> <div class="box"> <img class="lightbox">............</img> </div> </div>

ise bu, lightbox box'un içinde, box da header'in içinde demektir. Bu kodda lightbox classına ulaşmak için gerekli CSS kodu:

Kod:

#header .box .lightbox {.........;}

şeklindedir. Aynı ögeye:

PHP:

#header .box img {.........;}

şeklinde de ulaşılabilir. Son olarak bazı zamanlar, sadece belli bir elemente etki eden classa ulaşmak gerekebilir. Örnek:

Kod:

<img class="lightbox">............</img> <a class="lightbox">............</a>

bu sayfa için yalnızca img elementine ulaşmak istiyorsak, CSS'de element ile classbırakmıyoruz:
arasında boşluk

Kod:

img.lightbox {........;}

The Cry · 22 Ara 2010

Tema Ayarları

Temalar sitenizin ve içeriklerinizin nasıl görüneceğini belirler. Sitenizin genel görünümü için seçeceğiniz genel temanın yanı sıra, izin vermeniz durumunda kullanıcılar da sitenizdeki mevcut temalardan birini kendi zevklerine göre tercih edebilirler. Drupal 6 çekirdek kurulumunda 6 tema sunulmaktadır. Bunlardan ikisinin - Garland ve Minnelli - renk düzenleri de değiştirebilmektedir.
Kurulumla birlikte gelen temalar haricinde, drupal.org Themes bölümünden indirebileceğiniz birçok farklı tema seçeneği de mevcuttur. Buradan indireceğiniz temaları nasıl kurabileceğinizi öğrenmek için Eklenti ve Tema Kurulumu anlatımına bakabilirsiniz.
Yönet » Site kurulumu » Temalar (/admin/build/themes) sayfasında, Listele sekmesinin yanında yer alan Ayarla sekmesine tıklayarak temalarla ilgili genel ayarlara ulaşabilirsiniz. Aşağıda, bu sayfada bulunan ayarların kısaca açıkladım.
Dikkat: Bütün temalar aşağıdaki özelikleri desteklemektedir. Bazı temalar aşağıdaki özelliklerden bazılarını gizleyebilir/devre dışı bırakabilirler.
LogoBirçok tema tıklanabilen bir site logosu gösterir. Bu seçenek ise, bu logoyu gösterir veya gizler. Not: Temalar sayfasından, kullandığınız temanın "Ayarlar" linkine tıkladığınızda, açılan sayfadan temaya özel kendi logonuzu yükleyebilirsiniz. Veya kolay yoldan tema klasörü içerisinde yer alan logo.png dosyasını değiştirmeniz de mümkün.
Site adı ve sloganıSite ismi ve sloganını göstermeyi veya gizlemeyi buradan ayarlayabilirsiniz. Birçok temada site adı ve slogan, header olarak adlandırılan sayfanın üst kısmında gösterilir.Site amaç metniBirçok tema site bilgisi kısmında ekleyebileceğiniz ve değiştirebileceğiniz site amaç metnini destekler. Site amaç metni varsayılan olarak sadece ana sayfada gösterilir ve site hakkında kısa bir bilgi vermek için kullanılır.Kullanıcı resmiKullanıcı resimlerinin (avatar) içerik ve yorumlarda gösterilip gösterilmeyeceğini belirler. Eğer buradaki ayarlar gri renkte ve değiştirilemez durumda ise, öncelikle "Yönet » Kullanıcı yönetimi » Kullanıcı ayarları" (/admin/user/settings) sayfasında bulunan "resim desteği" seçeneğini etkinleştirin.Arama kutusuSite içi arama kutusunu gösterir veya gizler. Bunun için öncelikle çekirdek Search eklentisinin etkin olması gerekir.Birincil ve ikincil linklerKurulumla birlikte hazır gelen bu iki menünün temada tanımlanan bölgelerde gösterilmesini veya gizlenmesini sağlar. Birçok temada birincil linkler sayfanın üst kısmında yatay pozisyonda bulunur. Bazı temalar ikincil linkleri desteklemez.Kısayol simgesi ayarlarıKısayol simgesi (favicon) hemen hemen bütün modern tarayıcılar tarafından adres çubuğunun başında veya pencerenin sol üst kısmında gösterilen siteye özel küçük simgedir. Varsayılan simgeyi kullanabileceğiniz gibi yine Dosya Seç diyerek istediğiniz küçük resmi yükleyebilirsiniz.Gönderi Bilgileriİçerik gösterilirken, içeriğin kim tarafından hangi tarihte yazıldığını belirten "... tarihinde ... tarafından gönderildi" şeklindeki bilgi metnini gösterir veya gizler. Bu seçimi içerik türü bazında yapabiliyoruz. Örneğin sayfa içerik türü ile oluşturulan "hakkımızda", "sıkça sorulan sorular" gibi içeriklerde bu bilgilerin gösterilmesi genelde istenmeyeceğinden, sayfa içerik türü için bu gösterimi devre dışı bırakabilirsiniz.

The Cry · 22 Ara 2010

İçerik başlıkları ile ileri geri menü yapımı

Bir eklenti ile drupal motorunu daha fazla zorlamadan içerik metinlerimizin altına bir önceki ve bir sonraki içeriklerin başlıklarından oluşan bir ileri geri navigasyon menü yapabiliriz. Bunun için template.php, node.icerik_turu.tpl.php ve style.css dosyalarına ufak kod blokları ekliyoruz.
Sıra ile aşağıdaki adımları takip ederek menünüzü oluşturabilirsiniz:

Aşağıdaki kod bölümünü kullandığınız temanın template.php dosyasının sonuna ekleyiniz.

Kod:

// İçerik başlıkları ile ileri geri NAVİGASYON // Ayrıntılı bilgi ve farklı örnekler için aratmedya.com. //Bu kod bölümü Drupal Association tarafından hazırlanmış Cihan Arat tarafından uyarlanmıştır. // Bu fonksiyon bölümünü kullandığınız temanın template.php dosyasının sonuna ekleyiniz. function phptemplate_prev_next($current_node = NULL, $op = 'p') { // Node types to include in paging $node_types = array('webtasarim'); if ($op == 'p') { $sql_op = '<'; $order = 'DESC'; } elseif ($op == 'n') { $sql_op = '>'; $order = 'ASC'; } else { return NULL; } $output = NULL; foreach($node_types as $type) { $quoted_types[] = "'" . $type . "'"; } $sql = "SELECT nid, title FROM {node} n WHERE nid $sql_op %d AND type IN (" . implode(',', $quoted_types) . ") AND status = 1 ORDER BY nid $order LIMIT 1"; $result = db_query($sql, $current_node->nid, $type); $data = db_fetch_object($result); if (!isset($data->nid) || !$data->nid) { return NULL; } return l($data->title, "node/$data->nid", array('html' => TRUE)); )

,
Buradan $node_types = array('webtasarim'); kısmında webtasarim içerik türünün adıdır. İleri geri menü olurturmak için hangi içerik türünü istiyorsanız onu yazınız.

Daha sonra aşağıdaki kod bölümünü temanızın style.css dosyasının sonuna ekleyiniz.

Kod:

[/COLOR][/B][FONT=monospace][B][COLOR=Yellow]/*İçerik başlıkları ile ileri geri Navigasyon still kodları */ /* Bu kod bölümünü style.css dosyanıza yapıştırınız */ . aratmedya_pager_div_class { width: 100%; margin-top:5px; margin-bottom:15px; clear: both; display: block; text-align: center; line-height: 1.5em; } . aratmedya_pager_prev_class { display: block; float: left; text-align: right; width: 200px; white-space: normal; word-wrap: break-word; padding: 0; } . aratmedya_pager_div_class .aratmedya_pager_main_class { float: left; text-align: center; display: inline; padding: 0 1em 0 1em; } . aratmedya_pager_next_class { display: block; float: left; text-align: left; width: 200px; white-space: normal; word-wrap: break-word; padding: 0; } . aratmedya_pager_laquo_class { float: left; width: 10px; } . aratmedya_pager_raquo_class { float: right; width: 10px; } /*İçerik başlıkları ile ileri geri Navigasyon still kodları bitimi*/[/COLOR][/B] [/FONT] [B][COLOR=Yellow]

Temanızdaki node.tpl.php veya node-içerik_turu.tpl.php sayfaları içinde aşağıdaki kodu bulun:

<?php print $content; ?>

Devamına aşağıdaki kodu ekleyiniz.

Kod:

 <?php if (!$teaser) : ?> <div class="aratmedya_pager_div_class"> <div class="aratmedya_pager_laquo_class">«</div> <div class="aratmedya_pager_prev_class"> <?php print($node, 'p') ?> </div> <div class="aratmedya_pager_main_class"> | <a href="<?php print()?>">Anasayfa</a> | </div> <div class="aratmedya_pager_next_class"> <?php print($node, 'n') ?> </div> <div class="aratmedya_pager_raquo_class">»</div> </div> <?php endif; ?> 

phptemplate_prev_next base_path phptemplate_prev_next

Bu style.css ve diğer dosyalara eklediğimiz kodları değiştirip kullanarak daha farklı menüler oluşturabilirsiniz.
Edit: Bu derse ek olarak birden fazla içerik türünde bu özelliği kullanmak için gerekli değişiklikler eklenmiştir. Buradaki konunun sonunda yapmanız gereken değişiklikler bulunmaktadır.

The Cry · 22 Ara 2010

Artisteer ile Tema Yapımı

Programı çalıştırdığımızda aşağıdaki pencere bizi karşılar:

Drupal fanatiği olduğum için drupal simgesine tıklayarak temamızı oluşturmaya başlıyoruz. Sıra ile menüleri tanıtarak anlatmaya başlayım. Menüleri tanımak zaten bu programı kullanarak tema yapmanız için yeterlidir.

Menülerin açıklamalarını kullanarak basamak basamak tema ayarlarımızı yapalım:

Ideas;
Bölümünde otomatik olarak programın bize stiller önermesini isteyeceğimiz menüler bulunuyor;
Suggest colors: Renk önerisinde bulun.
Suggest fonts: Yazı tipi Önerisinde bulun.
Seggest layout: Frame önerilerinde bulun.
Suggest background: Arkaplan önerisinde bulun.
Seuggest sheet: Katman önerisinde bulun.
Suggest header: Başlık bölümü önerisinde bulun.
Suggest menu: Menü önerisinde bulun.
Suggest article design: Metin bölümü önerisinde bulun.
Suggest block: Blok önerisinde bulun.
Suggest buttons: Bton önerisinde bulun.
Suggest footer: Dipnot önerisinde bulun.
Template: Temanın hangi CMS de kullanılacağını seçersiniz.
Export: Oluşturduğunuz temayı kullanıma hazır halde aktarırsınız.

Colors & Fonts;
Bölümünde temamız için kullanacağımız resimleri ve yazı tipini ayarlayabiliyoruz.
Color Themes: Temanız için hazır renk kalıplarını kullanabilirsiniz.
Paints Bölümü: Sunulan üç adet renk ile temamızın rengini ayarlayabiliriz.
Adjust: Temadaki renkler için ince ayarlama yapabiliriz.
Fonts Bölümü: Yazı tipi ile ilgili ayarları buradan yapıyoruz.

Layout;
Bölümünde tamamızın framelerini ayarlayabiliyoruz.
Page Layout: Banner ve menü bloklarının nerede olacağını ayarlayabiliriz.
Coloums: Blokların yerini buradan ayarlıyoruz.

Background;
En sevdiğim bölüm burası, arkaplan ayarlarını çok kolay gerçekleştirebiliyoruz.
Glare: Sayfada sol üst köşede belirmesini istediğimiz arka planı seçebiliyoruz. İstersek kendi grafiğimizi de buraya ekleyebiliriz.
İmage or Texture: Arkaplan resmini buradan seçiyoruz. Gene aynı seçilde kendi arkaplan grafiğimizi kullanabiliriz.
Gradient: Arkaplanda resim yerine koyudan açığa doğru giden renk stili kullanmak istersek bu seçeneği kullanıyoruz.
Fill color: Arkaplan rengimizi seçiyoruz.
From file: Arka planı bir dosyadan aktarabiliriz.
Options: Arkaplan için ince ayarlamalar yapabiliriz.

Sheet;
Arka planımızı ayarladık şimdi ise ana katmanı ayarlamaya sıra geldi.
Width: Genişliği ayarlıyoruz.
Top Offset: Ana katmanın üstten uzaklığını belirliyoruz.
Padding: Katman içersindeki katman veya metinlerin sınıra olan uzaklığını belirliyoruz.
Radius: Kenarların yuvarlaklığını ayarlıyoruz.
Border: Kenarlıkları ayarlıyoruz.
Shadow: Katmana gölge vermek için kullanıyoruz.
Transparency: Katmana transparanlık verebiliriz. Bunu kullanmak çok güzel gerçekten.
Fill color: Katmanın rengini ayarlayabiliriz.
Color: Katman içindeki metinlerin rengini ayarlıyoruz.

Header;
Banner bölümünü kolaylıkla hazırlayabileceğimiz seçenekler sunuyor.
Backgroung bölümü:
Width: Genişliğini ayarlarız.
Height: Yüksekliğini ayarlarız.
Text block: Site adı ve sloganının yerini belirliyoruz.
Position: Bannera uygulanan maske efektinin ayarlarını yapabiliriz.
From file: Dışarıdan bir banner ekleyebiliriz.
Effects: Bannerımıza efektler verebiliriz.
Foreground bölümü:
Position: İnsan veya benzeri şeylerin resminin konumunu ayarlarız.
From file: Dışarıdan resim aktarabiliriz.
Efekts: Efektler uygularız.
Title:
Headline: Site adını statik olarak atarız.
Slogan: Site sloganını statik olarak atarız.
Position: Yazıların konumunu ayarlarız.
Size: Yazı büyüklüğünü ayarlarız.
Align: Yazıların hizalamasını ayarlayabiliriz.

Menu;
Adındanda anlaşıldığı gibi menüye ait özellikleri ayarlayabiliyoruz.
Styling: Menümüzün görüntü stilini ayarlarız.
Coloring: Menü renklerini seçiyoruz.
Menu bar: Menüde koyudan açığa giden renk sitili veya maske kullanmak için kullanılır.
Fill: Menü arkaplan rengi.
Border: Kenar çizgisi ayarlarını yapabiliriz.
Item: Menü öğelerinin stillerini ayarlarız. Kenar stilleri, arkaplan renk ve maskelemeleri bu bölümde yer alır.
Fill: Menü öğesinin arka plan rengi.
Border: Menü öğesinin kenar çizgi stilini ayarlarız.
Text: Menü öğesinde bulunan metinlerin stillerini ayarlayabiliriz.
Subitem: Açılan menünün ayarlarını, biçimini buradan yapıyoruz.
Fill: Açılan menünün arka plan rengini seçiyoruz.
Border: Açılan menünün kenar çizgi biçimini ayarlıyoruz.
Text: Açılan menünün metin biçimini ayarlıyoruz.

Articles;
Ana katman içinde bulunan resimlerin, bağlantıların ve metinlerin biçimlerini buradan ayarlıyoruz.,
Styling: Her içerik bloğu için stilleri buradan ayarlıyoruz.
Headings: Başlık ayarlarını yapıyoruz.
Hyperlink. Bağlantı biçimlerini ayarlıyoruz.,
Quote: Alıntı bloklarının stillerini ayarlıyoruz.
Bullets: Liste stillerini ayarlıyoruz.
Picture: Paragrafta bulunan resimlerin görünüm ayarlarını yapıyoruz.
Table: Tablo ayarlarını yarıyoruz.
Header: Başlık bloğunun biçimini ayarlıyoruz.
Date: Tarihin yazıldığı bloğun ayarlarını yapıyoruz.
Author: Yazar bilgisinin ayarlarını yapıyoruz.
Footer: Parafrafın alt bloğunun ayarlarını yapıyoruz.
Category: Kateroninin yazım biçimini seçiyoruz.
Tags: Etiketlerin yazım biçimini seçiyoruz.
Comments: Yorumların görüntülenme biçimini ayarlıyoruz.

Bloks;
Bloklarımızın görünüm ayarlarını buradan yapıyoruz. Ne kadar kolay olduğunu deneyince göreceksiniz.
Styling: Blok görünümümüzün kenarlık, başlık konumu ve diğer görüntü biçimlerini seçiyoruz.
Background: Arkaplan ayarlarını yapıyoruz.
Header: Başlık bölümünün ayarlarını yapıyoruz.
Content: İçeriklerin listelendiği bölümü ayarlıyoruz.

Buttons;
Tüm sayfalarımızda bulunan butonların biçimlerini ayarlayabiliriz.
Shape: Butonun şeklini seçiyoruz.
Border: Kenarlık ayarlarını yapıyoruz.,
Texture: Maske uygulamak istersek bu seçeneği kullanıyoruz.
Gradient: Koyudan açoğa doğru renk kullanmak için ayar yapabiliriz.
Shadow: Butonlarımıza gölge verebiliriz.
Fill color: Buton rengini ayarlıyoruz.
Border color: Kenarlık rengini ayarlıyoruz.
Text: Buton metninin biçimini ayarlıyoruz.

Footer;
Sayfa altında sitenin hangi kuruluş veya kişiye ait olduğunu belirttiğimiz bölümü ayarlıyoruz.
Fill: Arkaplan rengini seçiyoruz.
Texture: Maske kullanmak istersek bir seçim yapıyoruz.
Gradient: Koyudan açığa doğru giden renk biçimi kullanmak istersek kullanıyoruz.
Aling: İçersindeki metnin hizalamasını seçiyoruz.
Text padding: İçersindeki metnin blok kenarına olan uzaklığını ayarlıyoruz.
Transparency: Bloğa saydamlık vermek istiyorsak gerekli ayarları yapıyoruz.
Text: Yazıya ait biçimleri ayarlıyoruz.
Hyperlink: Bağlantıların biçimlerini ayarlıyoruz.
RSS: Rss simgesinin görünüm şeklini seçiyoruz.
İşlemleri tamamladıktan sonra yukarıdaki Export butonuna tıklayarak temamızı kullanmak üzere kaydediyoruz.
Eğer temayı yapmanız yarım kaldı ise kaydet butonuna tıklayarak kaydedip, daha sonra açma programı açtığınızda aç butonu yardımı ile yarım kalan temanızı açarak ayarlara devam edebilirsiniz.
Elimden geldiğince anlatmaya çalıştım umarım yararlı olur; burada orijinal yazım mevcuttur.

The Cry · 22 Ara 2010

Kullanıcı giriş formunu özelleştirmek

Kullanıcı giriş alanını sayfanızın herhangi bir yerinde göstermek için yapmanız gerekenleri belirteceğim.

Basamak basamak yapmanız gerekenleri basitçe anlatayım.
Aşağıdaki kod satırlarını sytle.css dosyasının sonuna ekleyiniz (Bu ayarları temanızın görünümüne göre ayarlamanız gerekebilir):

Kod:

[/B][/COLOR] [FONT=monospace][COLOR=Yellow][B][COLOR=#666666][I]/* User login blok başlangıcı */[/I][/COLOR] [COLOR=#666666][I]#navigation {[/I][/COLOR][/B][B] height[COLOR=#339933]:[/COLOR] 3em; border[COLOR=#339933]-[/COLOR]bottom[COLOR=#339933]:[/COLOR]2px solid [COLOR=#666666][I]#000;[/I][/COLOR] [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#navigation div.form-item,[/I][/COLOR][/B][B] [COLOR=#666666][I]#navigation div.content {[/I][/COLOR][/B][B] margin[COLOR=#339933]:[/COLOR] [COLOR=#800080]0[/COLOR]; padding[COLOR=#339933]:[/COLOR] [COLOR=#800080]0[/COLOR]; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar {[/I][/COLOR][/B][B] vertical[COLOR=#339933]-[/COLOR]align[COLOR=#339933]:[/COLOR]middle; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar label {[/I][/COLOR][/B][B] float[COLOR=#339933]:[/COLOR] left; margin[COLOR=#339933]-[/COLOR]left[COLOR=#339933]:[/COLOR] 5px; margin[COLOR=#339933]-[/COLOR]right[COLOR=#339933]:[/COLOR] 1px; font[COLOR=#339933]-[/COLOR]size[COLOR=#339933]:[/COLOR]0[COLOR=#339933].[/COLOR]8em; margin[COLOR=#339933]-[/COLOR]top[COLOR=#339933]:[/COLOR] [COLOR=#339933].[/COLOR]8em; vertical[COLOR=#339933]-[/COLOR]align[COLOR=#339933]:[/COLOR]middle; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar input {[/I][/COLOR][/B][B] float[COLOR=#339933]:[/COLOR] left; width[COLOR=#339933]:[/COLOR]70px; margin[COLOR=#339933]-[/COLOR]top[COLOR=#339933]:[/COLOR] [COLOR=#339933].[/COLOR]7em; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar span.form-required {[/I][/COLOR][/B][B] display[COLOR=#339933]:[/COLOR] none; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar input.form-submit {[/I][/COLOR][/B][B] margin[COLOR=#339933]-[/COLOR]top[COLOR=#339933]:[/COLOR] [COLOR=#339933]-[/COLOR]1px; margin[COLOR=#339933]-[/COLOR]left[COLOR=#339933]:[/COLOR] 10px; margin[COLOR=#339933]-[/COLOR]top[COLOR=#339933]:[/COLOR] [COLOR=#339933].[/COLOR]7em; padding[COLOR=#339933]:[/COLOR] [COLOR=#800080]0[/COLOR] [COLOR=#339933].[/COLOR]5em; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar div.item-list ul {[/I][/COLOR][/B][B] float[COLOR=#339933]:[/COLOR] right; margin[COLOR=#339933]:[/COLOR] [COLOR=#800080]0[/COLOR]; margin[COLOR=#339933]-[/COLOR]right[COLOR=#339933]:[/COLOR] 1px; padding[COLOR=#339933]-[/COLOR]top[COLOR=#339933]:[/COLOR]0px; padding[COLOR=#339933]-[/COLOR]bottom[COLOR=#339933]:[/COLOR] 0px; text[COLOR=#339933]-[/COLOR]align[COLOR=#339933]:[/COLOR]center; border[COLOR=#339933]:[/COLOR] 1px solid [COLOR=#666666][I]#000;[/I][/COLOR] [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar div.item-list ul li {[/I][/COLOR][/B][B] font[COLOR=#339933]-[/COLOR]size[COLOR=#339933]:[/COLOR] 0[COLOR=#339933].[/COLOR]9em; margin[COLOR=#339933]-[/COLOR]top[COLOR=#339933]:[/COLOR]0px; background[COLOR=#339933]:[/COLOR] none; padding[COLOR=#339933]:[/COLOR] 0px; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar div.item-list ul li a{[/I][/COLOR][/B][B] display[COLOR=#339933]:[/COLOR]inline[COLOR=#339933]-[/COLOR]block; text[COLOR=#339933]-[/COLOR]decoration[COLOR=#339933]:[/COLOR]none; color[COLOR=#339933]:[/COLOR] [COLOR=#666666][I]#000;[/I][/COLOR] [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar div.item-list ul li a:hover{[/I][/COLOR][/B][B] display[COLOR=#339933]:[/COLOR]inline[COLOR=#339933]-[/COLOR]block; text[COLOR=#339933]-[/COLOR]decoration[COLOR=#339933]:[/COLOR]none; color[COLOR=#339933]:[/COLOR] [COLOR=#666666][I]#000;[/I][/COLOR] [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]#user-bar p.user-info {[/I][/COLOR][/B][B] float[COLOR=#339933]:[/COLOR] left; padding[COLOR=#339933]:[/COLOR] [COLOR=#800080]0[/COLOR]; padding[COLOR=#339933]-[/COLOR]top[COLOR=#339933]:[/COLOR] [COLOR=#339933].[/COLOR]7em; margin[COLOR=#339933]:[/COLOR] [COLOR=#800080]0[/COLOR] [COLOR=#800080]0[/COLOR] [COLOR=#800080]0[/COLOR] 10px; text[COLOR=#339933]-[/COLOR]decoration[COLOR=#339933]:[/COLOR]none; [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#666666][I]/* User login blok bitişi/[/I][/COLOR][/B][/COLOR] [/FONT] [COLOR=Yellow][B]

Aşağıdaki kod satırlarını template.php dosyasının sonuna ekleyiniz ( ?> php sonlandırıcısından önce ve eğer başlangıç ve bitiş işaretleri yok ise kodları <?php kodlar ?> şeklinde yazınız):

Kod:

[/B][/COLOR] [FONT=monospace][COLOR=Yellow][B][COLOR=#666666][I]//USER LOGIN BLOK KODLARININ BAŞLANGICI[/I][/COLOR] [COLOR=#000000][B]function[/B][/COLOR] [/B][B] user_bar[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR] [COLOR=#990000]global[/COLOR] [COLOR=#000088]$user[/COLOR]; [COLOR=#000088]$output[/COLOR] [COLOR=#339933]=[/COLOR] ''; [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#339933]![/COLOR][COLOR=#000088]$user[/COLOR][COLOR=#339933]->[/COLOR][COLOR=#004000]uid[/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR] [COLOR=#000088]$output[/COLOR] [/B][B] [COLOR=#339933].=[/COLOR] drupal_get_form[COLOR=#009900]([/COLOR]'user_login_block'[COLOR=#009900])[/COLOR]; [COLOR=#009900]}[/COLOR] [COLOR=#B1B100]else[/COLOR] [COLOR=#009900]{[/COLOR] [COLOR=#000088]$output[/COLOR] [COLOR=#339933].=[/COLOR] t[COLOR=#009900]([/COLOR]'<p class="user-info"> Hoşgeldin !user.</p>'[COLOR=#339933],[/COLOR] [COLOR=#990000]array[/COLOR][COLOR=#009900]([/COLOR]'!user' [COLOR=#339933]=>[/COLOR] theme[COLOR=#009900]([/COLOR]'username'[COLOR=#339933],[/COLOR] [COLOR=#000088]$user[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR]; [COLOR=#000088]$output[/COLOR] [/B][B] [COLOR=#339933].=[/COLOR] theme[COLOR=#009900]([/COLOR]'item_list'[COLOR=#339933],[/COLOR] [COLOR=#990000]array[/COLOR][COLOR=#009900]([/COLOR] l[COLOR=#009900]([/COLOR]t[COLOR=#009900]([/COLOR]'Hesabına Bak'[COLOR=#009900])[/COLOR][COLOR=#339933],[/COLOR] 'user/'[COLOR=#339933].[/COLOR][COLOR=#000088]$user[/COLOR][COLOR=#339933]->[/COLOR][COLOR=#004000]uid[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#990000]array[/COLOR][COLOR=#009900]([/COLOR]'title' [COLOR=#339933]=>[/COLOR][COLOR=#009900]([/COLOR]'Edit your account'[COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933],[/COLOR] l[COLOR=#009900]([/COLOR]t[COLOR=#009900]([/COLOR]'Çıkış Yap'[COLOR=#009900])[/COLOR][COLOR=#339933],[/COLOR] 'logout'[COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR]; [COLOR=#009900]}[/COLOR] [COLOR=#000088]$output[/COLOR] [COLOR=#339933]=[/COLOR] '<div id="user-bar">'[COLOR=#339933].[/COLOR][COLOR=#000088]$output[/COLOR][COLOR=#339933].[/COLOR]'</div>'; [COLOR=#B1B100]return[/COLOR] [COLOR=#000088]$output[/COLOR]; t [/B][B][COLOR=#009900]}[/COLOR] [COLOR=#666666][I]//USER LOGIN BLOK KOD BITISI[/I][/COLOR][/B][/COLOR] [/FONT] [COLOR=Yellow][B]

Daha sonra kullanıcı giriş bölümünü ekleyeceğiniz page.tpl.php sayfasındaki katman(div) içersine aşağıdaki kod satırlarını ekleyiniz:
<div id="navigation"><?php print user_bar() ?></div>
Sitenize tekrar giriş yapın ve istediğiniz şekilde style.css dosyasına eklediğiniz still kodlarını ayarlayınız.
Metnin orijinaline buradan;
Uygulamanın jquery kullanılarak açılır kapanır panel ile yapılmış olanınada buradan ulaşabilirsiniz.

The Cry · 22 Ara 2010

Flash header ekleme

Drupal sitelerimizde en zorlandığımız konu flash banner gibi düşünülsede en kolayı odur. Gerci bunu dinamik olarak yapan bir modül varmı bilmiyorum ben burada manuel olarak nasıl yaparız onu anlatacağım.
Aşamalı olarak anlatmak gerekirse:

SWFobject javascript dosyasını sistemimize entegre edeceğiz.
Tema dosyasında gerekli ayarlamaları yapacağız.

Şimdi sıra ile yapalım:
İlk olarak buradanSwfObject apisini indirip eklentiler bölümünden drupal sitemizde eklentiyi aktif ediyoruz.
Sıra tema dosyamızda değişiklik yapmaya geldi. Temamızı yüklediğimiz dizine ftp aracılığı ile ulaşarak page.tpl.php sayfasını bir editor yardımı ile açıyoruz.
Aşağıdakine benzer bir şekilde div tanımlaması olacaktır:

Kod:

[/B][/COLOR] [FONT=monospace][COLOR=Yellow][B][COLOR=#339933]<[/COLOR]div id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"header"[/COLOR][COLOR=#339933]><[/COLOR]div id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"header-inner"[/COLOR] [COLOR=#000000][B]class[/B][/COLOR][COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clear-block"[/COLOR][COLOR=#339933]>[/COLOR] [COLOR=#339933]....[/COLOR][/B][B] [COLOR=#339933]....[/COLOR][/B][B] [COLOR=#339933]</[/COLOR] [/B][B]div[COLOR=#339933]></[/COLOR]div[COLOR=#339933]>[/COLOR][/B][/COLOR] [/FONT] [COLOR=Yellow][B]

Bu bölümün içersindeki kod satırlarını siliyoruz.
sildiğimiz satırlar drupalin temelindeki başlık, logo, açıklama metni, v.b. (belkide arama bölümüde dahildir) sitemizin üst header bölümünden kaldırmış oluyoruz.
Page.tpl.php dosyası içersindeki değiştireceğimiz kod satırları aşağıdakine benzer şekildedir:

Kod:

<div id="header"><div id="header-inner" class="clear-block"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$logo[/COLOR] || [COLOR=#000088]$site_name[/COLOR] || [COLOR=#000088]$site_slogan[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="logo-title"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$logo[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="logo"><a href="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$base_path[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" title="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR][COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" rel="home"><img src="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$logo[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" alt="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR][COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" id="logo-image" /></a></div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$site_name[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id='site-name'> <a href="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$base_path[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" title="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" rel="home"> <strong>[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$site_name[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</strong> </a> </div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$site_slogan[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id='site-slogan'>[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$site_slogan[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$search_box[/COLOR] || [COLOR=#000088]$header_right[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-bar"><div id="header-bar-inner" class="region region-header-bar"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$search_box[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <h3 id="search-title">[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Search'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</h3> <div id="search-box"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$search_box[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$header_right[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-right-blocks" class="region region-header-right"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$header_right[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div></div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$header[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-blocks" class="region region-header"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$header[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div></div> 

t t

Yukarıdaki kod satırlarında:

Kod:

[/B][/COLOR] [FONT=monospace][COLOR=Yellow][B][COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$logo[/COLOR] || [COLOR=#000088]$site_name[/COLOR] || [COLOR=#000088]$site_slogan[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="logo-title"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$logo[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="logo"><a href="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$base_path[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" title="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" rel="home"><img src="[COLOR=#000000][B]<?php[/B][/COLOR][COLOR=#990000]print[/COLOR] [COLOR=#000088]$logo[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" alt="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" id="logo-image" /></a></div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$site_name[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id='site-name'> <a href="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$base_path[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" title="[COLOR=#000000][B]<?php[/B][/COLOR][COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" rel="home"> <strong>[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$site_name[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</strong> </a> </div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$site_slogan[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id='site-slogan'>[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$site_slogan[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$search_box[/COLOR] || [COLOR=#000088]$header_right[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-bar"><div id="header-bar-inner" class="region region-header-bar"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$search_box[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <h3 id="search-title">[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Search'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</h3> <div id="search-box"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$search_box[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$header_right[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-right-blocks" class="region region-header-right"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$header_right[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div></div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$header[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-blocks" class="region region-header"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$header[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR][/B][/COLOR] [/FONT] [COLOR=Yellow][B]

Kısımlarını siliyoruz.

Kod:

[/B][/COLOR] [FONT=monospace][COLOR=Yellow][B][COLOR=#339933]<[/COLOR]div id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"header"[/COLOR][COLOR=#339933]><[/COLOR]div id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"header-inner"[/COLOR] [COLOR=#000000][B]class[/B][/COLOR][COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clear-block"[/COLOR][COLOR=#339933]>[/COLOR] [COLOR=#339933]....[/COLOR][/B][B] [COLOR=#339933]....[/COLOR][/B][B] [COLOR=#339933]</[/COLOR] [/B][B]div[COLOR=#339933]></[/COLOR]div[COLOR=#339933]>[/COLOR][/B][/COLOR] [/FONT] [COLOR=Yellow][B]

Görünümünü elde ediyoruz.
Flash dosyamızı drupale entegre ettiğimiz swfobject api formatı ile eklemek istersek:

Kod:

<div id="header"><div id="header-inner" class="clear-block"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#000088]$url[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#0000FF]"swf_dosyasının_adı.swf"[/COLOR]; [COLOR=#666666][I]//path to flash file[/I][/COLOR] [COLOR=#000088]$params[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#990000]array[/COLOR][COLOR=#009900]([/COLOR]'width' [COLOR=#339933]=>[/COLOR] [COLOR=#CC66CC]100[/COLOR][COLOR=#339933],[/COLOR] 'height' [COLOR=#339933]=>[/COLOR] [COLOR=#CC66CC]100[/COLOR] [COLOR=#009900])[/COLOR]; [COLOR=#666666][I]// Animasyonun boyutunu giriyoruz.[/I][/COLOR] [COLOR=#666666][I]//Eklemek istediğimiz ses ve resim dosyaları yoksa bu bölümü silebilirsiniz.[/I][/COLOR] [COLOR=#000088]$vars[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#990000]array[/COLOR][COLOR=#009900]([/COLOR] 'file' [COLOR=#339933]=>[/COLOR] base_path[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933].[/COLOR] path_to_theme[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933].[/COLOR]'/files/song.mp3'[COLOR=#339933],[/COLOR] 'image' [COLOR=#339933]=>[/COLOR] base_path[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933].[/COLOR] path_to_theme[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933]./[/COLOR]files[COLOR=#339933]/[/COLOR]image[COLOR=#339933].[/COLOR]jpg[COLOR=#339933],[/COLOR] [COLOR=#009900])[/COLOR]; [COLOR=#666666][I]//Eklenecek dosya yok ise buraya kadar silinir.[/I][/COLOR] [COLOR=#990000]print[/COLOR] theme[COLOR=#009900]([/COLOR][COLOR=#0000FF]"swfobject_api"[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#000088]$url[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#000088]$params[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#000088]$vars[/COLOR][COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div></div>

Bu şekilde eklemeyi başaramadı iseniz direk olarak html kodları ile ekleyebiliriz.

Kod:

[/B][/COLOR] [FONT=monospace][COLOR=Yellow][B][COLOR=#339933]<[/COLOR]div id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"header"[/COLOR][COLOR=#339933]><[/COLOR]div id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"header-inner"[/COLOR] [COLOR=#000000][B]class[/B][/COLOR][COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clear-block"[/COLOR][COLOR=#339933]>[/COLOR] [COLOR=#339933]<[/COLOR] [/B][B]object classid[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"[/COLOR][COLOR=#339933]=[/COLOR][COLOR=#0000FF]"780"[/COLOR] height[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"420"[/COLOR][COLOR=#339933]>[/COLOR] [COLOR=#339933]<[/COLOR]param name[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"movie"[/COLOR] value[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"swf_dosya_adı.swf"[/COLOR] [COLOR=#339933]/>[/COLOR] [COLOR=#339933][/COLOR] [COLOR=#339933]<[/COLOR]object type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"application/x-shockwave-flash"[/COLOR][COLOR=#339933]=[/COLOR][COLOR=#0000FF]"swf_dosya_adı.swf"[/COLOR] width[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"780"[/COLOR] height[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"420"[/COLOR][COLOR=#339933]>[/COLOR] [COLOR=#339933][/COLOR] [COLOR=#339933]<[/COLOR]p[COLOR=#339933]>[/COLOR]Alternative content[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR] [COLOR=#339933][/COLOR] [COLOR=#339933]</[/COLOR]object[COLOR=#339933]>[/COLOR] [COLOR=#339933][/COLOR] [COLOR=#339933]</[/COLOR]object[COLOR=#339933]>[/COLOR] width data [/B][B][COLOR=#339933]</[/COLOR]div[COLOR=#339933]></[/COLOR]div[COLOR=#339933]>[/COLOR][/B][/COLOR][/FONT] [COLOR=Yellow][B]

width="780" height="420" kısımlarını flash dosyanızın boyutları ile değiştirmeyi unutmayınız.
Sadece ana sayfada flash bannerımız ve diğer sayfalarda normal headerımız görünsün istersek:

Kod:

<div id="header"><div id="header-inner" class="clear-block"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$is_front[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] // Veya [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$page[/COLOR] [COLOR=#339933]==[/COLOR] [COLOR=#800080]0[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#000088]$url[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#0000FF]"swf_dosyasının_adı.swf"[/COLOR]; [COLOR=#666666][I]//path to flash file[/I][/COLOR] [COLOR=#000088]$params[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#990000]array[/COLOR][COLOR=#009900]([/COLOR]'width' [COLOR=#339933]=>[/COLOR] [COLOR=#CC66CC]100[/COLOR][COLOR=#339933],[/COLOR] 'height' [COLOR=#339933]=>[/COLOR] [COLOR=#CC66CC]100[/COLOR] [COLOR=#009900])[/COLOR]; [COLOR=#666666][I]// Animasyonun boyutunu giriyoruz.[/I][/COLOR] [COLOR=#666666][I]//Eklemek istediğimiz ses ve resim dosyaları yoksa bu bölümü silebilirsiniz.[/I][/COLOR] [COLOR=#000088]$vars[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#990000]array[/COLOR][COLOR=#009900]([/COLOR] 'file' [COLOR=#339933]=>[/COLOR] base_path[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933].[/COLOR] path_to_theme[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933].[/COLOR]'/files/song.mp3'[COLOR=#339933],[/COLOR] 'image' [COLOR=#339933]=>[/COLOR] base_path[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933].[/COLOR] path_to_theme[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933]./[/COLOR]files[COLOR=#339933]/[/COLOR]image[COLOR=#339933].[/COLOR]jpg[COLOR=#339933],[/COLOR] [COLOR=#009900])[/COLOR]; [COLOR=#666666][I]//Eklenecek dosya yok ise buraya kadar silinir.[/I][/COLOR] [COLOR=#990000]print[/COLOR] theme[COLOR=#009900]([/COLOR][COLOR=#0000FF]"swfobject_api"[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#000088]$url[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#000088]$params[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#000088]$vars[/COLOR][COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$page[/COLOR] [COLOR=#339933]!=[/COLOR] [COLOR=#800080]0[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$logo[/COLOR] || [COLOR=#000088]$site_name[/COLOR] || [COLOR=#000088]$site_slogan[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="logo-title"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$logo[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="logo"><a href="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$base_path[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" title="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR][COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" rel="home"><img src="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$logo[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" alt="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR][COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" id="logo-image" /></a></div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$site_name[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id='site-name'> <a href="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$base_path[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" title="[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Home'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]" rel="home"> <strong>[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$site_name[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</strong> </a> </div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$site_slogan[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id='site-slogan'>[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$site_slogan[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</div> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$search_box[/COLOR] || [COLOR=#000088]$header_right[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-bar"><div id="header-bar-inner" class="region region-header-bar"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$search_box[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <h3 id="search-title">[COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] t[COLOR=#009900]([/COLOR]'Search'[COLOR=#009900])[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR]</h3> <div id="search-box"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$search_box[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$header_right[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-right-blocks" class="region region-header-right"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$header_right[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div></div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]if[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#000088]$header[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933]:[/COLOR] [COLOR=#000000][B]?>[/B][/COLOR] <div id="header-blocks" class="region region-header"> [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#990000]print[/COLOR] [COLOR=#000088]$header[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div>  [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] [COLOR=#000000][B]<?php[/B][/COLOR] [COLOR=#B1B100]endif[/COLOR]; [COLOR=#000000][B]?>[/B][/COLOR] </div></div>

t t

Yukarıdaki kod bölümü ile flash bannerımız sadece anasayfada gözükecek diğer sayfalarda drupal header normal olarak gözükecektir.

The Cry · 22 Ara 2010

Tema içinde Cufon kütüphanesi kullanma

Beğendiğiniz fakat web tarayıcısının gösteremediği bir yazıtipini web sayfanızda kullanmak isterseniz, cufon eklentisini kullanabilir ya da temanızın içinde cufon kütüphanesini gömebilirsiniz. Bu yazımızda ikinci metotu inceliyeceğiz.
İlk olarak web sitemizde kullanmak istediğimiz yazıtipinin javacsript versiyonunu üretiyoruz:

https://tik.lat/6RrQf adresini ziyaret edin
İlk kısımda ("select the font ...") beğendiğiniz font dosyasının normal, italik, koyu, koyu italik durumları içeren dosyalarını ilgili kutucuklara girin.
DİKKAT: Oluşan dosyanın boyutunu küçük tutmak için eğer gerekmiyorsa italik, koyu, koyu italik dosyaları girmeyin
DİKKAT: Eğer yazıtipiniz windows/fonts dizinindeyse başka yere kopyalamanız, oradan yüklemeniz gerekiyor
Eğer bu fontun cufon ile kullanılması için yetki, izin varsa "The EULA.." kutucuğunu işaretleyin (işaretlemezseniz fontunuzu oluşturamazsınız).
İkinci kısımda ("Include the fol...") dosyanızda hangi karakterlerin bulunmasını istiyorsanız onları seçiyorsunuz.
Burada "Basic Latin" seçili geliyor. Buna Türkçe karakterleri eklemek için seçim kutucukların altındaki kutuya "ışöçğüİŞÖÇĞÜâîûÂÎÛ" girin.
Eğer daha az karakter işinizi görüyorsa Basic Latin seçimini kaldırın ve bu seçim kutucuklarını ve aşağıdaki kutuyu kullanarak karakter setinizi hazırlayın
DİKKAT: Boşluk da bir karakterdir.
Security kısmında bu dosyayı kullanabilecek siteleri girin.
Performance ve Customization kısımlarını olduğu gibi bırakın.
Terms kısmındaki kutucuğu işaretleyin.
"Let's do this" düğmeciğine tıklayarak yazıtipi dosyanızı ("Arial_400.font.js" benzeri bir dosya) oluşturun ve kaydedin.

İkinci olarak https://tik.lat/lIASx adresinden cufon kütüphanesini indirin. Bu iki dosyayı temanız klasörüne kopyalayın. Daha sonra temanızın .info dosyasına aşağıdaki satırları ekleyin:

scripts[] = calistir.js
scripts[] = cufon-yui.js
scripts[] = Arial_400.font.js

Burada "Arial_400.font.js" yerine kendi yazıtipi dosyanızın adını yazın.
Gene tema dizininde "calistir.js" dosyası oluşturun ve içini aşağıdaki gibi doldurun:
Drupal.behaviors.myCufon = function(context) {
Cufon.replace('h2');
Cufon.replace('#content h3');
}

Buradaki "Cufon.replace" satırları örnektir. İlk satır sitenizdeki bütün h2 taglarını, ikinci satır ise id'si content olan elementin içindeki h3 taglarını beğendiğimiz yazıtipi ile yazar. Benzer satırları istediğiniz gibi ekleyebilirsiniz. İyi çalışmalar dileklerimle.

The Cry · 22 Ara 2010

Drupal ve jQuery UI

Merhaba arkadaşlar, Sizlere ilk yazımda drupal tema geliştiricilerinin genelde sorun yaşadığı jquery ile ilgili bilgiler vereceğim.
Sizlerinde çok iyi bildiği gibi Drupal konusunda, eksikliğini en çok hissettiğimiz şey gelişmiş ve görsel anlamda zengin temalar. Drupal her ne kadar preprocess gibi geliştiricilerin drupal data çıktılarını değiştirmeleri için gelişmiş fonksiyonlar sunsa da bunları kullanmak için biraz araştırma ve drupal’ın çalışma mantığı hakkında bilgi edinmek gerekiyor. Bu yazımızda pek fazla Preprocess fonksiyonuna değinmeyeceğiz ancak bir sonraki ders notlarına bu konuyu eklemeyi planlıyorum.
Şimdi gelelim kendi konumuza: jquery UI. Konu hakkında kısa bir bilgi vermek gerekirse, web siteleri için görsel anlamda zengin içerikler oluşturmak için kullanılan bir jquery kütüphanesi diyebiliriz. Bu kütüphane içerisinde web siteniz için otomatik tamamlama, tarih seçici, diyalog kutusu, yuvarlak köşeli kutular, sekmeler, ilerleme çubuğu gibi eklentilerin yanı sıra görsel efektler oluşturabilmeniz için de kütüphaneler bulunmaktadır.
Şimdi size Drupal temanızda jquery UI ile sekme oluşturmayı anlatacağım. İlk olarak bir ihtiyaç listesi yapalım.
Gerekenler:

Drupal 6.x
Jquery 1.3.2
Jquery UI 1.7.3

Şimdi gelelim ihtiyaç listesinde ki sorunlara; Drupal 6.x jquery 1.2.6 ile beraber gelmektedir fakat bizim kullanacağımız eklentiler ve jquery UI için en az jquery 1.3.2 gerekmekte bunu da drupal sitesinde jquery update modülü yardımı ile gerçekleştireceğiz.
İlk olarak https://tik.lat/9hyaI adresinden ilgili modülü sitemize kuralım. Burada dikkat etmemiz gereken, jQuery Update 6.x-2.x: jQuery 1.3.x modülünü kullanmamız; ancak bu yazımı hazırlarken modül hala düzgün olarak çalışmamaktadır. Eğer bu modülde sorun yaşarsanız jQuery Update 6.x-1.x: jQuery 1.2.x modülünü kurun ve manuel olarak jquery 1.3.2 yükseltmesi yapın. Bunun için, Jquery sitesinden jquery 1.3.2 mini dosyasın indirin (Bu bağlantıdan indirebilirsiniz) ve indirdiğiniz dosyanın adını jquery.js olarak değiştirin ve drupal’ın kurulu olduğu dizin altında misc/ klasörü içine kopyalayınız. Bu yaptığımız işlem sayesinde, Drupal ile gelen 1.2.6 sürümünü 1.3.2 ile değiştirmiş olduk. Ancak, bu dosyayı bir yere daha kopyalamamız gerekiyor: jquery_update modülü altında replace klasörünü göreceksiniz; şimdi indirmiş olduğumuz jquery.mini.js dosyasını replace klasörü içinde bulunan jquery.mini.js ile değiştirelim ve bu işlemden sonra Drupal yönetim paneline giderek "Site yapılandırması" altında jquery update seçeneğini göreceksiniz (admin/settings/jquery_update); buradan kullanmak istediğimiz jquery dosya tipimizi Minified olarak belirliyoruz ve böylece jquery sürümümüzü 1.2.6’dan 1.3.2 yükseltmiş olduk.
Şimdi jquery UI’yi sitemize tanıtalım.
Jquery UI’yi sitemize tanımlamamız için bize iki adet modül gerekecek bunlar; jquery_ui ve jquery_ui_loader. Bu modülleri de https://tik.lat/xhM5U ve https://tik.lat/ppA7a linklerinden indirebilirsiniz. Burada unutmamanız gereken jquery_ui modülü için Jquery UI Kütüphanesinin gerekmesi. Bu kütüphaneyi https://tik.lat/PxoeX sitesinden indirmemiz gerekiyor. jquery 1.7.3 versiyonunu indirdiğinizden emin olun çünkü 1.7.3 versiyonu sitemize tanıttığımız jquery 1.3.2 ile uyumlu çalışmaktadır.
Bu dosyamızı indirdikten sonra içerisinde development-bundle adında bir klasör bulacaksınız, kullanacağımız bütün eklentiler efektler temalar vs. bu klasörümüzün içinde bulunmakta. Şimdi bu klasörümüzü daha önce indirdiğimiz jquery_ui modülü klasörümüz için jquery.ui adına kayıt edelim (/modules/jquery_ui/jquery.ui/ şeklinde olduğundan emin olun). Artık modüllerimizi etkinleştirebiliriz. Şimdi yönetim panelinden jquery_ui ve jquery_ui_loader modüllerimizi aktif hale getirelim artık sitemiz jquery 1.3.2 ve jquery UI 1.7.3 tanımış durumda.
Son olarak temamızda kullanacağımız jquery_ui eklentilerini ekleyelim, bunun için yönetim panelimizden "Site yapılandırması" altında Jquery UI loader göreceksiniz (admin/settings/jquery_ui_loader); burada bulunan seçenekler temamızda hangi eklentileri ve hangi jquery_ui temasını kullanacağımızı tanımlıyoruz.
Bu yazımızda temamıza sekme ekleyeceğimiz için, jQuery UI load settings altında > Files to Load göreceksiniz, buraya ui.tabs yazıyoruz böylece temamıza ui.tabs.js scriptini eklemiş olduk ve jquery ui load settings seçenekleri altında göreceğiniz Theme files to Load: jquery ui ile kullanacağımız temamızı belirlememize yarıyor. Standart olarak default/ui.all.css geliyor fakat jquery ui sitesinden istediğiniz temayı indirerek yüklemiş olduğumuz jquery_ui modülü içerisinde yer alan jquery.ui/themes klasörü altına ekleyerek kullanabilirsiniz. Ben standart tema yerine indirmiş olduğum black-tie temasını kullanacağım siz de temanıza uygun bir ui teması yapabilir yada hazır temalardan birisini kullanabilirsiniz. UI temaları hakkında daha fazla bilgi için https://tik.lat/dXCU3 sitesini ziyaret edebilirsiniz ve hoşunuza giden temaları buradan indirebilirsiniz ya da kendi temanızı kendiniz her hangi bir kod yazmadan kolayca yapabilirsiniz.
Şimdi yapmış olduklarımıza bir göz atalım, sitemizi jquery 1.3.2 versiyonuna yükselttik ve jquery_ui 1.7.3 kütüphanesini kurduk ve son olarak temamızda kullanacağımız ui.tabs kütüphanesini etkinleştirdik. Artık tema dosyamıza giderek kodlarımızı yazmaya başlayabiliriz.
Şimdi temamıza 3 adet sekme ekleyelim; ilk olarak page.tpl.php dosyamızı açalım ve aşağıdaki kodu sekme eklemek istediğimiz yere yazalım.
<div id="sekmeler">
<ul>
<li><a href="#sekme-1"> Sekme 1</a></li>
<li><a href="#sekme-2">Sekme 2</a></li>
<li><a href="#sekme-3">Sekme 3</a></li>
</ul>
<div id="sekme-1">Sekme 1 için içerik .</div>
<div id="tabs-2">Sekme 2 için içerik</div>
<div id="tabs-3">Sekme 3 için içerik</div>
</div>

Sadece bu kodları kullanarak sekmeleri görmemiz mümkün değil şimdi jquery_ui tab scriptinde bu sekmelerimizi tanıtalım bu işlem için temamıza kullanacağımız bir js dosyası gerekiyor bunu da tema klasörümüz içine sekme.js dosyasını oluşturalım ve bu dosyamızı da temamıza tanıtalım. Bu işlem için tema_adı.info (kullandığınız tema klasörü içinde uzantısı .info olan dosya) dosyamızı açalım bu dosya içerisinde tanımlı bloklar(regions), css dosyaları, scriptler göreceksiniz.
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
stylesheets[all][] = style.css

şimdi sekme.js dosyamızı
scripts[] = sekme.js olarak dosyamıza ekleyelim böylece sekme.js dosyamız temamıza eklenmiş oldu.
Şimdi sekme.js dosyamızı açalım ve içerisine aşağıdaki kodu ekleyelim
$(function() {
$("#sekmeler").tabs();
});

Eklemiş olduğumuz kod html id’si “sekmeler” olan tagları arayacak ve yazmış olduğumuz html kodunu jquery tarafından görsel açıdan zengin sekmelere dönüştürecek. Burada yapmış olduğumuz işin screenshot’ını görebilirsiniz.

(Not: UI teması black-tie)
Her ne kadar bu kod yeterli olsa da Biraz daha bilgilendirme amacı ile bu sekmelerimizi ajax ile sunalım bunun için yukarıda yazmış olduğumuz kod yerine aşağıda ki kodu ekleyelim
$(function() {
$("#sekmeler").tabs({
ajaxOptions: {
error: function(xhr, status,, anchor) {
$(anchor.hash).html("Sekmeler yüklenirken bir sorun oluştu.");
}
}
});
}); index

Eklemiş olduğumuz kod ile artık sekmelerimizi ajax ile çekiyoruz. Peki bunu neden yapıyoruz? Bir de buna değinelim, burada basitleştirmek amacı ile sizlere sadece sabit 3 sekme ekledik fakat bu sekmeleri eğer Blok olarak tanımlarsanız (regions) ve bu sekmelerde bulunan bloklara atadığınız views blokları gibi dinamik içeriklerin yüklenmesi için ajax kullanmak daha mantıklı olacaktır. Ajax dışında sekmelerimize efektler, renkler, geçişler eklemeniz de mümkün. Bu özelikler için http: //jqueryui.com/demos/tabs/ adresini incelemenizi öneririm. Burada, Options, Events, Methods, Theming seçenekleri göreceksiniz; bütün kodlar ve örnek dosyalara verdiğim linkten ulaşmanız mümkün.
Bu yazımızda sizlere jquery_ui ile tema geliştirme konusunda biraz bilgi vermeye çalıştım. Basit bir şekilde temanıza sekme eklemeniz mümkün bunun yanı sıra, http:// jqueryui.com/demos/ sitesinde gördüğünüz bütün eklentileri aynı mantıkla kolayca sitenize eklemeniz mümkün olacak. Umarım faydalı olmuştur.

The Cry · 22 Ara 2010

Otomatik Değişen Resimler Bloğu

Bu derste siteniz de belirli bir blok alanında resimlerin kendiliğinden sürekli olarak değişmesini öğreneceğiz.
Açıklama

1- Anasayfa » Yönet » Site kurulumu » Bloklar » Blok ekle yi açıyoruz.
2- Blok açıklaması: Buraya istediğiniz ismi verebilirsiniz bloklar sayfasında sadece siz göreceksiniz.
3- Blok başlığı: Resim alanı olacağı için ben boş bıraktım, siz isterseniz doldurabilirsiniz.
4- Blok gövdesi: Bu alana aşağıdaki kodu kopyalayıp yapıştırınız.
Kod:

Kod:

[/B][/COLOR][FONT=monospace][COLOR=Yellow][B][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR][/B][B] [COLOR=#339933]<[/COLOR][/B] [B]head[COLOR=#339933]>[/COLOR][/B][B] [COLOR=#339933]<[/COLOR][/B] [B]script[COLOR=#339933]>[/COLOR][/B][B] [COLOR=#000000][B]var[/B][/COLOR][/B] [B] hangisi[COLOR=#339933]=[/COLOR][COLOR=#800080]0[/COLOR]; [COLOR=#000000][B]function[/B][/COLOR][/B] [B] degistir[COLOR=#009900]([/COLOR] [COLOR=#009900])[/COLOR][/B][B] [COLOR=#009900]{[/COLOR][/B][B] hangisi[COLOR=#339933]=[/COLOR]hangisi[COLOR=#339933]+[/COLOR][COLOR=#CC66CC]1[/COLOR]; ********[COLOR=#339933].[/COLOR]getElementById[COLOR=#009900]([/COLOR][COLOR=#0000FF]"resmimiz"[/COLOR] [COLOR=#009900])[/COLOR][COLOR=#339933].[/COLOR]src[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"../sites/all/dosyalar/resim/"[/COLOR][COLOR=#339933]+[/COLOR]hangisi[COLOR=#339933]+[/COLOR][COLOR=#0000FF]".jpg"[/COLOR]; setTimeout[COLOR=#009900]([/COLOR][COLOR=#0000FF]"degistir( )"[/COLOR][COLOR=#339933],[/COLOR][COLOR=#CC66CC]4000[/COLOR] [COLOR=#009900])[/COLOR] [COLOR=#666666][I]// 4 saniyede bir değişir. [/I][/COLOR] [COLOR=#B1B100]if[/COLOR][/B] [B] [COLOR=#009900]([/COLOR]hangisi[COLOR=#339933]==[/COLOR][COLOR=#CC66CC]10[/COLOR] [COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]hangisi[COLOR=#339933]=[/COLOR][COLOR=#800080]0[/COLOR];[COLOR=#009900]}[/COLOR][/B][B] [COLOR=#009900]}[/COLOR][/B][B] [COLOR=#000000][B]</script>[/B][/COLOR][/B][B] [COLOR=#339933]</[/COLOR][/B] [B]head[COLOR=#339933]>[/COLOR][/B][B] [COLOR=#339933]<[/COLOR][/B] [B]body onload[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"degistir( );"[/COLOR][COLOR=#339933]>[/COLOR][/B][B] [COLOR=#339933]<[/COLOR][/B] [B]a href[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"../"[/COLOR][COLOR=#339933]>[/COLOR] [COLOR=#339933]<[/COLOR]img src[COLOR=#339933]=[/COLOR][COLOR=#0000FF]""[/COLOR] id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"resmimiz"[/COLOR] name[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"resmimiz"[/COLOR] src[COLOR=#339933]=[/COLOR][COLOR=#0000FF]""[/COLOR][COLOR=#339933]=[/COLOR][COLOR=#0000FF]"resmin üzerine geldiğinizde görüntülenmesini istediğiniz mesajı buraya yazın"[/COLOR][COLOR=#339933]/>[/COLOR] [COLOR=#339933]</[/COLOR]a[COLOR=#339933]>[/COLOR] [/B] title [B][COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR] [COLOR=#339933]</[/COLOR][/B] [B]html[COLOR=#339933]>[/COLOR][/B][/COLOR] [/FONT] [COLOR=Yellow][B]

5- Girdi biçimi alanında muhakkak PHP code seçili olmalıdır.
6-Bloğu belirli sayfalarda göster: Bu alanda işaretlediğiniz yere göre blok görüntülenir.
- Listelenen sayfalar haricindeki tüm sayfalarda göster.
- Sadece listelenen sayfalarda göster.
- Aşağıdaki PHP kodu DOĞRU döndürürse göster (PHP-kipi, sadece uzmanlar).
Sadece anasayfada görüntülenmesini istiyorsanız.
- Sadece listelenen sayfalarda göster. şıkkını işaretleyip aşağıdaki kutuyu bu şekilde doldurmanız yeterlidir.
Sayfalar:
<front>
7- Bloğu kaydededin.
8- Kayıt ettiğiniz bloğun adını Anasayfa » Yönet » Site kurulumu » Bloklar sayfasından görüntülemek istediğiniz blok bölgesine göre ayarlayın.
9- Güle güle kullanın.
Kodlar Hakkında Notlar:

a) Resimlerinizin bulunduğu klasörün yerini bu adresi değiştirerek belirleyebilirsiniz. ../sites/all/dosyalar/resim
Örneğimizde resimler ../sites/all/dosyalar/resim klasöründe bulunmaktadır.
b) Bir resmin görüntülenme ve değişme süresini 4000 rakamını değiştirerek yapabilirsiniz. 1000 = 1 saniyedir.
c)Kaç tane resim görüntülenecek belirlemek için resim adedini (hangisi==10 ) 10 rakamını değiştirerek belirleyebilirsiniz. Dilediğiniz sayıda resim olabilir.
d) Sitenizin sunucusunda ki klasördeki resimlerin adı muhakkak 1.jpg - 2.jpg - 3.jpg .... 10.jpg olmalıdır. (Uzantı büyük küçük harfe duyarlıdır. Bu nedenle tümünü küçük harf yapınız.)
e) Eğer resimlerin türünü farklı isterseniz ".jpg" jpg uzantısını dilediğiniz uzantı ile değiştirin. (Büyük küçük harfe duyarlıdır.) Ancak, d bendinde bahsettiğimiz dosya adlarındaki uzantılarda bu sefer sizin belirlediğiniz dosya uzantılarından olmalıdır.
f) Resmin üzerine fare imleci geldiğinde gözükmesini istediğiniz bir etiket mesajı varsa title="resmin üzerine geldiğinizde görüntülenmesini istediğiniz mesajı buraya yazın" kodundaki iki tırnak arasında kalan metni değiştirin.
g) Blokdaki resmin üzerine tıklandığında gidilmesini istediğiniz bir internet adresi varsa <a href="../"> kodundaki tırnak içerisindeki alana istediğiniz internet adresini girebilirsiniz. Ancak anasayfaya gitmesini isterseniz bu kod yeterlidir. Eğer kendi siteniz üzerinde herhangi bir sayfaya gitmesini dilerseniz kodu sitenizin adresinde ilk taksimden sonra gelen adres ile bu <a href="../sayfadi"> şekilde değiştirebilirsiniz. ÖR: www.siteadi.com/sayfaadi adresi ise <a href="../sayfadi"> olmalıdır.
Önemli Notlar:

1- Kayıtlı bloğu tekrar düzenlemek için açtığınızda kodlardan bazıları silinmiş olabilir. (Sebebini çözemedim. Sanırım ckeditor nedeni ile oluyor.) Bu nedenle her bloğu yeniden düzenlemek istediğinizde yukarıda verilen kodları tekrar ilgili yere kopyalamanızı tavsiye ederim.
2- Tüm resimlerinizin boyutu en x boy olarak aynı büyüklükte olmalıdır. Kodlar resimlerinizi büyüklüğünde değişme yapmadan olduğu büyüklükte gösterecektir.
3- Resimler arası bir bütünlük sağlamak için her resimde şablon olarak belirlediğiniz aynı çerçeveyi kullanabilirsiniz. Bu işlem bloğunuzun siteniz ile uyumlu olmasını sağlayacaktır.

The Cry · 22 Ara 2010

Drupal'de Türkçe karakter sorunları

Hemen her yazılımda olduğu gibi Drupal'de de Türkçe karakterlerle ilgili bazı sorunlar yaşanabiliyor. Neyse ki bunların çözümleri var. Bu sayfada Türkçe karakterlerle ilgili karşılaşılan sorunları ve çözüm yöntemlerini bulabilirsiniz.
Pathauto ile linklerde Türkçe karakter dönüşümü

Pathauto sayesinde içerik yollarında içerik başlığı vb. düğüm bilgilerinden faydalanabiliyoruz. Ancak bu durum ı, ş, ç, ğ, ö, ü gibi Türkçe karakterlerin standart karakterlere dönüştürülmesini gerektirmekte. Pathauto eklentisinin 6.x-2.x öncesi sürümlerinde (6.x-1.x ve 5.x sürümleri) bu işlem, Pathauto eklenti klasörüne koyulacak i18n-ascii.txt dosyası ile mümkün oluyor. Zaten bu klasörde mevcut olan i18n-ascii.example.txt dosyasının adını bu şekilde değiştirmek yeterli. Ancak bu dosyayı olduğu gibi kullandığımızda ö ve ü karakterleri ö » oe, ü » ue biçiminde dönüştürülüyor ki bu pek tercih edilen bir dönüşüm değil. Bu durumda yapabileceğiniz iki şey var:

i18n-ascii.txt dosyasını not defteri ile açıp Ö, Ü, ö ve ü karakterleri için yapılan dönüşümleri bulup O, U, o ve u olarak değiştirmek.
Doğrudan burada yer alan hazır dosyayı indirip Pathauto klasörünüze açmak.

Bu işlemleri gerçekleştirdikten sonra, Pathauto eklentisinin ayar sayfasında, Genel Ayarlar başlığı altında mevcut olan Transliterate prior to creating alias seçeneğini işaretlemeyi unutmayın.
Not-1: Eğer Pathauto klasöründe i18n-ascii.txt adında bir dosya bulunmuyorsa bu seçenek devre dışıdır.
Not-2: Yapılan değişikliğin mevcut yollarda etkili olabilmesi için mevcut takma adları silmelisiniz.
# Pathauto eklentisinin 6.x-2.x ve sonraki sürümlerinde karakter dönüşüm işlemlerinde Transliteration eklentisinden faydalanılıyor. Dolayısıyla bu eklentiyi kurmanız gerekmekte. Ancak daha önceden i18n-ascii.txt dosyasında olduğu gibi bu eklentide de Türkçe karakterler doğru olarak dönüştürülmüyor. Bu sorunu kendiniz aşağıdaki değişiklikleri yaparak giderebileceğiniz gibi buradaki arşivde yer alan iki dosyayı orjinalleri ile değiştirerek de çözebilirsiniz:

Kod:

[/COLOR][/B][B][COLOR=Yellow]transliteration\data dizininde yer alan x00.php dosyasını açarak son satırını aşağıdaki gibi değiştirin: [/COLOR][/B] [FONT=monospace][B][COLOR=Yellow] 'tr' => array(0xDC => 'U', 0xFC => 'u', 0xC7 => 'C',0xE7 => 'c', 0xD6 => 'O', 0xF6 => 'o'), ); [/COLOR][/B][/FONT] [B][COLOR=Yellow]yine aynı dizinde yer alan x01.php dosyasını açarak son satırını aşağıdaki gibi değiştirin: [/COLOR][/B] [FONT=monospace][B][COLOR=Yellow] 'tr' => array(0x30 => 'I', 0x31 => 'i', 0x1E => 'G',0x1F => 'g', 0x5E => 'S', 0x5F => 's'), );[/COLOR][/B][/FONT] [B][COLOR=Yellow]

Imagecache dosya isimlerinde Türkçe karakter dönüşümü

Imagecache eklentisi ile yüklenen bir resmin farklı boyutlardaki versiyonlarını oluşturulabilirsiniz. Fakat resmin adında boşluklar ve Türkçe karakterler olması durumunda hatalarla karşılaşmanız mümkün. Dolayısıyla bu sorunu Transliteration eklentisi ile çözebilmeniz için bir yöntem önerilmiş durumda. Bunun için yapmanız gerekenler şöyle:
Not: Yöntem 5.x sürümü için yazılmış. Drupal 6.x'te de aynı sorunla karşılaşıyorsanız deneyebilirsiniz.

Transliteration eklentisini kurun.

imagecache eklenti klasöründe yer alan imagecache.module dosyasını not defteriyle açıp aşağıdaki satırları bulun

Kod:

[/COLOR][/B] [*][FONT=monospace][B][COLOR=Yellow]function theme_imagecache($namespace, $path, $alt = '',$title = '', $attributes = NULL) { $attributes = drupal_attributes($attributes); $imagecache_path = file_create_url(file_directory_path().'/imagecache/'. $namespace .'/'. $path); return '<img src="'. $imagecache_path .'" alt="'.($alt) .'" title="'. check_plain($title) .'" '.$attributes .' />'; check_plain } [/COLOR][/B][/FONT] [*][B][COLOR=Yellow]bu şekilde değiştirip kaydedin [/COLOR][/B] [FONT=monospace][B][COLOR=Yellow]function theme_imagecache($namespace, $path, $alt = '',$title = '', $attributes = NULL) { $attributes = drupal_attributes($attributes); if (module_exists('transliteration')) $imagecache_path = file_create_url(file_directory_path().'/imagecache/'. $namespace .'/'.($path)); else $imagecache_path = file_create_url(file_directory_path().'/imagecache/'. $namespace .'/'. $path); return '<img src="'. $imagecache_path .'" alt="'.($alt) .'" title="'. check_plain($title) .'" '.$attributes .' />'; transliteration_get check_plain }[/COLOR][/B][/FONT] [/LIST] [B][COLOR=Yellow]

The Cry · 22 Ara 2010

Site Arayüzündeki İngilizce Kelimeleri Türkçeleştirme

Drupali kurduk, Türkçe dil dosyalarını yükledik ama hala ingilizce çıkan kelimeler canımızı sıkmaya devam ediyor. Fazla canımız sıkılmadan bu kelimeleri beraberce Türkçe yapalım.
Sitemizde ingilizce olan bir kelimeyi belirleyelim.
"more tags" kelimemizi değiştirmek için yönetim menülerinden site kurulumu->arayüzü çevir->ara penceresini açıyoruz.
Arama kutusuna "more tags" (Büyük küçük harfe duyarlıdır) kelimemizi giriyoruz, resimdeki gibi alt ayarlarını seçerek ara butonuna basıyoruz.
Kelime bulunduğunda diller bölümünde "tr" üzerinde çizgi göreceksiniz, bu demek oluyorki bu kelime değişkeni Türkçeye çevrilmemiş henüz. Düzenle bağlantısına tıklıyoruz.
Yazı düzenleme bölümünden Türkçe karşılığını giriyoruz, ben "Devamı..." şeklinde girdim. Tamam butonuna tıklayarak işlemimizi tamamlıyoruz.
Şimdi değiştirdiğimiz kelimenin sitemiziz belleğine alınabilmesi için varolan belleği temizlemeliyiz. Bunun için yönetim menüsünden site ayarları->performans penceresini açıyoruz. Burada altta bulunan "önbelleği sil" butonuna tıklıuoruz.
Artık değiştirdiğimiz kelime sitemizde görünecektir.
Türkçemize sahip çıkalım boş yere İngilizce kelimeler sitelerimizde yer almasın.
Yazının resimli haline buradan ulaşabilirsiniz.

The Cry · 22 Ara 2010

İlgilendiğim içerikleri nasıl takip edebilirim?

Sitemizde açtığınız konulara yazılan cevapları veya ilgilendiğiniz konulardaki son gelişmeleri takip edebilmeniz için şu seçenekler mevcuttur:

İçeriklerim : Üyenin kendi oluşturduğu içeriklerin listesini sunar; kullanıcı hesabı sayfasındaki İçeriklerim sekmesinden ulaşılabilir.
Dahili takip : Üyenin oluşturduğu içeriklerin yanı sıra yorum yazmış olduğu diğer içerikleri de listeler; kullanıcı hesabı sayfasındaki Takip et sekmesinden ulaşılabilir.
Sık kullanılanlar : Üyenin içeriklerin altında yer alan "sık kullanılanlara ekle" bağlantısına tıklayarak işaretlediği içerikleri listeler; kullanıcı hesabı sayfasındaki Sık kullanılanlar sekmesinden ulaşılabilir.
E-posta bildirisi: Bu şekildeki bir takip için, bir konuya cevap yazarken mesaj kutusunun hemen altındaki Bu konuya yapılan yeni yorumları e-posta ile bildir seçeneğini işaretlemeniz yeterli. Böylece bu konuya yapılacak yeni yorumlar sitemize kaydolurken belirttiğiniz e-posta adresinize bildirilecektir.

The Cry · 22 Ara 2010

Drupal, GPL lisansıyla dağıtılan, açık kaynak kodlu bir içerik yönetim platformu*dur. Drupal ve beraberindeki eklentileri kullanarak, kişisel blog sitelerinden şirket sitelerine, içeriği katılımcı kullanıcılar tarafından oluşturulan yeni nesil sosyal ağ sitelerine kadar çok çeşitli amaç ve ihtiyaçlara uygun siteler geliştirmeniz mümkündür. *Türkçe ve ingilizce kaynaklarda içerik yönetim sistemi (İYS), content management system (CMS), content management framework gibi terimler de kullanılmaktadır.
Geçmiş & Gelecek
TurkHackTeam.Net - The Cry
Drupal, Dries Buytaert tarafından 2000li yılların başlarında bir forum sistemi olarak geliştirilmeye başlamış ve zaman içinde gelişerek güçlü ve esnek bir içerik yönetim platformu halini almıştır. Dries Buytaert, hala Drupal projesinin başındaki isim olmakla birlikte, geçtiğimiz yıl içinde 7 milyon dolarlık bir risk sermayesi kullanarak Acquia şirketini kurmuştur. Acquia, ticari Drupal hizmetleri sunarak Drupal'in gelişimine destek olmakta ve bir bakıma Drupal'in geleceğini güvene almaktadır.

Drupal ile ilgili resmi çalışmalar d ru p a l .o r g sitesi üzerinden yürütülmektedir. drupal.org, 350bin civarı üyeye ve Drupal projesine ev sahipliği yapmasının yanı sıra, sayıları binlerle ifade edilen ve çok çeşitli özellikler sunan Drupal eklentilerini ve temalarını da barındırmaktadır. Drupal eklentileri, paylaşımı seven Drupal kullanıcıları tarafından geliştirilip karşılıksız olarak Drupal topluluğunun kullanımına sunulmaktadır. drupal.org sitesinde bulunan tüm eklenti ve temalar, Drupal projesinin kendisi gibi GPL lisansına sahiptir. Bu, tüm eklentilerin ücretsiz olarak sunulduğu anlamına gelmektedir.
Rekabet
TurkHackTeam.Net - The Cry

Günümüzde birçok internet sitesinin temelinde içerik yönetim sistemleri yer almaktadır. Web tasarımcıları ve yöneticilerinin gösterdikleri yoğun ilgi ve değişken ihtiyaçlar sebebiyle, bu alanda birçok alternatif sistem geliştirilmiştir. Bu sistemlere örnek olarak ülkemizde de oldukça popüler olan açık kaynak kodlu Joomla, MKPortal, PHPNuke sistemlerini ve daha çok blog sitelerinde tercih edilen Wordpress'i gösterebiliriz. TurkHackTeam.Net - The Cry
Drupal, Türkiye'de henüz hak ettiği ilgiyi görememiş olsa da yurt dışında oldukça popüler bir sistemdir. Bu durum, son yıllarda aldığı ödüller ile de açıkça belgelenmiştir. İYS'ler ve diğer konularda kitaplar yayınlayan Packt Publishing, kullanıcıların da katılımıyla her yıl Yılın En İyi İYS'sini seçerek ödüllendirmektedir. 2006 yılında verilen ödüllerde, Drupal Joomla'nın ardından 2.lik ödülü alırken, 2007 yılında ise Joomla'yı geçerek Yılın En İyi İYS ödülüne ulaşmıştır. Bu iki sistem 2008 yılı ödüllerinde de finale kalan 5 aday arasında yer almaktadır.
Drupal'i kimler tercih ediyor?

Drupal, sunduğu esneklik sayesinde farklı ihtiyaçlara yönelik birçok projede kullanılmaktadır. Projelerinde Drupal'i tercih eden tanınmış isimler arasında DivX, NASA, NATO, Birleşmiş Milletler, Harvard Üniversitesi, Hillary Clinton, Ubuntu, Eclipse, Adobe, Electronic Arts (EA), Playboy, Greenpeace, AOL, Forbes, The Onion, Discovery Channel, BBC, FOX, Warner Bros, CBC, Yahoo, Novell, Sun Microsystems, MotoGP, FedEx, Nike, Second Life, Playstation, Sony, Universal Music, Britney Spears, Jennifer Lopez, Avril Lavigne, ****llica, Led Zeppelin, Ozzy Ousborne, MTV, Moby, Pink, R.E.M., Bob Dylan ve daha birçokları var.
TurkHackTeam.Net - The Cry

HalidBinVelid · 6 Eki 2011

Teşekkürler

The Cry' Alıntı:
Daha önceki aşamada sayfalandırma ile ilgili bazı temalar seçmiştik. Bu tema dosyalarını buradan indirdikten sonra içindeki custom klasörünü kullandığımız tema klasörüne taşımamız gerekiyor.
HAZIR DOSYA: 2. ve 4. aşamaları içerik aktarma yoluyla geçtiyseniz ya da anlatımdaki örneği kendiniz birebir uyguladıysanız aşağıda anlatılan preprocess fonksiyonları ile ilgili işlemleri yapmak yerine buradaki kodları kullandığınız temanın template.php dosyasına kopyalayın. Kod orjinal olarak Garland teması için hazırlandığından başka bir tema kullanıyorsanız koddaki her iki fonksiyonun isimlerinde geçen “garland” kelimesini kullandığınız temanın adıyla değiştirmeyi unutmayın. Bu işlemleri yaptıktan sonra doğrudan 7. aşamaya atlayabilirsiniz.

Buradan kopyalacayacağımız kodların tamamını kullandığımız temanın dizininde bulunan template.php dosyasının içine (sonuna) yapıştırıyoruz. Bunu yaparken kodda geçen [THEME_NAME] kısımlarını temamızın makine adıyla değiştirmemiz gerekiyor. Örneğin Garland'a aktarıyorsak:

[THEME_NAME]_preprocess_ddblock_cycle_block_content --->garland_preprocess_ddblock_cycle_block_content
[ THEME_NAME]_preprocess_ddblock_cycle_pager_content --->garland_preprocess_ddblock_cycle_pager_content

Taşıdığımız bu fonskiyonlarda ayrıca görünüm ve alan isimleri de farklı (ingilizce). Bunları kendi örneğimizde kullandığımız görünüm adı ve alan isimlerine göre değiştirmemiz gerekiyor. Bunun için aşağıda gösterilen değişikleri yapacağız.
UYARI! Anlatımdaki örnekten görünüm adı ve cck alan adları olarak farklı birşeyler yaptıysanız bu değişiklikleri aynen uygulamanız sorun yaratacaktır. Bu yüzden aşağıdaki değişiklikleri yapmandan önce koddaki her iki fonksiyonda da ikişer tane bulunan drupal_set_message ile başlayan satırların önlerindeki “//” kısımlarını silin ve slideshow'un görüntülenmesi gereken herhangi bir sayfayı ziyaret edin. Bu sayfanın üstünde sizin slideshow'unuz için tanımlı olan değişkenleri listesi yer alacaktır. Aşağıdaki değişiklikleri de bu listedeki değişkenleri kullanarak gerçekleştirin.

Fonksiyonlarda yapılması gereken değişikler şöyle:
bul:
if ($vars['settings']['view_name'] == 'news_items') {
değiştir:
if ($vars['settings']['view_name'] == 'sunumlar') {
bul:

if(isset($result->node_data_field_pager_item_text_field_image_fid)){
// get image id
$fid =$result->node_data_field_pager_item_text_field_image_fid;

değiştir:
if(isset($result->node_data_field_sunum_kisa_baslik_field_sunum_resim_fid)){
// get image id
$fid =$result->node_data_field_sunum_kisa_baslik_field_sunum_resim_fid;

bul:
// add slide_text variable
if(isset($result->node_data_field_pager_item_text_field_slide_text_value)){
$slider_items[$key1]['slide_text'] =($result->node_data_field_pager_item_text_field_slide_text_value);
} check_markup

değiştir:
// add slide_text variable
if(isset($result->node_data_field_sunum_kisa_baslik_field_sunum_kisa_govde_value)){
$slider_items[$key1]['slide_text'] =($result->node_data_field_sunum_kisa_baslik_field_sunum_kisa_govde_value);
} check_markup

bul:
if ($vars['pager_settings']['view_name'] == 'news_items') {
değiştir:
if ($vars['pager_settings']['view_name'] == 'sunumlar') {
bul:
foreach ($vars['content'] as $key1 => $result) {
if(isset($result->node_data_field_pager_item_text_field_image_fid)){
$fid =$result->node_data_field_pager_item_text_field_image_fid;

değiştir:
foreach ($vars['content'] as $key1 => $result) {
if(isset($result->node_data_field_sunum_kisa_baslik_field_sunum_resim_fid)){
$fid =$result->node_data_field_sunum_kisa_baslik_field_sunum_resim_fid;

bul (benim kullandığım dosyada bundan 4 tane vardı; hepsini aynı şekilde değiştirdim):
$result->node_data_field_pager_item_text_field_pager_item_text_value
değiştir:
$result->node_data_field_sunum_kisa_baslik_field_sunum_kisa_baslik_value

Ben bu işleme çok uğraştım, zman harcadım başaramaıştım tam, bu tema düzenleme kısmında tıkanıp kalıyordum. Şimdi Ctrl + D yapıyorum konuyu en kısa sürede yapıcam. Çok teşekküre derim, henüz yapmadım ama bu sefer kesin oldu, kaçarı yok hissi var

.

Tekrar teşekkürler

Drupal | Drupal Hakkında Bilgiler | The Cry | 2011 | Yeni

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

The Cry

Kıdemli Üye

HalidBinVelid

Yeni üye

Sosyal medya sayfalarımız