زیبا سازی کامنت ها
- نویسنده موضوع amin704
- تاریخ شروع
mahdiali35
کاربر عضو
چه اسکریپتی ؟ یه عکسی ... چیزی ...
راستش من تازه کارم و دارم یک فایل کامنت میسازم.... اسکریپت و اینارو هم نمیدونم........ یه فایلی بود که فکر کم بیشتر اموزشی بود من توش دستکااری کردم ...... این عکسه قسمت نظرات در سایتم :
فایله کامنتو پیوست کردم
اینم کد های css:
فایله کامنتو پیوست کردم
اینم کد های css:
کد:
#comments { border: 2px solid blue;}
.comment-avatar {padding: 10px 10px 10px 10px;float:right}
.{comment-time:text-align:left;float:left}
.comment-content {}
.comment-edit { }
.comment-submit{
height:29px;
width: 40px;
border:1px black solid;
text-align:center; cursor:pointer; font-family:Tahoma, Geneva, arial, sans-serif;
font-size:12px;
margin-top: 20px; }
.comment-submit:hover{ background:#000; color:#FFF;}
.textfield { margin-top:1px; height:40px; position:relative;}
.comments-template #email,.comments-template #url{ direction:ltr;}
You must be registered for see images attach
HamedR
کاربر عضو
replay بصورت پیشفرض روی قالب هست!!!
این یه نمونه استایل تقریبا کامل واسه بخش کامنت ها!! بقیش رو با سلیقه خودتون ویرایش کنین!!
کد:
#commentbox {
margin: 10px 0 0 0;
direction: rtl;
text-align:right;
clear: both;
font-size: 12px;
padding-bottom: 20px;
}
#comments{
font-family:"B Yekan";
font-size:15px;
margin-bottom: 10px;
padding-bottom: 10px;
}
img.avatar {
float: right;
border: 5px solid #a8a8a8;
border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;
padding: 2px;
margin-left: 15px;
}
ol.commentlist {
direction:rtl;
text-align:right;
font-size: 12px;
font-family: tahoma;
}
ol.commentlist a {
color: #bbb;
text-decoration: none;
font-style: none;
}
ol.commentlist li{
padding: 11px;
margin-top: 20px;
border: 6px solid #dad6d6;
background: #d2eba1;
border-radius: 15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
overflow: hidden;
}
ol.commentlist li a{
color: #888;
font-size: 11px;
}
#respond {
color:#444;
margin-top:20px;
padding: 2px 10px;
font-family:"B Yekan";
font-size:17px;
}
form#commentform {
padding: 11px;
margin-top: 10px;
border: 6px solid #dad6d6;
background: #f7f7f6 ;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
}
#commentform p {
margin-bottom:5px;
line-height:2;
}
#commentform label {
font-size:12px;
color:#666;
}
#commentform input:focus{ box-shadow:0 0 2px #09F;}
#commentform textarea {
border:1px solid #dcdcdc;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background:#eeeeed ;
color:#333;
padding:4px 6px;
width: 55%;
height: 180px;
font-family: tahoma, Arial;
font-size: 12px;
line-height: 20px;
float: right;
}
#comment_input {
float: right;
width: 240px;
background: url(../images/comment_inputbg.png) no-repeat right top;
padding-top: 50px;
}
#comment_input input{
width: 175px;
border: 1px solid #dcdcdc;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 2px 0;
height: 32px;
padding: 0 35px 0 10px;
font: normal 11px/40px tahoma, Arial;
}
#comment_input #author{
background: #eeeeed url(../images/comm_name.png) no-repeat 193px center;
}
#comment_input #email{
background: #eeeeed url(../images/comm_email.png) no-repeat 190px center;
}
#comment_input #url{
background: #eeeeed url(../images/comm_url.png) no-repeat 190px center;
}
#commentform textarea:focus {
border: 1px solid #999;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin-right: 2px;
}
#commentform #submit {
width:87px;
height:30px;
font-size:13px;
cursor:pointer;
background: url(images/sprites.png) -468px -84px no-repeat;
width:89px;
height:32px;
border: none;
float:left; margin-left:150px; margin-top:5px;
}
#commentbox .chalt {
background: #fff;
padding: 11px;
border: 3px solid #dad6d6;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#comment-float{float:right; margin-left:20px;}
#comment-Details{
width:200px;
font-family: Tahoma;
font-size:12px;
direction:rtl;
text-align:right;
float:right;
}-----------------------------------------------------------
اینم واسه استایل دادن به کامنت های مدیر:
لینک ها تنها برای اعضای سایت قابل نمایش است.
یا
لینک ها تنها برای اعضای سایت قابل نمایش است.
آخرین ویرایش توسط مدیر: