أنا فقط أقوم بإعداد موقعي، وأحاول إضافة صورة إلى قسم الرأس العلوي.
تقول التعليمات في ‘الإعدادات > العلامة التجارية’;
استخدم صورة مستطيلة عريضة بارتفاع 120 ونسبة أبعاد أكبر من 3:1
لذلك أستخدم صورة بصيغة PNG بحجم 120 بكسل × 2000 بكسل، وكنت أتوقع أن يتم وضعها على اليسار وملء الرأس بالكامل، لكنها لا تفعل ذلك!! ما الخطأ الذي ارتكبته؟
من خلال لقطة الشاشة الخاصة بك، يبدو أن الصورة مضبوطة بشكل صحيح على الجانب الأيسر. يتم عرض رأس صفحة Discourse داخل عنصر div يحمل اسم wrap، ويتم تقييد عرضه. هذا هو السبب في أن الشعار ليس في أقصى يسار الشاشة.
تطلب التعليمات منك رفع صورة بارتفاع 120 بكسل، ولكن عند عرض هذه الصورة على Discourse، يتم تقليل ارتفاعها إلى حوالي 31 بكسل. هذا يعني أن عرض الصورة التي قمت برفعها سيتم قسمته على 4 عند عرضها على موقعك. يبدو لي أن الشعار في لقطة الشاشة يبلغ عرضه حوالي 660 بكسل، لذا أعتقد أنه يتم عرضه بشكل صحيح.
إذا كان لديك شعار أضيق متاح، فقد يكون من الجيد تجربته ورؤية كيف يبدو.
شكرًا لك يا سيمون، أود أن يملأ الشعار رأس الصفحة بالكامل، هل هذا ممكن؟
حتى مع تقليل عرض الصورة، لا يزال مقيدًا بارتفاع 31 بكسل ولا يبدو جيدًا.
من الممكن نظريًا ملء معظم الرأس، لكن قد يتطلب ذلك بعض التجربة والخطأ للوصول إلى النتيجة الصحيحة. قد تجد أنك بحاجة إلى تعديل CSS لموقعك للقيام بذلك. إذا كنت مهتمًا بذلك، فراجع دليل المبتدئين لاستخدام سِمات Discourse ودليل المطورين لسِمات Discourse.
بالنظر إلى تعليماتنا للإعداد logo، أعتقد أنه يجب علينا تقديم نسبة أبعاد مثالية. فمع أن الشعار في لقطة الشاشة التي أرسلتها له نسبة أبعاد أكبر من 3:1، إلا أنه يبدو لي أن الشعار عريض جدًا. إذا نظرت إلى الشعار المستخدم في منتدى Discourse Meta، فسترى أنه يُعرض بحجم يقارب 150 × 40 بكسل. وتلك تبدو لي النسبة المثالية للأبعاد - أقل بقليل من 4:1.
لتحقيق التأثير المطلوب، قد ترغب في استخدام بعض تنسيقات CSS.
مثال:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
أعتقد أنك لم تفهم هدفي. الأمر لا يتعلق بالتأثير، بل بتعبئة مربع الرأس بصورة، وهو حاليًا مقيد بارتفاع 31 بكسل.
هل يمكنك ربط صورتك هنا؟
أفهم مشكلتك إذن. ومع ذلك، إذا كان تحقيق ما تريده باستخدام صورة أمرًا صعبًا، فلماذا لا ترفع الشعار بدون التدرج اللوني، وتضيف التدرج عبر CSS؟ يبدو لي ذلك أسهل وأكثر وضوحًا. 
لكن ربما لا يمكن تحقيق الصورة النهائية باستخدام CSS؟
نعم، صحيح.
لقد عثرت للتو على هذا المنتدى والذي يبدو أنه يحقق ما أريده.
بعد المزيد من البحث، وجدت CSS الذي استخدموه، لكنني جديد هنا، وما زلت أحاول فهم كيفية إضافة CSS لإجراء مثل هذه التغييرات.
نعم، يبدو أن هذا هو المسار الصحيح 
أحتاج فقط الآن إلى فهم كيفية إضافة ذلك CSS.
أنا أستخدم سمة “ظلال الأزرق”.
أعمل على الدليل الخاص بـ Discourse، لكن ربما أحتاج إلى قراءة المزيد.
شكرًا لك، لقد تمكنت من متابعة الدليل التعليمي أعلاه، وأنا على وشك الانتهاء!
لقد ساعدتني في فهم المزيد قليلاً حول كيفية عمل الأمور مع Discourse.
سأقضي بعض الوقت الليلة لأتعلم المزيد قليلاً.
شكرًا مرة أخرى على مساعدتك
بخصوص الموضوع المتعلق برأس Talksurf;
أستطيع رؤية مصدر صورة الخلفية، لكنني لا أستطيع تحديد مكان صورة ‘Talksurf’ على اليسار، التي تطفو فوق صورة الخلفية.
عند إضافة ‘Talksurf’ كصورة في الإعدادات > العلامة التجارية > الشعار، تظهر الصورة بحجم أصغر بكثير لأن Discourse تصغر ارتفاعها الأصلي البالغ 120 بكسل إلى 31 بكسل فقط. بينما ارتفاع Talksurf أكبر بكثير من 31 بكسل.
شعار Talksurf هو شعار عادي، تم رفعه في قسم العلامة التجارية بالإدارة.
لقد قمت برفع نفس الشعار بالضبط وحصلت على شعار بارتفاع 40 بكسل دون أي تخصيص:
لذلك لا أفهم كيف يمكن أن يكون ارتفاعه 31 بكسل في منتداك. هل لديك رابط له حتى أتمكن من فحص HTML و CSS؟
أيضًا، إليك كيفية معرفة كيفية تخصيصهم للرأس:
شكرًا لمساعدتك، الرابط هو https://yas-cfr.discourse.group/، وكما تلاحظ، باستخدام نفس الشعار الذي تستخدمه، أحصل على ارتفاع قدره 35 بكسل، وهو يختلف عن ارتفاعك (40 بكسل).
أبعاد صورة talksurf هي 322 × 63 بكسل.
تحتاج إلى إزالة قاعدة CSS هذه التي لديك:
.d-header #site-logo {
max-height: 35px !important;
}
ربما يكون هذا مكتوبًا في نسقك (theme)، لذا ستحتاج إلى تجاوزها.
لاحظ أنه نظرًا لأن القاعدة تستخدم !important، فستحتاج إلى إضافة ذلك أيضًا في قاعدتك الخاصة:
.d-header #site-logo {
max-height: none !important;
}
