Skip to Content
Anasayfa » Tema Kullanım ve Geliştirme

Kullanıcı giriş formunu özelleştirmek

cihan, Çrş, 10/02/2010 - 10:16 tarihinde.

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

Ekran_Goruntusu.jpg

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):

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

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):

//USER LOGIN BLOK KODLARININ BAŞLANGICI
function user_bar() {
  global $user;
  $output = '';
  if (!$user->uid) {                                                          
$output .= drupal_get_form('user_login_block');                         }                                                             else {                                                             $output .= t('<p class="user-info"> Hoşgeldin !user.</p>', array('!user' => theme('username', $user)));
$output .= theme('item_list', array(
      l(t('Hesabına Bak'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
      l(t('Çıkış Yap'), 'logout')));
  }
  $output = '<div id="user-bar">'.$output.'</div>';
  return $output;
}
//USER LOGIN BLOK KOD BITISI

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.

void_main, Sal, 23/02/2010 - 17:27 tarihinde.

kolay gelsin;
bu stili denerken hata ile karşılaştım. Sanırım başta parantez içerisinde belirttiğiniz durum olabilir. Hiçbir değişiklik yapmadan template.php içerisine belirttiğiniz kodları attım hata verdi, bende bu kodların başına <?php ekleyerek

<?php
function user_bar() {
global user;
$output = '';
if (!$user->uid) {
$output .= drupal_get_form('user_login_block'); } else { $output .= t(' Hoşgeldin !user.', array('!user' => theme('username', $user)));
$output .= theme('item_list', array(
l(t('Hesabına Bak'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
l(t('Çıkış Yap'), 'logout')));
}
$output = ''.$output.'';
return $output;
}
?>

değişen birşey olmadı yine hata verdi...
Aklıma takılan ikinci şey ise; page.tpl.php sayfasında div içerisine <?php print user_bar() ?> ekleyin demişsiniz. Burda o kadar div ile başlayan satır varki rastgele biryere (div blogu içinde) kodladım. Bu dosyada hata vermediğine göre problem yok sanırım. Ama template.php deki hataya yardım ederseniz sevinirim...

cihan, Sal, 23/02/2010 - 17:31 tarihinde.

Oluşan hata ile bilgi verirseniz yardımcı olabilirim hata mesajı nedir?

Ek olarak, nerde görünmesini istiyorsanız o div içersine kodu koymalısınız. divlerle ilgili herhangi bir fikriniz yok ise diğerlerinide yapmayın derim. En ufak bir kodlama bilginiz yok ise zorlanırsınız. Genede yardımcı olmak isteriz tabi.

void_main, Sal, 23/02/2010 - 17:49 tarihinde.

div i anladım sanırım zaten comment ler var orda kurcalamaya çalışacağım...
hata
Parse error: parse error, expecting `T_VARIABLE' or `'$'' in C:\Program Files\EasyPHP5.3.0\www\metanetbilisim\sites\all\themes\zeropoint-6.x-1.9\zeropoint\template.php on line 719

kodunuzu olduğu gibi ekledim <?php yazmadım başına ve hatanın olduğu line ı yazıyorum
718----function user_bar() {
719----global user;
720----$output = '';

cihan, Çrş, 24/02/2010 - 10:26 tarihinde.

global user; bölümünü global $user; olarak değiştirdiğinde sorun düzelir.

Mikuru, Çrş, 14/04/2010 - 21:46 tarihinde.

Teşekkürler. Biraz geliştirebilmek için bir soru sormak istiyorum acaba kodlarda oynama yaparak "HESABA BAK" yerine kullanıcının sahip olduğu adın yazmasını nasıl sağlayabiliriz.

$output .= t('<p class="user-info"> Hoşgeldin !user.</p>', array('!user' => theme('username', $user)));
$output .= theme('item_list', array(
      l(t('Hesabına Bak'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
      l(t('Çıkış Yap'), 'logout')));
  }
  $output = '<div id="user-bar">'.$output.'</div>';
  return $output;
}

cihan, Çrş, 14/04/2010 - 21:58 tarihinde.

t('Hesabına Bak')

kısmını

$user->name olarak değiştirin.

l($user->name, 'user/'.$user->uid, array('title' => t('Profil sayfanız'))),

şeklinde.

Mikuru, Çrş, 14/04/2010 - 22:04 tarihinde.

Çok teşekkürler

Mikuru, Per, 15/04/2010 - 00:51 tarihinde.

aynı şekilde

l($user->name, 'user/'.$user->uid, array('title' => t('Profil sayfanız'))),

satırındaki name kısmını picture yaparak kullanıcının resmini gösternek istedim ancak olmadı. Görünen alanda resmin adresi çıkıyor ancak resim görünmüyor. Ne yapmam gerekiyor?

cihan, Per, 15/04/2010 - 15:06 tarihinde.

Hımm pardon acele ile yanlış yazmışım. aşağıdaki kodu deneyebilir misiniz.

l(theme('user_picture', $user);, 'user/'.$user->uid, array('title' =>  t('Profil sayfanız'))),

değiştirildi.

Mikuru, Per, 15/04/2010 - 16:36 tarihinde.

maalesef olmadı resim yerine görünmesi gerekn yerde  <img src=width=100px height=100px /> ifadesi yazıyor. :(

cihan, Per, 15/04/2010 - 16:48 tarihinde.

l(theme('user_picture', $user);, 'user/'.$user->uid, array('title' => t('Profil sayfanız'))), olarak yaptığınızda nasıl o yazar anlamış değilim...

Pek vaktim yok araştırmaya google da print user picture drupal şeklinde aratıp verilen kodları incelersen bir çözüm bulabilirsin.

Mikuru, Per, 15/04/2010 - 18:57 tarihinde.

Sanırım sonradan verdiğiniz kodu değiştirmişsiniz. Değiştirdiğinizi de denedim ancak bu defa

Parse error: syntax error, unexpected

Ben farklı bir yöntemle halletmeye çalışacağım . Teşekkür ederim

cihan, Per, 15/04/2010 - 19:13 tarihinde.

evet değiştirmiştim. değiştiğimi not düşmüştüm ama gözden kaçmış olabilir. Şimdilik araştıracak vaktim yok xml ile uğraşmaktayım. Sen dediğim şekilde araştır bulamazsan ileride gene yardımcı olmaya çalışırım.

Mikuru, Çrş, 21/04/2010 - 15:33 tarihinde.

PROFİL ---- ÇIKIŞ

Bu iki bağlantı arasına İÇERİK OLUŞTUR bağlantısı nasıl ekleyebilirim. Yani PROFİL-İÇERİK OLUŞTUR- ÇIKIŞ haline nasıl getirebilirim. PHP bilgim hiç olmadığı için yapamadım.

cihan, Per, 22/04/2010 - 00:21 tarihinde.

menu kullanarak yola add/node ve benzeri şekilde kullanabilirsin.

hunanka, Pzr, 25/04/2010 - 20:23 tarihinde.

Kutucukları koydum. Giriş çıkış yapılıyor artık, çok teşekkürler ederim.
Ancak sorunum şu: Bu kutucuğa mause geldiğinde title ile belirtilen etiketlerden çıkmasını ve orada da "Kullanıcı adınızı giriniz." "Şifrenizi giriniz." Gibi yardım metinleri çıkmasını istiyorum.
Bunu CSS ile yapamayacağımı biraz araştırma sonucu anlamış bulunmaktayım. Bu nasıl olabilir?
Şimdiden yardım eden arkadaşlara teşekkürler ederim.
Kolay gelsin...

cihan, Pzr, 25/04/2010 - 20:32 tarihinde.

Bunu kolay yapan hint eklentisi var ama kendi düzenlediğimiz login formda nasıl olur bilemiyorum.

Kendiniz yapmak istiyorsanız javascript dili ile veya jquery ile yapılabilir. Bence bu özelliği içeren bir drupal teması olan http://drupal.org/project/ninesixtyrobots yi inceleyip içinden ilgili java kütüphanesini alıp kullanmak.

Mikuru, Sal, 27/04/2010 - 15:41 tarihinde.

Hint eklentisi kutucuğun yanındaki metinleri kutucuğun içerisine taşıyor. Ben bunu kodlarda oynayarak hint kullanmadan yapmak istiyorum. Hunanka tam olarak neyi kastetdi bilmiyorum ama benim yapmak istediğim bu. Bildiğim kadarıyla php bilenler için çok basit bir düzenleme. Nasıl yapacağımı söylerseniz çok sevinirim.

NOT: Hint kullanmak istemememin nedeni TAB tuşunda problem çıkarması

cihan, Sal, 27/04/2010 - 20:44 tarihinde.

mikkuru bunun php ile alakası yok javascriptir tamamen bir önceki yorumda yazdığımı uygulayın. Oradaki temada ilgili kodlar mevcut.

hunanka, Sal, 27/04/2010 - 23:21 tarihinde.

@MIKURU benim yapmak istediğim tam olarak aşağıdaki gibi... Mause imleci kullanıcı ismi kutusunun üzerine geldiğinde title komutu ile belirtilen etiketlerden çıkması ve içerisinde "Kullanıcı adınızı giriniz." mesajının gözükmesini istiyorum. Tıpkı ara kutucuğuna geldiğimizde "Aramak istediğiniz terimleri giriniz etiketinin gözüktüğü gibi... Aşağıdaki gibi yapmayı planlamıştım. Not:DDO da böyle bir kutucuk gözükmüyor ama örnek vermek için seçtim.

cihan, Çrş, 28/04/2010 - 00:32 tarihinde.

bunuda jtooltip eklentisini kullanarak kutucuklara title degeri verip gösterebilirsin die düşünüyorum. Olmadı klasit bir tooltip bulup (benim sitemde jquery bölümünde örneği var) onu oraya uyarlayabilirsin.

Mikuru, Çrş, 28/04/2010 - 01:27 tarihinde.

Cihan bahsettiğiniz temanın içerisinde bir javascript dosyası var ve içerisinde sadece şu kodlar mevcut. Sanırım ilgili kodlar bunlar. Ancak ben çok basit bir tema ile yola çıktım ve onu geliştiriyorum ve ana temamda javascript kullanılmadığından böyle bir dosya yok. Bu kodu temamda gösterebilmem için neler yapmam gerekiyor.

$(document).ready(function(){
  $('#search input:text').autofill({
    value: "Search..."
  });
});

Yukarıda gönderme yapılan autofill ile ilgili javascript dosyası ise şu şekilde

// $Id: jquery.autofill.js,v 1.1.4.1 2009/08/05 18:55:54 add1sun Exp $

// Auto-Fill Plugin
// Written by Joe Sak http://www.joesak.com/2008/11/19/a-jquery-function-to-auto-fill-input-fields-and-clear-them-on-click/
(function($){
  $.fn.autofill = function(options){
    var defaults = {
      value:'',
      defaultTextColor:"#ccc",
      activeTextColor:"#000",
      password: false
    };
    var options = $.extend(defaults,options);
    return this.each(function(){
      var obj=$(this);
      obj.css({color:options.defaultTextColor})
        .val(options.value)
        .focus(function(){
          if(obj.val()==options.value){
            obj.val("").css({color:options.activeTextColor});
            if (options.password && obj.attr('type') == 'text') {
              obj.attr('type', 'password');
            }
          }
        })
        .blur(function(){
          if(obj.val()==""){
            obj.css({color:options.defaultTextColor}).val(options.value);
            if (options.password && obj.attr('type') == 'password') {
              obj.attr('type', 'text');
            }
          }
        });
    });
  };
})(jQuery);

NOT: Sanırım sorumun cevabı bir çok kişiye yardımcı olacak :)

Mikuru, Çrş, 28/04/2010 - 01:32 tarihinde.

Kendi sorumun bir kısımını kendim cevapladıktan sonra hemen bir soru ekleyeceğim. Cihan sizin tavsiye ettiğiniz temaya ait js klasörünü olduğu gibi kopyaladıktan sonra temanın info dosyasına ilgili kodları ekleyerek bu js dosyalarını temamda gösterdim ve başarılı oldum. Ancak şimdi kullanıcı giriş formu için de aynısını yapabilecek miyim diye uğraşıyorum. Yapamazsam sizden yardım isteyeceğim :)

Mikuru, Çrş, 28/04/2010 - 18:46 tarihinde.

Arama kutusu için ilgili javascript kodu şu şekilde (Bu çalışıyor)

// Arama kutusu için.
$(document).ready(function(){
  $('#search input:text').autofill({
    value: "ARA"
  });
});

Kullanıcı adı kutusu için uyarladım ve Buda Çalışıyor

// Kullanıcı adı kutusu için.
$(document).ready(function(){
  $('#edit-name-1:text').autofill({
    value: "KULLANICI ADI"
  });
});

Ne yaptıysam şifre ekranı için çalıştıramadım. Normalde şöyle yapınca çalışması gerekir:

// Şifre için.
$(document).ready(function(){
  $('#edit-pass-1:text').autofill({
    value: "ŞİFRE"
  });
});

Fikri olan var mı?

cihan, Çrş, 28/04/2010 - 20:03 tarihinde.

Şifre kutusunun css id si edit-pass-1 mi? Öle ise çalışması lazım.

Mikuru, Çrş, 28/04/2010 - 20:13 tarihinde.

firebug'dan aldığım kadarıyla o şekilde. Aradım ama bu iş için başka bir id bulamadım.

cihan, Çrş, 28/04/2010 - 21:10 tarihinde.

input type olarak password mu girili fgaliba ondan olabilir.

text olan yeri password yaparak bir dener misin
büyük ihtimal yıldızlı görünecek ama yol almış oluruz

Mikuru, Çrş, 28/04/2010 - 22:24 tarihinde.

Söylemeyi unutmuşum ilk mesajımı yazmadan önce onu denedim zaten ve evet yıldızlı görünüyor. Hatta text yerine hiçbirşey yazmadığımda da yıldız halinde görünüyor. Şu anda yıldızlı kullanıyorum.

EDIT: 5 dakikaya kadar aynı yukarıda anlattım gibiydi ancak sayfayı yenilediğimde hiç bir şey yazmadığını farkettim. Halbuki kullanıcı adı kısmında başarılı olmuştum. Şimdi o da gitti anlayamıyorum. Hiç bir değişiklik yapmamıştım oysa. Olan bir şey bir anda nasıl bozulur anlamadım.

NOT: ARA kutusu hala çalışıyor ama diğerleri neden gitti anlayamadım.


EDIT SON DURUM:)

anlayamadığım bir şekilde bahsi geçen id ler yani kullanıcı adı ve şifreye ait idler edit-name-1 ve edit-pass-1 den edit-name ve edit-pass' a dönüşmüş. halbuki ben hiç bir değişiklik yapmamıştım. Gizemli bir olay. Sanırım firebug insanı bazen yanıltabiliyor.

Son durumda hala password kısmında yıldızlar görünüyor onu belirteyim :(

cihan, Çrş, 28/04/2010 - 22:52 tarihinde.

mikuru bırak yıldızlı olsun:) Valla yapacak ne var bilmiyorum açıkcası. Javascriptten bu kadar anlıyorum ben..

Mikuru, Çrş, 28/04/2010 - 23:05 tarihinde.

Yine de size çok teşekkür ederim Cihan, çok yardımcı oldunuz sağolun.

cihan, Çrş, 28/04/2010 - 23:37 tarihinde.

Ben teşekkür ederim mikuru.

hunanka, Per, 29/04/2010 - 00:59 tarihinde.

@MIKURU, edit-name-1 ve edit-pass-1 lerin edit-name ve edit-pass' a dönüşme sebebini bir tesadüf eseri keşfetmiş bulunmaktayım.
Eğer anasayfadaysan bakıyorsanız edit-name ve edit-pass olarak görüyorsunuz.
Yok eğer /user/register sayfasından bakıyorsanız farklı (sanırım edit-name-1 ve edit-pass-1) olarak gözüküyor.)
/user sayfasından bakıyorsanız farklı (sanırım edit-name-1 ve edit-pass) olarak gözüküyor.)
/user/password sayfasından bakıyorsanız farklı görüyorsunuz. (sanırım edit-name ve edit-pass-1) olarak gözüküyor.)
Sanmamın sabebi epey önce bu sorunu yaşadığım içindir. Tekrar kontrol etmedim.

hunanka, Per, 29/04/2010 - 01:29 tarihinde.

Son hali bu şekilde ancak buna rağmen sadece "Kullanıcı Adı" nı tam olarak yazdırabildim. Yıldızlara bile ulaşamadım. Şimdilik son durum bu...
Not: Türkçe karakterlerden dolayı ı harfi görünmüyordu. Buraya türkçe karakterlerin php ve java dosyalar için hangi karşılıklarının olduğunu ekledim. Umarım işe yarar.

// Kullanıcı adı kutusu için.
$(document).ready(function(){
  $('#edit-name-1:text').autofill({
    value: "Kullanıcı Adı"
  });
});

// Şifre için.
$(document).ready(function(){
  $('#edit-pass-1:text').autofill({
    value: "Şifre"
  });
});

// Kullanıcı adı kutusu için.
$(document).ready(function(){
  $('#edit-name:text').autofill({
    value: "Kullanıcı Adı"
  });
});

// Şifre için.
$(document).ready(function(){
  $('#edit-pass:text').autofill({
    value: "Şifre"
  });
});

hunanka, Per, 29/04/2010 - 14:09 tarihinde.

@MIKURU ve @CİHAN yardımlarınız için teşekkür ederim.
@MIKURU sanırım yaşadığımız sorunun ana nedeni şifre alanının karakterleri göstermemeye ayarlanması. Orda yazdığımız karakterler nokta şeklinde geliyor, bence, bu önerme nedeni ile yazılan metin gösterilmiyor olabilir. Ama daha esaslı bir şey bulamadım.

cihan, Per, 29/04/2010 - 14:11 tarihinde.

Hint eklentisinin kodlarına bi baktınız mı ? Birde onu deneyin. Orada nasıl yazdırmışlar.

hunanka, Cmt, 01/05/2010 - 22:37 tarihinde.

Onur Serkan burada DDO da yaptığı düzenlemeyi anlatmış ama ben bakınca sanki bana değişik bir yol gibi geldi. Biz Js ile yaptık o ise PHP üzerinden yapmış sanırım. Bu ikisini birbirine karıştırmak mı iyidir? Yoksa Karıştırmadan PHP ile Onur Serkanın yaptığı gibi mi yapsam? Bilemiyorum... Yardımcı olanlara şimdiden teşekkürler...

cihan, Pzr, 02/05/2010 - 01:02 tarihinde.

Oradaki yöntemi bilmiyordum açıkcası. Onurun verdiği performans açısından daha doğrudur. ek getirilen yük daha azdır.

zuzhulk, Pzt, 10/05/2010 - 14:38 tarihinde.

Cihan teşekkürler çok faydalı oldu. ancak bir sorum var.

Hoşgeldin zuzhulk. yerine
Merhaba zuzhulk, sitemize hoşgeldin. şeklinde bir mesajla nasıl değiştirebilirim

cihan, Sal, 11/05/2010 - 00:12 tarihinde.

$output .= t(' Merhaba !user, sitemize hoşgeldin.',

olarak template.php nin ilk satırını değiştirerek.