اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

ستحتاج إلى  تعديلات في كود HTML بالتوجه إلى ملف الـ HTML الرئيسي مثل index.html أو ملف الـ Layout في حال تستخدم Laravel ومحرك القوالب Blade وقم بتعديل وسم <html> ليصبح كالتالي:

<html lang="ar" dir="rtl">

وفي قسم <head>، أنت حالياً تستدعي ملف adminlte.min.css، فيجب استبداله بملف النسخة العربية وتضمين مكتبة Bootstrap الخاصة بالـ RTL.

أي استبدل التالي:

<link rel="stylesheet" href="dist/css/adminlte.min.css">

بالتالي:

<link rel="stylesheet" href="dist/css/adminlte.rtl.min.css">

وتأكد من المسار الصحيح للملف dist/css/ بناءًا على مكان المجلد لديك.

  • 0
نشر

السلام عليكم ورحمة الله تعالى وبركاته،

أسهل طريقة هي إضافة الخاصية:

dir="rtl"

 و:

lang="ar"

 إلى عنصر <html> في ملف layout الرئيسي:

<html dir="rtl" lang="ar">

ثم في قسم <head> من ملف HTML استبدل ملف CSS الافتراضي بالنسخة RTL استبدل التالي:

 

<link rel="stylesheet" href="dist/css/adminlte.min.css">

ب:

<link rel="stylesheet" href="dist/css/adminlte.rtl.min.css">

 

  • 0
نشر

العملية تتكون من 3 خطوات رئيسية داخل ملف الـ HTML الأساسي (الذي يحتوي على وسم <head>):

1. تعديل وسم الصفحة (HTML Tag)

أول سطر في ملف القالب يجب أن يخبر المتصفح أن الاتجاه من اليمين لليسار.

ابحث عن:

<html lang="en">

واستبدله بـ:

<html lang="ar" dir="rtl">

2. استبدال ملفات CSS (الخطوة الأهم)

في AdminLTE، لا يكفي مجرد تغيير الاتجاه، بل يجب استدعاء ملفات التصميم المخصصة للعربية.

داخل وسم <head>، احذف أو عطل الروابط الخاصة بـ adminlte.min.css العادي، وضع بدلاً منها الروابط التالية بالترتيب:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cairo:400,600&display=swap">
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}"> 
<link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="{% static 'dist/css/adminlte.rtl.min.css' %}">

ملاحظة: إذا لم تجد ملف adminlte.rtl.min.css في مجلدات مشروعك، يمكنك استخدام رابط الـ CDN المباشر مؤقتاً للتجربة:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/css/adminlte.rtl.min.css">

3. ضبط الخط (Font)

لجعل النصوص تظهر بخط "القاهرة" (Cairo) الذي أضفناه، أضف هذا التنسيق البسيط في الـ <head> أو في ملف الـ CSS الخاص بك:

<style> body, h1, h2, h3, h4, h5, h6, .btn, .sidebar { font-family: 'Cairo', sans-serif !important; } </style>

ملخص التغييرات في ملف base.html:

بعد التعديل، يجب أن يبدو الجزء العلوي من ملفك بهذا الشكل تقريباً:

{% load static %}
<!DOCTYPE html> 
<html lang="ar" dir="rtl"> 
<head> 
	<meta charset="utf-8"> 
  	<title>لوحة التحكم</title> 
  	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cairo:400,600&display=swap">
  	<link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css">
  	<link rel="stylesheet" href="{% static 'dist/css/adminlte.rtl.min.css' %}">
  	<style> body { font-family: 'Cairo', sans-serif !important; } </style>
  	</head> 
  	<body class="hold-transition sidebar-mini"> 
    ...

طبق هذه الخطوات واعمل Refresh للصفحة (يفضل مسح الكاش بـ Ctrl + F5)، وستجد القائمة الجانبية انتقلت لليمين والنصوص تظهر بشكل عربي سليم. 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...