اعمال استایل ظاهری به لیست های شیرپوینتی

اعمال تغییر استایل لیست های شیرپوینتی

در این بخش آموزشی قصد ما پرداختن به موضوعی است که شاید برای کاربران از اهمیت زیادی برخوردار باشد و آن هم بحث ظاهری و نمای لیست های شیرپوینت می‌باشد.

کاربرد اعمال استایل ظاهری در لیست های شیرپوینتی

یکی از موضوعاتی که می‌تواند به شما کمک کند تا کاربر سامانه و یا سایت شما احساس خوبی در استفاده از محصول شما داشته باشد، مبحث ظاهری و فضایی است که در آن مشفول به کار است. نمای لیست های SharePoint به صورت پیش فرض بسیار ساده و بدون رنگ به شکل زیر می‌باشد:

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

چگونگی اعمال استایل ظاهری یا css به لیست های شیرپوینتی 

به منظور استفاده از استایل ظاهری یا css شما باید از قسمت ویرایش صفحه استفاده کنید.
در چرخ دنده بالایی سایت گزینه ویرایش صفحه را انتخاب کرده و منتظر بمانید تا صفحه مربوطه باز شود.

پس از آن ما باید از یکی از وب پارت های شیرپوینت تحت عنوان ویرایشگر متن یا Script Editor استفاده کنیم. برای اضافه کردن ویرایشگر متن، گزینه افزودن یک بخش وب یا web part را می‌زنید.

از قسمت دسته بندی های بالای صفحه گزینه مطبوعات و محتوا را کلیک کرده و سپس گزینه ویرایشگر متن یا Script Editor را انتخاب کرده و آن را اضافه نمایید.

پس از اضافه کردن وب پارت مربوطه به صفحه، می‌توانید با کلیک بر روی آن و قرار دادن کد استایل ظاهری یا css خود درون آن، به صفحه خود استایل های مختلف را متصل کنید.

فقط کافیست کد مربوطه را در قسمت متن قرار داده و آن را درج نمایید. سپس صفحه مربوط به ویرایش را ببندید.

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

نمونه کدهای استایل ظاهری برای لیست‌های شیرپوینتی

به منظور اعمال استایل ظاهری به لیست های شیرپوینتی شما باید از کدهای css مخصوص استفاده نمایید که ما در این بخش دو نمونه از آن‌ها را قرار دادیم:
نمونه ۱:

/* List View Header */
.ms-listviewtable > thead > tr > th {
 background-color: #202020;}
/* List view Header Text color*/
.ms-vh-div,  .ms-headerSortTitleLink {
color:white!important;
font-size:13px;} 
/* background color for alternate rows */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #fdf7c8}
 .ms-heroCommandLink, .ms-heroCommandLink:visited {
    color: #191a1a;
    text-decoration: none;}
.ms-vh-div, .ms-headerSortTitleLink{
text-align: center!important;}
.ms-list-addnew-imgSpan, .ms-list-addnew-imgSpan20{
width : 0px!important;}
.ms-vb, .ms-vb2, .ms-vb-user, .ms-vb-tall, .ms-pb, .ms-pb-selected{
    border-inline-color: #a29e9b!important;
    border-block-color: #a29e9b!important;
    text-align: center!important;
    vertical-align: middle!important;}
 .ms-vb2 {
    width: 10% !important;}
.ms-heroCommandLink, .ms-heroCommandLink:visited {
    color: #544F53;
    text-decoration: none;
    background-color: #EDC339;
    padding: 5px 10px;
    text-align: center;
    -webkit-border-radius: 5px;
    font-size: 13px;}
.ms-pivotControl-surfacedOpt, .ms-pivotControl-overflowDot {
    color: #000000;}
.ms-pivotControl-surfacedOpt:hover, .ms-pivotControl-overflowDot:hover, .ms-pivotControl-surfacedOpt-selected {
    color: #2e3439;}
.ms-pivotControl-surfacedOpt:hover, .ms-pivotControl-overflowDot:hover, .ms-pivotControl-surfacedOpt-selected {
    color: #c08d00;}
.ms-vb-icon {
    vertical-align: top;
    padding: 7px 11px 0px 8px;
    cursor: default;
    white-space: nowrap;
    border-inline-color: #a29e9b!important;
    border-block-color: #a29e9b!important;}

نمونه ۲:

توجه داشته باشید که با تغییر رنگ ها، فونت و سایز هر کدام از این استایل ها شما می‌توانید استایل های متفاوتی برای هر کدام از صفحات شیرپوینتی خود که بخواهید داشته باشید.

<style type="text/css">
/* List View Header */
.ms-listviewtable > thead > tr > th {
 background-color: #5B9BD5;
}
/* List view Header Text color*/
.ms-vh-div,  .ms-headerSortTitleLink {
color:white!important; font-weight: bold;
} 
/* background color for alternate rows */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #DDEBF7
}
</style>