Topic: Login Kısmına Sanal Klavye Eklentisi (Basit ve Kullanışlı)

[★ѕραη∂αυєя★]

Bir script sitesinde sanal klavye eklentisi bulmuştum, SMF'ye uyarlayayım dedim ve yukarıda resimdeki sonuç çıktı. Umarım beğenirsiniz.

Anlatıma geçiyorum:

index.template.php açın ve aşağıdaki kodu bulun;

Code: [Select]

// ]]></script>
hemen alt satırında şunu ekleyin;

Code: [Select]

              <script src="', $settings['theme_url'], '/keyboard.js" type="text/javascript" charset="UTF-8"></script>
yine aynı dosyada şunu bulun;

Code: [Select]

<input type="password" name="passwrd" size="10" />
bununla değiştirin;

Code: [Select]

<input class="keyboardInput" type="password" name="passwrd" size="10" id="search" />
style.css açın ve en son satıra şunları ekleyin;

Code: [Select]

#keyboardInputMaster {
  position:absolute;
  border:2px groove #dddddd;
  color:#000000;
  background-color:#dddddd;
  text-align:left;
  z-index:1000000;
  width:auto;
}

#keyboardInputMaster thead tr th {
  text-align:left;
  padding:2px 5px 2px 4px;
  background-color:inherit;
  border:0px none;
}
#keyboardInputMaster thead tr th select,
#keyboardInputMaster thead tr th label {
  color:#000000;
  font:normal 11px Arial,sans-serif;
}
#keyboardInputMaster thead tr td {
  text-align:right;
  padding:2px 4px 2px 5px;
  background-color:inherit;
  border:0px none;
}
#keyboardInputMaster thead tr td span {
  padding:1px 4px;
  font:bold 11px Arial,sans-serif;
  border:1px outset #aaaaaa;
  background-color:#cccccc;
  cursor:pointer;
}
#keyboardInputMaster thead tr td span.pressed {
  border:1px inset #999999;
  background-color:#bbbbbb;
}

#keyboardInputMaster tbody tr td {
  text-align:left;
  margin:0px;
  padding:0px 4px 3px 4px;
}
#keyboardInputMaster tbody tr td div {
  text-align:center;
  position:relative;
  height:0px;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout {
  height:auto;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table {
  height:20px;
  white-space:nowrap;
  width:100%;
  border-collapse:separate;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table.keyboardInputCenter {
  width:auto;
  margin:0px auto;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td {
  vertical-align:middle;
  padding:0px 5px 0px 5px;
  white-space:pre;
  font:normal 11px 'Lucida Console',monospace;
  border-top:1px solid #e5e5e5;
  border-right:1px solid #5d5d5d;
  border-bottom:1px solid #5d5d5d;
  border-left:1px solid #e5e5e5;
  background-color:#eeeeee;
  cursor:default;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.last {
  width:99%;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.alive {
    background-color:#ccccdd;

}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.target {
  background-color:#ddddcc;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.hover {
  border-top:1px solid #d5d5d5;
  border-right:1px solid #555555;
  border-bottom:1px solid #555555;
  border-left:1px solid #d5d5d5;
  background-color:#cccccc;
}
#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.pressed,
#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.dead {
  border-top:1px solid #555555;
  border-right:1px solid #d5d5d5;
  border-bottom:1px solid #d5d5d5;
  border-left:1px solid #555555;
  background-color:#cccccc;
}

#keyboardInputMaster tbody tr td div var {
  position:absolute;
  bottom:0px;
  right:0px;
  font:bold italic 11px Arial,sans-serif;
  color:#444444;
}

.keyboardInputInitiator {
  margin-left:3px;
  vertical-align:middle;
  cursor:pointer;
}

#word{
  font-family: tahoma;
font-weight: bold;
font-size:12px;
border: 1px solid #bdc7d8;
background-color: #fff;
padding: 3px;
width: 316px;
vertical-align: bottom;
}
#name{
width: 150px;
}
#email{
width: 150px;
}
#subject{
width: 150px;
}
Son olarak aşağıdaki rar dosyasını indirin ve içindeki keyboard.js dosyasını tema klasörünüze, keyboard.png resmini de temanızın images klasörüne atın.

Klavye resminin gözükmesi için keyboard.js açın ve şunu bulun;

Code: [Select]

              keybut.src = "http://localhost/smf/Themes/default/images/keyboard.png";
buradaki resim adresini kendinize göre düzenleyin.

Dosyalar: http://www.divshare.com/download/6017186-691

Rar Şifresi: www.forumbol.com

İşlem bu kadar arkadaşlar, hayrını görün

[Alpay]

Hımm güzel , emek harçamıssın peki bir kaç sorum war bu klawye rastgele yer değiştiriyormu tuşları ve tıkladıgımız bölümdeki yere yazmak icin mi klawye tuşuna basıyoruz ?

[★ѕραη∂αυєя★]

Şifre kısmına ister elle yazarsın, ister klavye resmine tıklayıp maus ile resimdeki gibi yazarsın; ikisi de oluyo yani

aynı işlemi kullanıcı adı kısmında da yapabiliriz ama bir klavye resmi daha eklemek zorunda kalırız

[qubbah]

how to put it in the postbox?

[harezm]

teşekkür ederim güzel birşeye benziyor denemek lazım bi ara

[grafitus]

Sanırsam sadece o giriş yerinde çıkıyor, çok kullanışlı Cem Yılmaz deyimiyle "cafcaflı" Eğer iznin olursa bunu paket yapıp yollayacağım Mod Sitesine.Tabiki senin adını yazacağım..

[€®Ю€∏∏----®]

Eline sağlık

[Yağız...]

İlk mesajı okuyun, zaten değiştirmeniz gerektiği yazıyor

Ekteki dosyayı kullanın ve resmi tema klasörünüze atın.

[€®Ю€∏∏----®]

tamam yağız dikkat etmemişim kusurma bakma.. 

[DNA27]

Hımm güzel , emek harçamıssın peki bir kaç sorum war bu klawye rastgele yer değiştiriyormu tuşları ve tıkladıgımız bölümdeki yere yazmak icin mi klawye tuşuna basıyoruz ?

buna cevap gelmemiş ama işbank da var sanal klavye tuslarin yeri değişiyor.
bunu bende merak ettim kurup deneyelim bakalim nasıl çalısıyor .
Ellerine saglık ..

[Hkan]

Çok güzel de bunu Türkçe'ye çevirmek lazım. Sanırım JavaScript dosyasının içinde yer alıyor yazılar. Ben deniyorum, Türkçe dil desteğini de koyarsak çok güzel olur.

[hhmercan]

divshareden dosya indiremiyorum. elinde olan varsa buraya ekleyebilirmi :/

[sevdaligul]

teşekkurler

[hhmercan]

teşekkurler

divshareden dosyayı indirdinizmi ?

[ⓜⓤⓡⓐⓣ]

ie de mozillada indirmeye çalştım indiremedim dosyayı. şimdi dosyayı başka bir yerden buldum. hatta farkettim birisi posta eklemiş yukarda.

ancak style diye bir dosya yok css yi boşverdim aradım yine bulamadım sıfır kurulumun içinde aradım yine bulamadım