اللون الاخضر ومعناه ودلالاته

تمام جدًا، فهمت طلباتك بدقة. سنقوم الآن بضبط التفاصيل الأخيرة لتصل إلى الشكل المثالي الذي تريده.

سنقوم بتنفيذ طلبين:

1. ضبط المحاذاة الرأسية للقائمة الجانبية بدقة متناهية.

2. تغيير الصورة الاحتياطية إلى لون سادة (بني فاتح خفيف) بدلاً من الصورة الحالية.

---

1. تعديل المحاذاة بدقة

اذهب إلى المظهر > تعديل HTML وابحث عن كود الـ CSS الذي عدلناه آخر مرة:

code CSS

    #the-one-sidebar {
  flex-shrink: 0;
  width: 300px;
  padding-top: 104px;
}
  

الرقم 104px هو المسؤول عن دفع القائمة للأسفل. بما أنك تريدها أن تنزل "شوية كمان"، قم بزيادة هذا الرقم.

جرب تغيير 104px إلى 115px أو 120px.

الطريقة المثالية لضبطها:

1. غير الرقم إلى 115px واحفظ.

2. افتح مدونتك في نافذة جديدة وقم بتحديثها.

3. انظر إلى المحاذاة. إذا كانت لا تزال مرتفعة قليلاً، ارجع للمحرر وزد الرقم (مثلاً إلى 118px). إذا أصبحت منخفضة جدًا، قلل الرقم (مثلاً إلى 112px).

4. كرر هذه العملية حتى تصل إلى المحاذاة المثالية التي ترضيك. الأمر قد يتطلب 2-3 محاولات للوصول إلى الدقة المطلوبة.

---

2. تغيير الصورة الاحتياطية

هذه الصورة تظهر في مكانين: المشاركات الشائعة و المواضيع ذات الصلة. سنحتاج إلى تغييرها في كلا المكانين.

معلومة: هذا النص هو مجرد مثال لتوضيح شكل صندوق المعلومات. يمكنك وضع أي نص أو روابط هنا.

بدلاً من استخدام صورة، سنستخدم كود SVG لإنشاء مربع بلون سادة. هذا أفضل لأنه لا يتطلب تحميل أي صورة، مما يجعله أسرع وأكثر كفاءة.

اللون البني الفاتح الخفيف الذي وصفته يمكن تمثيله بكود مثل #D2B48C (لون Tan).

أ. تعديل الصورة في المواضيع ذات الصلة

ابحث عن كود "Ultimate Related Posts" الذي أضفناه. ستجد بداخله هذا السطر:

code JavaScript

    : 'https://i.imgur.com/R9J34z6.png';
  

استبدل رابط الصورة بكود الـ SVG التالي. انتبه للأقواس وعلامات الاقتباس.

code JavaScript

    : 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3" style="background-color:%23D2B48C;"%3E%3C/svg%3E';
  

شرح الكود: هذا الكود هو عبارة عن صورة SVG مضمنة، تقوم فقط برسم مربع لونه بني فاتح (#D2B48C).

ب. تعديل الصورة في المشاركات الشائعة (والأدوات الأخرى)

هذا التعديل مهم جدًا لأنه سيؤثر على كل الأدوات التي تستخدم صورًا مصغرة (مثل المشاركات الشائعة، التدوينة المميزة، إلخ).

1. ابحث عن هذا الكود في قالبك (ستجده في نهاية القالب تمامًا):

   code Html

       <b:defaultmarkups>
     

2. داخل هذا الوسم، ابحث عن هذا السطر:

   code Html

       <img expr:alt='data:post.title' src='https://i.imgur.com/R9J34z6.png'/>
     

3. استبدل رابط الصورة بنفس كود الـ SVG:

   code Html

       <img expr:alt='data:post.title' src='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3" style="background-color:%23D2B48C;"%3E%3C/svg%3E'/>
     

ملاحظة: إذا كنت تفضل استخدام صورة حقيقية بدلاً من لون سادة، فقط قم برفع الصورة التي تريدها (مثلاً على موقع Imgur) واستبدل رابط https://i.imgur.com... بالرابط الجديد الذي حصلت عليه في كلا المكانين.

بعد تطبيق هذه التعديلات، احفظ القالب. ستجد أن المحاذاة أصبحت دقيقة والصورة الاحتياطية تغيرت إلى اللون الذي تريده في كل مكان.