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

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

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

راکت‌چت این امکان را در اختیار کاربران می‌گذارد که با استفاده از 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 supports variations'),
       url('/public/app/fonts/custom_fonts/vazirmatn_variable.woff2') format('woff2-variations');
}

: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;
}

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

حال تغییرات در راکت‌چت شما اعمال شده است و می‌توانید از راکت‌چت خود استفاده کنید!