آموزش وردپرس قالب وردپرس قالب رايگان وردپرس درس وردپرس
آموزش تغییر ظاهر نمای لیست ها با CSS - گروه ساقه

آموزش تغییر ظاهر نمای لیست ها با CSS

نحوه تغییر SuiteBar شیرپوینت با متن دلخواه
آموزش نحوه تغییر SuiteBar شیرپوینت با متن دلخواه
مرداد ۱۶, ۱۳۹۶
ارسال IM(پیام فوری) به اسکایپ کاربران از طریق نینتکس
مرداد ۱۹, ۱۳۹۶

آموزش تغییر ظاهر نمای لیست ها با CSS

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

با اضافه کردن یک کد CSS می توان این نماها را از وضعیت یکنواخت بیرون آورد و جلوه زیباتری به آنها داد.
چگونه یک کد CSS را به نمای لیست اضافه کنیم؟
  • از منوی "تنظیمات" گزینه "ویرایش صفحه" را انتخاب کنید.
  • بر روی "درج وب پارت" کلیک کرده سپس از دسته "رسانه و محتوی"، "ویرایشگر اسکریپت" یا Script Editor را انتخاب کنید.
  • کد CSS زیر را درون آن قرار داده و ذخیره کنید و آن را ببندید.
<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>


در تصویر زیر نتیجه اعمال این کد CSS بر روی نمای یک لیست را مشاهده می کنید.


از این CSS می توان هم در شیرپوینت 2013 و هم در شیرپوینت 2016 استفاده کرد.
همچنین می توان تمامی اجزا و مشخصه های رنگی و یا فونت نما را بوسیله همین CSS تغییر داد.
بطور مثال:
<style type="text/css">
 
/* List View Header */
.ms-listviewtable > thead > tr > th {
 background-color: #d55a5a;
}
 
/* List view Header Text color*/
.ms-vh-div,  .ms-headerSortTitleLink {
color:yellow!important; font-weight: bold;
}
 
/* background color for alternate rows */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #f7dddd
}
</style>

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *