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;
1.2- Ziyaretçiler fare ile metin girişi yapacakları alanın üzerine geldiğinde;
1.3- Ziyaretçiler metin girişi yapılacak alana tıkladığında (odaklanma);
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
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;
4.2- İsim, mesaj vb. kısımlarını içeren bölümün üzerine geldiğinde;
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;
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: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
|
