الانتقال إلى المحتوى الرئيسي
تتيح العلامة البيضاء تخصيص مظهر Gorbit ليتطابق مع هوية مؤسستك.
العلامة البيضاء هي ميزة في نسخة المؤسسات.

خيارات العلامة البيضاء

White Labeling Overview

الاسم والشعار

اضبط اسم وشعار مثيل Gorbit الخاص بك عن طريق تحديد اسم التطبيق ورفع شعار مخصص. تغير هذه العناصر ما يظهر في الزاوية العلوية اليسرى من واجهة Gorbit بالإضافة إلى صفحة تسجيل الدخول.

الرؤوس والنوافذ المنبثقة

في قسم الخيارات المتقدمة، يمكنك إضافة محتوى في الرأس بالإضافة إلى نافذة منبثقة مخصصة. بالإضافة إلى ذلك، يمكنك تمكين شاشة موافقة ستُعرض للمستخدمين قبل أن يتمكنوا من الوصول إلى واجهة Gorbit. White Labeling Headers and Popups

التذييل

أسفل مفتاح تبديل شاشة الموافقة، يمكنك إضافة محتوى لتذييل واجهة Gorbit. White Labeling Footer

سمة الألوان

يستخدم Gorbit Tailwind CSS.

بنية السمة

نظام الألوان مبني على ملفين رئيسيين:
  • web/tailwind-themes/tailwind.config.js: تكوين Tailwind الأساسي وتعريفات الألوان
  • web/src/app/globals.css: متغيرات CSS للألوان المستخدمة في تكوين Tailwind

طرق التخصيص

1

انتقل إلى globals.css

انتقل إلى web/src/app/globals.css
2

تعديل متغيرات CSS

عدّل متغيرات CSS لتخصيص الألوان الأساسية (ألوان التمييز، الخلفيات، إلخ)
1

انتقل إلى تكوين Tailwind

انتقل إلى web/tailwind-themes/tailwind.config.js
2

تجاوز قيم التكوين

تجاوز قيم محددة من التكوين الأساسي
للثيمات الشاملة:
1

انتقل إلى مجلد السمات

انتقل إلى web/tailwind-themes/
2

إنشاء مجلد المؤسسة

أنشئ مجلدًا جديدًا باسم مؤسستك
3

إنشاء تكوين Tailwind

أنشئ ملف tailwind.config.js في هذا المجلد
4

تجاوز التكوين الأساسي

تجاوز أي قيم من التكوين الأساسي
5

تعيين متغير البيئة

عيّن متغير البيئة NEXT_PUBLIC_THEME على اسم مجلد مؤسستك

مثال على التكوين

لتغيير الخلفية إلى الأسود، أنشئ أو عدّل ملف سمتك:
/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    extend: {
      colors: {
        "background": "#000000",
      },
    },
  },
};
تخصيصات الألوان تتطلب بناء Gorbit من المصدر. للاختبار المحلي، أعد تشغيل تطبيق NextJS لتطبيق التغييرات.