Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj07.06.2015, 22:15 (UTC)    
Mesaj konusu: Ziyaretçi Defterini Yeniden Tasarlayın -Kodlar-

Ziyaretçi Defteri ekstrası için kullanılan CSS id ve class'ları paylaşacağım. Bunları kullanarak ziyaretçi defteri ekstrasına yeni bir görünüm katabilirsiniz.

Aşağıdaki ID/CLASS etiketlerine stil ekledikten sonra, Ziyaretçi Defteri ekstrası altındaki "Ziyaretçi defterinden önceki metin" bölümüne ekleyerek kullanabilirsiniz.

1.1- Ziyaretçilerin metin girişi yapacakları alanlar için;
Kod:
textarea { }

1.2- Ziyaretçiler fare ile metin girişi yapacakları alanın üzerine geldiğinde;
Kod:
 textarea:hover { }

1.3- Ziyaretçiler metin girişi yapılacak alana tıkladığında (odaklanma);
Kod:
 textarea:focus { }

1.3- Ziyaretçilerin metin girişleri için);
Kod:
 input[type="text"] { }


2- Ziyaretçi defterindeki sayfa yönlendirme bölümü (bkz: <-Geri - 1 - 2 - Devam-> ) için
Kod:
 td[width="33%"] { }


3- Eğer yorum yapan kişi Bedava-Sitem üyesi ise, Online veya Offline olduğunu belirten bölüm için;
3.1- Eğer online ise;
Kod:
 font[color="green"] { }

3.2- Eğer offline ise;
Kod:
 font[color="red"] { }


4.1- İsim, mesaj vb. kısımlarını içeren bölüm için;
Kod:
 form { }

4.2- İsim, mesaj vb. kısımlarını içeren bölümün üzerine geldiğinde;
Kod:
 form:hover { }


5.1- Gönder butonu için;
Kod:
 input[type="submit"] { }

5.2- Gönder butonunun üzerine geldiğinde;
Kod:
 input[type="submit"]:hover { }

5.3- Gönder butonu aktif iken;
Kod:
 input[type="submit"]:active { }


6- Ziyaretçinin mesaj yazacağı alan için;
Kod:
 #kommentartext { }


9- Ziyaretçinin yazdığı mesajın yayınlandığı alan için;
Kod:
 table[width="80%"] { }

Kod:
 table:hover[width="80%"] { }


8- Ziyaretçinin yazdığı mesaja cevap vermek için;
8.1. CSS DOSYASI Stil dosyasının içinde yer alacak.
Kod:
 .Kommentar { }

Kod:
 .Kommentar:hover { }


8.2. HTML DOSYASI Ziyaretçi Defteri Ekstrası > Kaydı Değiştir > Değiştirmek İstediğiniz Kayıt içindeki Yorum bölümüne eklenecek
Kod:
 <div class="Kommentar"> Buraya yorumunuz gelecek. </div>


----> 9- ÖRNEK KOD <---
Ziyaretçi Defterinden Önceki Metin kısmına eklenebilecek örnek kod:
Kod:

<style type="text/css">
textarea {
width: 340px;
height: 140px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
border: 1px solid #C9C9C9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
color: #555555;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 1em;
line-height: 1.4em;
padding: 5px 8px;
transition: background-color 0.2s ease 0s;
}

textarea:hover {}
textarea:focus {
background: none repeat scroll 0 0 #transparent;
color:#990000;
outline-width: 0; }

td[width="33%"] {
padding: 1px;
padding-bottom:0px;
background-color: #fff;
border: 1px solid #c9c9c9;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px; }

font[color="green"]{ background:url(http://img.webme.com/pic/b/bab-hunk/onlineuser.png) no-repeat right #FFFFFF; padding-right:18px; border:1px dashed; text-shadow: 1px 1px 1px rgb(242, 242, 242); background-color:#DEEEC6; -moz-border-radius:6px; -khtml-border-radius:6px; A{ text-decoration : none; } }

font[color="red"]{ background:url(http://img.webme.com/pic/b/bab-hunk/offlineuser.png) no-repeat right  #FFFFFF; padding-right:20px; border:1px dashed; text-shadow: 1px 1px 1px rgb(242, 242, 242); background-color:#FF9999; -moz-border-radius:6px; -khtml-border-radius:6px; A{ text-decoration : none; } }

form {
width: 90%;
padding: 20px;
margin: -30px 0px 10px 0px;
border: 1px solid #c9c9c9;
border-radius: 8px;
background-color: #FFFFFF;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease; }

form:hover {
background-color: #CCCCCC;
min-height: 100%;
color: #990000;
border: 1px solid #648479; }

input[type="text"] {
color:#555555;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
width: 340px;
padding:5px;
border: 1px solid #c9c9c9;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; }

input[type="text"]:focus {
background: none repeat scroll 0 0 #transparent;
padding:5px;
color:#990000;
outline-width: 0; }

form img {margin: 0px 3px 10px 3px;}

#kommentartext {
height: 50px!important;
margin-bottom: 25px;
border: 1px solid #c9c9c9; }

input[type="submit"] {
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
}

input[type="submit"]:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

input[type="submit"]:active {
color: #000;
border-color: #444;
}

table[width="80%"] {
width: 100%;
padding: 10px 20px 20px 20px;
margin: 10px auto 5px auto;
background-color: #FFFFFF;
border: 1px solid #c9c9c9;
border-radius: 8px; }

table:hover[width="80%"] {
background-color: #eeeeee;
width: 100%;
margin: auto;
padding: 20px;
border-bottom: 3px solid #71950f;
}

.Kommentar{
font-size: 13px;
width: 340px;
padding: 15px;
background-color: #eeeeee;
border: 1px solid #c9c9c9;
border-radius: 8px; }

.Kommentar:hover{
color: #F4FAED;
background-color: #2F2727;}
</style>


İyi forumlar...
______________


En son slobada tarafından 24.06.2015 10:44:00 tarihinde değiştirildi, toplam 2 kere değiştirildi
Mesaj08.06.2015, 10:57 (UTC)    
Mesaj konusu:

Sağ ol.
Mesaj08.06.2015, 14:29 (UTC)    
Mesaj konusu:

Örnek kodu denedim olmadı. Sadece gönder butonu görünüyor. Onun dışında hiçbir şey görünmüyor. Kodu düzelteceğiniz zaman güzel olacağını düşünüyorum.


En son denekegenclik tarafından 08.06.2015 14:31:58 tarihinde değiştirildi, toplam 2 kere değiştirildi
Mesaj09.06.2015, 16:52 (UTC)    
Mesaj konusu:

chatmuch yazmış:
Sağ ol.

Rica ederim.

denekegenclik yazmış:
Örnek kodu denedim olmadı. Sadece gönder butonu görünüyor. Onun dışında hiçbir şey görünmüyor. Kodu düzelteceğiniz zaman güzel olacağını düşünüyorum.

Uyarınız için teşekkür ederim. Örnek kod içerisinde <style> etiketini kapatmayı unutmuşum. Şimdi düzelttim.
______________


En son slobada tarafından 24.06.2015 10:43:40 tarihinde değiştirildi, toplam 1 kere değiştirildi
Önceki mesajları göster:   


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