القالب العام¶
Odoo provides a range of theme customization options to define the website's colors and fonts, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
When setting up a website for the first time, you are prompted to select a theme. Hover the mouse over the themes to see an extended preview of each one. Click a theme to select it, or click the View more themes button to display the full list of available themes.
ملاحظة
If you leave without selecting a theme, the website is created with the default theme.
To customize the theme, open the website editor, navigate to the Theme tab, and go to the Website section. You can:
Click Switch Theme to open the theme selector. Hover the mouse over the themes to see an extended preview of each one. Click Use this theme to apply it to the website.
Add a language for the website.
Select the Page Layout to change the overall display and spacing of building blocks and website elements on pages.
Customize the layout's Background by:
Click Save to apply the changes to the website.
الألوان¶
يتميز محرر المواقع الإلكترونية في Odoo بنوعين رئيسيين من الألوان: ألوان القالب و:ref:ألوان الحالة <website/themes/status-colors>.
ألوان السمة¶
Theme colors refer to the set of colors displayed across all pages of the website. They consist of five colors: three Main colors, used mainly for buttons and links, and two Light & Dark colors, used mainly for text and headings.
To edit the website's colors, navigate to the Colors section of the Theme tab. Then:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Click the paint palette icon and choose a color palette. As a result, all color customizations are reset.
Odoo automatically creates Color Presets for the chosen colors or palette. These predefined color combinations are applied to various elements of the website to create a structured and visually appealing design. When selecting a color palette, its presets define how those colors are distributed across different elements. To modify them, click Color Presets, then select a preset to open the customization dropdown. Each color preset contains colors for the building block’s Background, Text, Headings, Links, Primary Buttons, and Secondary Buttons.
نصيحة
To apply a color preset to a building block, select the building block, go to the Style tab, click the color dot located next to Background, and choose a Theme.
ملاحظة
يؤدي تغيير مجموعة الألوان المعدة مسبقاً إلى تحديث ألوان كل من المجموعة الافتراضية والكتل البرمجية التي تستخدمها تلقائياً.
ألوان الحالة¶
تشير ألوان الحالة إلى حالة إجراءات معينة (مثل نجاح، تحذير، إلخ). ويتم استخدامها في الرسائل المنبثقة التي تظهر لتقديم تعليقات للمستخدمين وزوار الموقع الإلكتروني. لتخصيص ألوان الحالة للموقع الإلكتروني، قم بالتمرير لأسفل إلى القسم متقدم وانقر فوق النقاط لتغيير لونها.
Example
تظهر المعلومات المتعلقة بإجراء ناجح على الموقع الإلكتروني باللون الأخضر.
الخطوط¶
يتيح لك Odoo تخصيص عائلة الخط وحجم الخط لعناصر الموقع الإلكتروني، بما في ذلك الفقرات والعناوين، و:ref:الأزرار <website/themes/button-styles>، و:ref:حقول الإدخال <website/themes/input-fields>.
حجم الخط: في أقسام الفقرة، و:guilabel:
العناوين، و:guilabel:الزر، و:guilabel:حقول الإدخال، استخدم حقل حجم الخط لتعيين حجم افتراضي. انقر فوق رمز (تبديل المزيد من الخيارات) لتوسيع القسم وتحديد أحجام مخصصة (مثلاً، بناءً على مستوى العنوان أو حجم الزر، إلخ).نوع الخط: في أقسام الفقرة، و:guilabel:
العناوين، و:guilabel:الزر، حدد خطاً من القائمة المنسدلة.ملاحظة
عند تحديد خطوط النظام، يستخدم Odoo الخطوط الأصلية المثبتة بالفعل على نظام تشغيل الزائر. على سبيل المثال، يستخدم Android Roboto كخط النظام الافتراضي الخاص به.
خطوط مخصصة¶
لإضافة خط مخصص غير متوفر بشكل افتراضي في Odoo، انقر فوق القائمة المنسدلة عائلة الخط وحدد إضافة خط مخصص في الأسفل. في النافذة المنبثقة إضافة خط Google أو تحميل خط مخصص:
لإضافة خط Google، افتح القائمة المنسدلة تحديد خط Google وحدد الخط المطلوب. قم بإيقاف تشغيل تقديم الخط من خوادم Google إذا كان موقعك الإلكتروني يعمل من موقع تتطلب فيه اللوائح الامتثال لقوانين مثل، على سبيل المثال لا الحصر، القانون العام لحماية البيانات (GDPR) للاتحاد الأوروبي. سيضمن هذا تخزين خط Google على خادم الموقع الإلكتروني بدلاً من خوادم Google.
لتحميل خط مخصص من جهاز الكمبيوتر الخاص بك، انقر فوق اختيار ملف.
بمجرد الانتهاء، انقر فوق حفظ وإعادة تحميل.
نصيحة
يتم عرض معاينة للخط المحدد على الجانب الأيمن من النافذة.
الأنماط¶
يمكن تخصيص مظهر عناصر الموقع الإلكتروني بشكل أكبر. على سبيل المثال، يمكنك تخصيص الفقرات والعناوين، و:ref:الأزرار <website/themes/button-styles>، و:ref:الروابط <website/themes/link-style>، و:ref:حقول الإدخال <website/themes/input-fields>.
الفقرات والعناوين¶
يوفر قسما الفقرة و:guilabel:العناوين خيارات تنسيق إضافية لعناصر النص هذه. يمكنك:
تعديل إعدادات الخط.
ضبط ارتفاع السطر لتحديد المسافة بين سطور النص.
ضبط الهوامش لتحديد المسافة حول الفقرات والعناوين.
الأزرار¶
لتخصيص نمط الأزرار الأساسية والثانوية للموقع الإلكتروني، انتقل إلى قسم الزر وقم بتحرير الخيارات ذات الصلة:
افتح القائمة المنسدلة بجوار حقلي النمط الأساسي أو النمط الثانوي لتغيير النمط لكل نوع زر، مثل تعبئة، أو مخطط تفصيلي، أو مسطح. عند تحديد مخطط تفصيلي، يظهر خيار عرض الحدود أدناه، مما يسمح لك بضبط عرض مخطط الزر.
تعديل إعدادات الخط.
اضبط المسافة البادئة لتغيير التباعد حول تسميات الأزرار.
استخدم خيار الزوايا الدائرية لضبط نصف قطر حدود الأزرار.
أضف رسوماً متحركة عند النقر على زر في القائمة المنسدلة تأثير عند النقر.
نصيحة
لتحديد أحجام مخصصة صغيرة و:guilabel:كبيرة لـ المسافة البادئة و:guilabel:حجم الخط و:guilabel:الزوايا الدائرية للأزرار، انقر على أيقونة (تبديل المزيد من الخيارات)، ثم استخدم الحقول ذات الصلة.
الروابط¶
في قسم الرابط، افتح القائمة المنسدلة بجوار نمط الرابط لاختيار مظهر الروابط على الموقع الإلكتروني. يمكنك الاختيار بين:
بدون تسطير؛
التسطير عند التمرير؛ أو
التسطير دائماً.
حقول الإدخال¶
لتخصيص نمط حقول الإدخال في الموقع الإلكتروني، انتقل إلى قسم حقول الإدخال وحرر الخيارات ذات الصلة:
اضبط المسافة البادئة لتغيير التباعد حول الحقول.
تعديل إعدادات الخط.
خصص عرض الحدود حول الحقول.
حدد نصف قطر الحدود لجعل زوايا الحقول دائرية.
اختر لون الخلفية لملء الحقول.
الإعدادات المتقدمة¶
يمكن تكوين إعدادات إضافية في قسم متقدم، مثل إظهار أو إخفاء الرأس، واستخدام حقن الكود لـ:ref:التحقق من الموقع الإلكتروني من خلال علامة HTML <website/google_search_console/HTML-tag>، وتكوين ألوان الحالة و:guilabel:الألوان الرمادية.
يمكنك أيضاً تكوين خرائط جوجل لعرض الخرائط وتمكين ميزات تحديد الموقع الجغرافي على الموقع الإلكتروني، على سبيل المثال، في صفحة اتصل بنا وفي مقتطفات معينة. لتكوين هذا الخيار:
انتقل إلى حساب جوجل الخاص بك.
فعّل واجهة برمجة تطبيقات الخرائط الثابتة و:guilabel:
واجهة برمجة تطبيقات الخرائط جافا سكريبتو:guilabel:واجهة برمجة تطبيقات الأماكن.مهم
لا تفعّل واجهة برمجة تطبيقات الأماكن (الجديدة)، حيث إنها غير مدعومة بعد من قبل Odoo.
قد يتطلب استخدام واجهات برمجة تطبيقات جوجل الدفع لجوجل.
إنشاء مفتاح API ونسخه.
في محرر الموقع الإلكتروني في Odoo، انتقل إلى علامة التبويب السمة، وفي قسم متقدم، انقر فوق مفتاح مخصص بجوار خريطة Google.
الصق مفتاح API الذي تم إنشاؤه في حقل مفتاح API.
انقر فوق حفظ.