Forum'da ara:
Ara


Yazar Mesaj
Mesaj19.02.2010, 14:24 (UTC)    
Mesaj konusu: Formları şekillendirmek

1- Yorum Kısmını Şekillendirmek:
1.Adım: Öncelikle yorumların sitemizdeki kodu bu şekildedir;
<form method="POST" action="index.htm#comment">
<table>
<tbody>
<tr style="text-align: left;"><td>İsminiz:</td><td><input type="text" style="width: 150px;" name="modulenter[name]" value=""/></td></tr>
<tr style="text-align: left;"><td>E-mail adresiniz:</td><td><input type="text" style="width: 150px;" name="modulenter[email]" value=""/></td></tr>
<tr style="text-align: left;"><td>Siteniz:</td><td><input type="text" style="width: 150px;" name="modulenter[url2]" value=""/></td></tr>
<tr style="text-align: left;"><td>Mesajın:</td><td><textarea style="width: 250px; height: 100px;" rows="" name="modulenter[text]" id="kommentartext"/></td></tr>
</tbody>
</table>
</form>

2.Adım: Biz burdaki "form"u şekillendirecez...(Bir arkaplan resmi hazırlamamız gerekir.Benim kullandığım: http://img16.imageshack.us/img16/894/yorumkis.gif)
Bunu için bir css kodu hazırlayalım;
Kod:
form {
background: url(ArkaplanResimUrl'si) no-repeat ;
padding: 1px;
border: 1px dashed red;
margin-right: 1px}


Bu kodu css kısmına yapıştıralım ve bakalım ne olucak




Bizimki bur resim

Tam Boyut: http://img16.imageshack.us/img16/894/yorumkis.gif


2-Yorum Arkaplanını şekillendirmek:

Bu kodu tasarım üstüne ekle yorumunuz bizim ki gibi olsun. Yani YORUMUNUZ İÇİN TEŞEKKÜRLER.GÖRÜŞÜNÜZ BİZİM İÇİN ÇOK DEĞERLİ.







Kod:
<style> #kommentartext { background-image:url(http://img.webme.com/pic/b/bilgi-world/commentt2.jpg); } </style>


Ama siz bu resimi değiştirip yenisini koyabilirsiniz:
http://img.webme.com/pic/b/bilgi-world/commentt2.jpg bunun yerine kendi urlnizi yazabilirsiniz..

3-=>Kutucukları Renklendirme:
Bu kod sayesinde Z.Defteri,Yorum ve Iletişim extralarındaki yorum bölümü hariç butonların renklenmesini sağlayacaktır..

[img]http://img45.xooimage.com/files/8/7/e/ders-181df83.png[img/]

Sitemizdeki Kod:

Kod:
<style type="text/css"> input { color: #551A8B; border: 2px dashed #551A8B; padding: 2px; background-image: url(http://img23.xooimage.com/files/6/8/5/yorumkutucuk-181dce6.gif); margin-right: 1px; font-family:Tahoma, "Century Gothic"; font-size:15px; } </style>


Düzelterek Eklemeniz gereken Kod:

Kod:
<style type="text/css"> input { color: #Yazı Rengi; border: Kenar Büyüklüğü px dashed #Kenarlık Rengi; padding: Yükseklik px; background-image: url(Arkaplan Resimi); margin-right: 1px; font-family:Tahoma, "Century Gothic"; font-size:Yazı Boyutupx; } </style>


4-Kod Alanını Şekillendirmek:



Kod:
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}
-->
hr {    border: 0;
    border-top: 1px solid #000;
    color: white;}
tt {
    background: #F2F2F2 ;
    border: dotted 1px #D7D7D7;
    padding: 5px 5px 5px 5px;
font-size:12px
}

code {
    margin : 4px 8px;
    padding : 8px;
    text-align : left;
    display : block;
    overflow : auto;
    font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
    background: #f8f4f1 url(Buraya Sağ Üst Tarafa Gelecek Olan Resim Url) right top no-repeat;
    border : 1px dashed #D7C3C3;
}


Ardından resim urlsi bölümünede resminizin url adresini ekleyiniz..


Ardındanda kodu eklemek için şu resmi takip edin.

[img]http://img.webme.com/pic/w/wwebw/untitled.bmp[img/]

NOT: RESİM ALINTIDIR.KENDİMİZE AİT DEĞİLDİR..

Yukarıdaki gibi Computer Code yi tıklayıp; Yazımızı yazdıktan sonra işlem tamamdır..
Mesaj19.02.2010, 16:19 (UTC)    
Mesaj konusu:

16 görüntü 0 yorum..
Mesaj19.02.2010, 16:25 (UTC)    
Mesaj konusu:

Çok Yararlı Bir Paylaşım.Çok Teşekkürler.
______________
Mesaj19.02.2010, 16:52 (UTC)    
Mesaj konusu:

Tşk..
Mesaj19.02.2010, 17:00 (UTC)    
Mesaj konusu:

teşekkürler..
______________
Mesaj19.02.2010, 18:20 (UTC)    
Mesaj konusu:

dostum bunların hepsini ben paylaştım xd

şu kodu n bile ice blue tasarım kullanırken kaynaktan alındıgı bellidir..

Kod:
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}
-->
hr {    border: 0;
    border-top: 1px solid #000;
    color: white;}
tt {
    background: #F2F2F2 ;
    border: dotted 1px #D7D7D7;
    padding: 5px 5px 5px 5px;
font-size:12px
}

code {
    margin : 4px 8px;
    padding : 8px;
    text-align : left;
    display : block;
    overflow : auto;
    font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
    background: #f8f4f1 url(Buraya Sağ Üst Tarafa Gelecek Olan Resim Url) right top no-repeat;
    border : 1px dashed #D7C3C3;
}


asadas en baştaki table kodları ice blue tasarımını genişletmk için kullanılır... ayrıca kod alanı ile ilgisi yoktu.. ha ayrıca bu kod alanı değildir...kod alanını şekillendirmek değildir. bunu biz yaratıyoruz zaten..
+hr seçicisini ne işi orda demicem ben kodyum zaten...konuyu kilitleyin lütfen
______________
Özel mesajlara bakmıyorum bile...
Mesaj19.02.2010, 20:48 (UTC)    
Mesaj konusu:

Olabilir bir def daha paylaşıyım dedim
Mesaj20.02.2010, 08:14 (UTC)    
Mesaj konusu:

wwebw yazmış:
Olabilir bir def daha paylaşıyım dedim


asdas saçmalama :S bu verdiklerinde gereksiz kodlar var...ben paylaştım hem bunları :S
______________
Özel mesajlara bakmıyorum bile...
Mesaj20.02.2010, 08:17 (UTC)    
Mesaj konusu:

hyperend yazmış:
wwebw yazmış:
Olabilir bir def daha paylaşıyım dedim


asdas saçmalama :S bu verdiklerinde gereksiz kodlar var...ben paylaştım hem bunları :S



haklısın kardeş sen paylaşmıştın..
______________
Mesaj20.02.2010, 08:41 (UTC)    
Mesaj konusu:

Forum Kirliliği Smile
______________
Mesaj20.02.2010, 09:08 (UTC)    
Mesaj konusu:

mega-ipek yazmış:
Forum Kirliliği Smile



xD
______________
Mesaj20.02.2010, 09:48 (UTC)    
Mesaj konusu:

Boş boş mesajlar yazıp forumu kirletmeyin... Wink
Ayrıca bu konu paylaşılmıştır...Arama bölümünde araştırmanız gerekirdi...

______________
Aşağıdaki yazı fontunun adı Angilo Tatto'dur. Gelen mesajlara istinaden yazdım Smile
Mesaj20.02.2010, 11:33 (UTC)    
Mesaj konusu:

Eyy bidaa olmas..
Mesaj20.02.2010, 11:55 (UTC)    
Mesaj konusu:

güzelmiş wwebw
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu