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

طراحی بخش دیدگاه ها در وردپرس
اگر با قالب های خام وردپرسی کار کرده باشید متوجه خواهید شد که استایل بخش دیدگاه ها با المنتور یا صفحه ساز های دیگر قابل ویرایش نیست و حتی خیلی از قالب های وردپرسی دیگر هم بخش نظرات خوبی ندارند، دلیل این موضوع در وردپرس این است که بخش نطرات یا دیدگاه ها در وردپرس با استفاده از HTML و CSS ظاهر آن طراحی می شود و با فحه ساز ها قابل ویرایش نیست، ما در این آموزش به دو روش ساده به شما یاد خواهیم داد که چگونه یک بخش زیبا برای دیدگاه های سایت وردپرسی خود طراحی کنید. روش اول را در ویدئو زیر توضیح داده ایم،در این روش با قالب آماده ای که از قبل برای شما طراحی کرده این می توانید بخش نطرات سایت خود را سفارشی کنید، این آموزش بیشتر برای قالب های خام المنتوری کارایی دارد، قالب های مثل هلو المنتور یا آسترا و برای قالب های غیر المنتور یا قالب هایی که دسترسی به ویرایش بخش نطرات سایت نداری از آموزش متی زیر می توانید استفاده کنید، برای انجام این ترفند احتیاجی به المنتور پرو ندارید و با همان نسخه ی معمولی المنتور قابل انجام می باشد.

دانلود قالب آماده بخش نطرات، این فایل را در المنتور خود درون ریزی کنید
دانلود فایل قالب فایل های ضمیمه
دانلود قالب آماده بخش نطرات، این فایل را در المنتور خود درون ریزی کنید
آموزش تغییر ظاهر بخش دیدگاه ها
در بالا به صورت ویدئویی آموزش دادیم که چگونه با استفاده از قالب آماده بخش نظرات و درون ریزی آن در المنتور صفحه دیدگاه های حود را طراحی کنید کالا قطعه کدی در اختیار شما قرار می دهیم که می تواندی در بخش تنظیمات CSS آن را قرار دهید تا ظاهر دیدگاه های سایت تغییر کند.
برای اینکار کافی ست صفحه ی تک نوشته ی خود را با المنتور باز کرده و روی تنظیات ستون دیدگاه ها کلیک کنید، بعد از آن به تب پیشرفته رفته و روی آخرین گزینه یعنی CSS سفارشی کلیک کنید و کدی که در پایین قرار داده ایم را آنجا وارد کنید.
/*elmineh */
/* 3 Coloumn Comment Revers */
form#commentform {
display: flex;
flex-wrap: wrap;
flex-direction: row
}
p.comment-notes, p.comment-form-comment,p.comment-form-cookies-consent {
flex-basis: 100%;
}
p.comment-form-author,p.comment-form-email,p.comment-form-url {
flex-basis: 33.33%;
padding: 0 5px 0 0;
}
p.comment-form-author {
order: 1;
}
p.comment-form-email {
order: 2;
}
p.comment-form-url {
order: 3;
}
p.comment-form-cookies-consent {
order: 4
}
p.comment-form-comment {
order: 5;
}
p.form-submit {
order: 6;
}
/* Comment Meta */
.comment-meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#comments .comment-meta {
flex-wrap: wrap;
justify-content: right;
}
.comment-author.vcard {
margin-left: 20px;
}
span.says {
display: none;
}
/* Comment Style */
textarea#comment,input#email,input#author,input#url {
padding: 0.84em 1.1em;
color: #4a4f55;
border-color: #e3e3e3;
background-color: #ffffff;
}
input#submit {
color: #ffffff;
background-color: #e93314;
border-radius: 5px;
}
body.rtl #comments .comment .comment-body, body.rtl #comments .pingback .comment-body {
padding: 30px 90px 30px 30px;
background-color: #FFF
}
body.rtl #comments .comment .avatar, body.rtl #comments .pingback .avatar {
right: 25px;
top: 20px;
}
.comment-body {
position: relative;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1.7em 2em;
border: 1px solid #ddd;
margin-bottom: 2em;
border-radius: 5px;
border-bottom: 1px solid #ddd!important
}
body.rtl #comments ol.comment-list .children:before {
display: none
}
.comment-author.vcard, .comment-author.vcard a {
color: #0d0d12;
font-size: 17px;
}
.comment-content {
color: #4a4f55;
font-size: 14px;
}
.comment-metadata a {
color: #898b8c;
font-size: 12px;
}
.reply {
width: fit-content;
padding: 8px;
background-color: #f8f5f2;
border-radius: 100px;
font-size: 12px;
color: #4a4f55;
}
a.comment-reply-link {
color: #0d0d12;
}
a.comment-reply-link:hover {
color: #e93314;
}
.reply:after {
content: "\f060";
font-family: FontAwesome;
margin-right: 5px;
opacity: 0;
transition: opacity 0.2s ease-out, right 0.3s ease-out;
}
.reply:hover {
width: 60px;
transition: width 0.3s ease-out;
}
.reply:hover:after {
opacity: 1;
transition: opacity 0.3s ease-out, right 0.3s ease-out;
}
.reply {
padding: 8px;
background-color: #f8f5f2;
border-radius: 100px;
font-size: 12px;
color: #4a4f55;
width: 30px;
display: block;
width: 45px;
height: 2.4em;
line-height: 2.4em;
-webkit-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
transition: all 0.3s ease-out
}
@media (max-width:768px){
body.rtl #comments .comment .comment-body, body.rtl #comments .pingback .comment-body {
padding: 30px 30px 30px 30px;
background-color: #FFF;
}
.comment-author.vcard {
flex-basis: 100%;
}
.comment-metadata {
margin-top: 15px;
}
p.comment-form-author, p.comment-form-email, p.comment-form-url {
flex-basis: 100%;
padding: 0;
}
}
سلام و درود دوستانی که با استفاده از اموزش فوق نتونستن استایل کامنت ها نتونستند مشکل رو برطرف کنند ما براشون این کار رو انجام میدیم. طراحی سایت در مشهد
وبینیو
Оснащение конференц залов с использованием инновационных решений
оснащение конференц зала [url=http://www.osnascheniye-konferents-zalov1.ru/]http://www.osnascheniye-konferents-zalov1.ru/[/url] .
Технологическое оборудование для конференц-залов с гарантией качества
конференц зал оборудование оснащение проект [url=https://www.oborudovaniye-konferents-zalov1.ru]https://www.oborudovaniye-konferents-zalov1.ru[/url] .
Сувенирная продукция с логотипом: качественное исполнение в срок
изготовление сувениров на заказ [url=http://www.suvenirnaya-produktsiya-s-logotipom.ru]http://www.suvenirnaya-produktsiya-s-logotipom.ru[/url] .
Оборудование переговорных комнат: качество, функциональность, инновации
оборудование для переговорных комнат [url=http://oborudovaniye-peregovornykh-komnat1.ru/]http://oborudovaniye-peregovornykh-komnat1.ru/[/url] .