پرش به مطلب اصلی
تغییر فونت راکت‌چت به وزیرمتن

تغییر فونت راکت‌چت به وزیرمتن

بازارچه ابریخواندن 3 دقیقه

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

پیش‌نیازها​

  • یک سرویس فعال RocketChat و دسترسی ادمین
  • دسترسی به Custom CSS در تنظیمات Layout
  • دسترسی موقت به مدیریت فایل سرویس در کنسول هم‌روش
  • تهیه نسخه پشتیبان از CSS فعلی پیش از جایگزینی

تغییرات کلی در راکت‌چت​

راکت‌چت این امکان را در اختیار کاربران می‌گذارد که با استفاده از css، تغییرات مورد نیاز خود را روی ظاهر راکت‌چت خود اعمال کنند.

به این منظور ابتدا وارد صفحه تنظیمات راکت‌چت خود شوید:

سپس در قسمت تنظیمات، عبارت layout جست‌وجو و تنظیمات مربوط به آن باز می‌شود.

روی بخش Custom CSS کلیک می‌شود. کدهای CSS موردنیاز در این بخش قرار می‌گیرند و تغییرات ذخیره می‌شوند.

اضافه کردن فونت وزیرمتن​

در ادامه به نحوه اضافه کردن فونت وزیرمتن به راکت‌چت می‌پردازیم. در این قسمت شما نیاز به نوشتن css ندارید و css به صورت آماده در اختیار شما قرار می‌گیرد.

ابتدا به قسمت تنظیمات اپ خود در کنسول بروید و گزینه مدیریت فایل را فعال کنید.

سپس فایل فونت را از این لینک دانلود کرده و آن را در مسیر custom_fonts/ آپلود کنید.

طبق دستورالعمل بالا، به قسمت Custom css بروید و کد css پایین را کپی کرده و آن را در راکت‌چت خود اعمال کنید.

@font-face {
  font-family: "Vazirmatn";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/public/app/fonts/custom_fonts/vazirmatn_variable.woff2") format("woff2");
}

:root {
  --font-stack: "Vazirmatn", system-ui, sans-serif;
}

.rcx-text,
.rcx-message-body, .rcx-message-content,
.rcx-sidebar-item__text,
div.rc-box, div.rcx-box,
div.rc-box>span, div.rcx-box>span,
h1.rc-box, h1.rcx-box,
h2.rc-box, h2.rcx-box,
h3.rc-box, h3.rcx-box,
h4.rc-box, h4.rcx-box,
input[type="text"], input[type="search"] {
  font-family: var(--font-stack);
}

textarea.js-input-message,
textarea.rc-message-box__textarea,
textarea.rc-message-box__textarea::placeholder {
  font-family: var(--font-stack);
  unicode-bidi: plaintext;
  direction: auto;
  text-align: auto;
}

.messages-list div[data-own="true"] .rcx-message-body {
  text-align: right;
}
.messages-list div[data-own="false"] .rcx-message-body {
  text-align: left;
}

پس از ذخیره، فونت جدید در رابط راکت‌چت نمایش داده می‌شود.

راهنمایی‌های مرتبط

rocketchatبازارچهاپ‌های آماده بازارچه
این راهنمایی کاربردی بود؟

با ثبت بازخوردتان در بهبود کیفیت مستندات مشارکت داشته باشید.