learndl learndl triboon

آموزش زیباسازی بخش نظرات در سایت با css ( رابط کاربری حرفه ایی )

آموزش زیباسازی بخش نظرات در سایت با css ( رابط کاربری حرفه ایی )

در این آموزش قراره بهتون یاد بدیم که چطوری با کد های سی اس اس ، بخش های مختلف سایت تون رو زیبا تر و کاربر پسند تر کنید . همچنین زبان نشانه گذاری سی اس اس را به شما معرفی میکنیم و بهترین محل قرار دادن کدهای استایل رو بهتون میگیم . به طور کلی ، آموزش بسیار خوبی برای کسانیه که تابحال با سی اس اس کار نکردن یا اینکه کدهای سی اس اس سایت خود را از بخش سفارشی سازی > سی اس اس سفارشی قرار میدهند . برای یادگیری بیشتر در این مورد ، وبیت را تا انتهای این مقاله همراهی کنید . همجنین اگر سوالی داشتید میتوانید از قسمت نظرات بپرسید !

 

سی اس اس چیه و بهترین جای اضافه کردن آن کجاست ؟

سی اس اس مخفف جمله Cascading Style Sheets می باشد که در کنار زبان نشانه گذاری اچ تی ام ال هسته اصلی ساخت صفحات وب می باشد. در واقع سی اس اس ابزاری برای نمایش چیدمان و ظاهر صفحات وب می باشد. به عنوان مثال شما پس از مشخص کردن مکانی در صفحه وب توسط اچ تی ام ال می توانید با کدهای ساده در سی اس اس  اندازه ، رنگ، کادربندی  و … آن را تعیین کنید. بهترین مکان اضافه کردن کد های سی اس اس در وردپرس ، فایل style.css در قالب child شما می باشد . با اضافه کردن کد های سی اس اس ، این کدها دیگر به صورت اینلاین اضافه نمی شوند . که در نهایت خوانایی صفحات وب را بالا میبرید .

 

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

 

آموزش زیباسازی بخش نظرات در سایت با css ( رابط کاربری حرفه ایی )

 

زیبایی بخش نظرات وردپرس

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

 

شما با استفاده از اضافه کردن کدهای مربوط به این قسمت می‌توانید بخش نظرات را دستخوش تغییر کنید. یکی از مواردی که حتماً باید به آن توجه داشته باشید این است که قبل از هرگونه تغییر در کدهای قالب سایت وردپرسی خود حتماً یک نسخه پشتیبان از سایت خود تهیه فرمایید. این را به این دلیل میگویم ، چون ممکن است به دلایل مختلف ، به مشکلات اساسی بر بخورید .

 

آموزش زیباسازی بخش نظرات در سایت با css ( رابط کاربری حرفه ایی )

 

h3#comments {
 text-align: right;
 color: #222;
 text-shadow: 1px 1px 1px #FFF;
 margin: 0 auto 20px;
 display: block;
 clear: both;
 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;
}

به این مطلب امتیاز دهید

امتیاز کلی : 0 / 5. تعداد آرا : 0

اولین نفر باید که به این مطلب امتیاز میدهید

وبیت این پست توسط نگارش شده است.

معتقدم ، با اندگشتان آماده به تایپ و ذهن پر از ایده های ناب میتوانم دنیای خودم رو عوض کنم . محمدحسین هستم دانشجوی نرم افزار ، طراح وب سایت ، تولید کننده محتوای وبمستری و هر موضوعی در زمینه IT ، طراح رابط کاربری و تجربه کاربری و ...

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 0 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود
هنوز نظری ثبت نشده است ، اولین نفری باشید که نظر میدهید !
همکاران وبیت