چند قالب مخصوص بخش نظرات وردپرس
3.6 از 17 رای

قالب بخش نظرات وردپرس

استایل آماده برای نظرات وردپرس

در پست های قبلی یکی از کاربران عزیز درخواست قرار دادن چند نمونه قالب برای بخش نظرات رو داده بودند،از این رو به چند قالب برای بخش نظرات (کامنت های) وردپرس اشاره می کنیم.

*برای نصب هر کدام از قالب های زیر برای بخش نظرات وردپرس خود کد مربوط به آنرا در فایل style.css قالب خود قرار دهید.(چنانچه این کد ها وجود داشت کد های قبلی را پاک کنید)

میریم که بریم ?

  • قالب شماره 1

پیش نمایش:

1

کد:

h3#comments {
	text-align: right;
	color: #222;
	text-shadow: 1px 1px 1px #FFF;
	margin: 0 auto 20px;
	display: block;
	background:url(http://dl.expres.ir/2014/05/free.gif);
	clear: both;
	border-bottom: 1px dashed #AAA;
	padding-bottom: 10px;
}
img.avatar {
	margin-left:15px;
	width:70px;
	float:right;
	height:70px;
}
ol.commentlist {
	margin: 15px auto;
	list-style: none;
	border-top: 1px dashed #AAA;
	padding-top: 5px;
	display: block;
	clear: both;
}
ol.commentlist img{
	border:none;
	border-radius:0;
	padding:0;
}
ol.commentlist a {
	color: #bbb;
	text-decoration: none;
	font-style: none;
}
ol.commentlist li{
	font-size: 14px;
	background-color:#efefef;
	padding: 11px;
	padding-right:15px;
	margin-top: 20px;
	border: 2px dashed #dad6d6;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	overflow: hidden;
	width: 625px;
}
ol.commentlist li li{
	width: 570px;
}
ol.commentlist li p{
	width: 80%;
	font-size: 14px;
	margin-right: 100px;
}
ol.commentlist li a{
	color: #888;
	font-size: 14px;
}
#respond {
	margin: 0 auto 15px;
	width: 600px;
	clear: both;
	display: block;
}
#respond h3{
	visibility:hidden;
}
form#commentform {
	background:#f7f7f6;
	width:600;
	padding: 11px;
	margin-top: 10px;
	border: 3px dashed #dad6d6;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	overflow: hidden;
}
#commentform p , #formp{
	padding-right: 10px;
	margin-bottom:5px;
	line-height:2;
	width:100%;
	float:right;
}
#commentform label {
	color:#999;
	font-size:14px;
	margin-right:10px;
}
#commentform input , #forminput{
	float:right;
	display: block;
	width: 170px;
	padding: 3px 10px;
	height: 30px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 0px 0px 5px #CCC;
	-webkit-box-shadow: inset 0px 0px 5px #CCC;
	box-shadow: inset 0px 0px 5px #CCC;
	border: none;
	background:#eeeeed;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	font-size: 13px;
}
#commentform input:focus , #forminput:focus {
	-moz-box-shadow: inset 0px 0px 5px #AAA;
	-webkit-box-shadow: inset 0px 0px 5px #AAA;
	box-shadow: inset 0px 0px 5px #AAA;
}
#commentform textarea , #formtextarea {
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background:#eeeeed;
	color:#333;
	-moz-box-shadow: inset 0px 0px 5px #CCC;
	-webkit-box-shadow: inset 0px 0px 5px #CCC;
	box-shadow: inset 0px 0px 5px #CCC;
	padding:4px 6px;
	width: 300px;
	height: 180px;
	font-family: BKoodakBold;
	font-size: 17px;
	line-height: 20px;
	float: right;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#commentform textarea:focus , #formtextarea:focus {
	display: block;
	clear: both;
	margin: 10px auto 0;
	width: 360px;
	padding: 10px 15px;
	height: 200px;
	border: none;
	-moz-box-shadow: inset 0px 0px 5px #AAA;
	-webkit-box-shadow: inset 0px 0px 5px #AAA;
	box-shadow: inset 0px 0px 5px #AAA;
}
#commentform #submit , #formsubmit {
	background-color: rgb(238, 0, 0);
	background-image: -ms-linear-gradient(top , rgb(238, 67, 46) 0%, rgb(181, 23, 0) 100%);
	background-image: -moz-linear-gradient(top , rgb(238, 67, 46), rgb(181, 23, 0));
	background-image: -o-linear-gradient(top , rgb(238, 67, 46) 0%, rgb(181, 23, 0) 100%);
	background-image: -webkit-gradient(linear,  top, right bottom, color-stop(0, rgb(238, 67, 46)), color-stop(1, rgb(181, 23, 0)));
	background-image: -webkit-linear-gradient(top , rgb(238, 67, 46) 0%, rgb(181, 23, 0) 100%);
	background-image: linear-gradient(to bottom, rgb(238, 67, 46) 0%, rgb(181, 23, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(238, 67, 46)', endColorstr='rgb(181, 23, 0)');
	border: 1px solid rgb(149, 17, 0);
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0px 0px 0px 1px rgba(255, 115, 100, 0.4) inset, 0px 1px 3px rgb(51, 51, 51);
	color: rgb(255, 255, 255);
	text-align: center;
	margin:18px 0 0 4px;
	padding:3px 15px;
	float:right;
	font-family:BKoodakBold;
	font-size:16px;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
}
#commentform #submit:hover , #formsubmit:hover{
	color: rgb(255, 255, 255);
	background-color: rgb(243, 120, 115);
	background-image: -moz-linear-gradient(center top , rgb(243, 120, 115) 0%, rgb(219, 80, 77) 50%, rgb(203, 5, 0) 50%, rgb(162, 6, 1) 100%);
}
#commentbox .chalt {
	background: #fff;
	padding: 11px;
	border: 3px solid #dad6d6;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

 

  • قالب شماره 2

پیش نمایش:

2

کد:

h3#comments {
	text-align: right;
	color: #222;
	text-shadow: 1px 1px 1px #FFF;
	margin: 0 auto 20px;
	display: block;
	clear: both;
	background:url(http://dl.expres.ir/2014/05/free.gif);
	border-bottom: 1px dashed #AAA;
	padding-bottom: 10px;
}
img.avatar {
	margin-left:15px;
	width:70px;
	float:right;
	height:70px;
	box-shadow:0 0 3px #00d2ff;
}
ol.commentlist {
	margin: 15px auto;
	list-style: none;
	border-top: 1px dashed #00d2ff;
	padding-top: 5px;
	display: block;
	clear: both;
}
ol.commentlist img{
	border:none;
	border-radius:0;
	padding:0;
}
ol.commentlist a {
	color: #bbb;
	text-decoration: none;
	font-style: none;
}
ol.commentlist li{
	font-size: 14px;
	background-color:#fff;
	padding: 11px;
	padding-right:15px;
	margin-top: 20px;
	border: 1px dashed #00d2ff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	overflow: hidden;
	width: 625px;
}
ol.commentlist li li{
	width: 570px;
	background:#fff;
}
ol.commentlist li p{
	width: 80%;
	font-size: 14px;
	margin-right: 100px;
}
ol.commentlist li a{
	color: #888;
	font-size: 14px;
}
#respond {
	margin: 0 auto 15px;
	width: 600px;
	clear: both;
	display: block;
}
#respond h3{
	visibility:hidden;
}
form#commentform {
	width:600;
	padding: 11px;
	margin-top: 10px;
	border: 1px dashed #00d2ff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	overflow: hidden;
	background:#fff;
}
#commentform p , #formp{
	padding-right: 10px;
	margin-bottom:5px;
	line-height:2;
	width:100%;
	float:right;
}
#commentform label {
	color:#999;
	font-size:14px;
	margin-right:10px;
}
#commentform input , #forminput{
	float:right;
	display: block;
	width: 170px;
	padding: 3px 10px;
	height: 30px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 0px 0px 5px #00d2ff;
	-webkit-box-shadow: inset 0px 0px 5px #00d2ff;
	box-shadow: inset 0px 0px 5px #00d2ff;
	border: none;
	background:#fff;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	font-size: 13px;
}
#commentform input:focus , #forminput:focus {
	-moz-box-shadow: inset 0px 0px 5px #00d2ff;
	-webkit-box-shadow: inset 0px 0px 5px #00d2ff;
	box-shadow: inset 0px 0px 5px #00d2ff;
}
#commentform textarea , #formtextarea {
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color:#333;
	-moz-box-shadow: inset 0px 0px 5px #00d2ff;
	-webkit-box-shadow: inset 0px 0px 5px #00d2ff;
	box-shadow: inset 0px 0px 5px #00d2ff;
	padding:4px 6px;
	width: 300px;
	height: 180px;
	font-family: BKoodakBold;
	font-size: 17px;
	line-height: 20px;
	float: right;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#commentform textarea:focus , #formtextarea:focus {
	display: block;
	clear: both;
	margin: 10px auto 0;
	width: 360px;
	padding: 10px 15px;
	height: 200px;
	border: none;
	-moz-box-shadow: inset 0px 0px 5px #00d2ff;
	-webkit-box-shadow: inset 0px 0px 5px #00d2ff;
	box-shadow: inset 0px 0px 5px #00d2ff;
}
#commentform #submit , #formsubmit {
	border-bottom: 1px dashed #00d2ff;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0px 0px 0px 1px #00d2ff inset, 0px 1px 3px #00d2ff;
	color: rgb(255, 255, 255);
	text-align: center;
	margin:18px 0 0 4px;
	color:#000;
	padding:3px 15px;
	float:right;
	font-family:BKoodakBold;
	font-size:16px;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
}
#commentbox .chalt {
	background: #fff;
	padding: 11px;
	border: 3px dashed #dad6d6;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
  • قالب شماره 3

پیش نمایش:

3

کد:

img.avatar {
	margin-left:15px;
	width:70px;
	float:right;
	height:70px;
	box-shadow:0 0 3px #00d2ff;
}
ol.commentlist {
	margin: 15px auto;
	list-style: none;
	background:url(http://dl.expres.ir/2014/05/free.gif);
	padding-top: 5px;
	display: block;
	clear: both;
}
ol.commentlist img{
	border:none;
	border-radius:0;
	padding:0;
}
ol.commentlist a {
	color: #bbb;
	text-decoration: none;
	font-style: none;
}
ol.commentlist li{
	font-size: 14px;
	background-color:#fff;
	padding: 11px;
	padding-right:15px;
	margin-top: 20px;
  border: 1px solid #DDDDDD;
border-radius:5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	overflow: hidden;
	width: 625px;
}
ol.commentlist li:hover{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin-right:10px;
}
ol.commentlist li li{
	width: 570px;
	background:#fff;
}
ol.commentlist li p{
	width: 80%;
	font-size: 14px;
	margin-right: 100px;
}
ol.commentlist li a{
	color: #888;
	font-size: 14px;
}
#respond { 
background: #ececec;
padding:0 5px 0 5px;
}

/* Highlight active form field */
#respond input[type=text]{
	width:200px;
}
#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
border-radius:5px;
}
#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}
#author { 
font-size: 16px;
color:#1d1d1d; 
} 

#url  { 
color: #21759b;
} 

#submit {
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
border-radius:5px;
} 

#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
  background: -moz-linear-gradient(top, #003366, #006ad4)
}

 

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.