CSS لزيادة ارتفاع الـ logo والـ header من عرض الـ desktop إلى عرض الـ Mobile

من سطح مكتب الكمبيوتر الخاص بي، عبر المُفتش في فايرفوكس، فإن وسم CSS الذي يتلاعب بارتفاع الشعار هو:

.d-header .title {
  --d-logo-height: 4em;
}

ومع ذلك، لاحظت أنه عندما أقوم بإدخال وسم CSS هذا في السمة الافتراضية في محرر CSS ضمن سطح المكتب، فإنه لا يؤثر على ارتفاع الشعار كما هو معروض على سطح مكتب الكمبيوتر الخاص بي ولا على الهاتف المحمول.
ومع ذلك، إذا قمت بإدخال نفس كود CSS ضمن الهاتف المحمول، فإنه يغير ارتفاع الشعار ليس فقط على سطح مكتب الكمبيوتر الخاص بي ولكن أيضًا على الهاتف المحمول. هل هذه مشكلة في discourse أم أنني
أفوت شيئًا ما.

إعجاب واحد (1)

مرحباً،

فقط في حال، أين وضعت هذا الـ CSS؟

إعجابَين (2)

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

أيضًا، إذا كنت تختبر الأشياء محليًا، فلا تنسَ إلحاق ?mobile_view=1 بعنوان URL.

3 إعجابات

من سطح مكتب الكمبيوتر الخاص بي، عبر المُفتش في فايرفوكس، فإن وسم CSS الذي يتحكم في ارتفاع الشعار هو:

.d-header .title {
  --d-logo-height: 4em;
}

ومع ذلك، ألاحظ أنه عندما أقوم بإدخال وسم CSS هذا في السمة الافتراضية في محرر CSS ضمن سطح المكتب، فإنه لا يؤثر على ارتفاع الشعار كما يظهر على سطح مكتبي أو هاتفي المحمول.
ولكن، إذا قمت بإدخال نفس كود CSS ضمن الهاتف المحمول، فإنه يغير ارتفاع الشعار ليس فقط على سطح مكتبي ولكن أيضًا على الهاتف المحمول. هل هذه مشكلة في discourse أم أنني
أفتقد شيئًا ما.

لم أتمكن من إعادة إنتاج هذا الأمر، على الرغم من أنني حاولت محاكاة ما أعتقد أنك تفعله:

إنه يغير وضع الجوال بشكل صحيح، ولا يؤثر على سطح المكتب.

إذا أضفت هذا الـ CSS في المحرر، فإنه يعمل كما هو متوقع لسطح المكتب:

ولوضع الجوال، تحتاج فقط إلى ضبط الارتفاع للشعار، وليس للرأس:

آمل أن يساعد هذا.

إعجاب واحد (1)

شكرًا، لقد انتقلت إلى جهاز مختلف، جهاز يعمل بنظام Ubuntu 22.04 (خادم ويب) وتم عرض كود CSS في سلة CSS لسطح المكتب بشكل صحيح، لذا ربما تكون هناك مشكلة في المتصفح على جهاز الكمبيوتر المكتبي الآخر الذي يعمل بنظام Windows 7.
لاحظت أنني مقيد في سلة CSS للجوال بـ:

.d-header #site-logo {
  height: 3em;
}

أي محاولة لتجاوز 3em لا تزيد من ارتفاع الشعار على هاتفي الخلوي، GS23 - حتى بعد تحديث ذاكرة التخزين المؤقت.

أفكار؟

نعم، حاول إلغاء تعيين max-width على الشعار، يجب أن يحرره من أي قيود.

إعجاب واحد (1)

شكراً على المدخلات، لم أتمكن من العثور على هذا الخيار ضمن الإعدادات، هل يتم ذلك عبر CSS أم عبر إدخال سطر الأوامر في Rails، وإذا كان الأمر كذلك، فكيف يبدو ذلك؟

هذا سيكون CSS، كالتالي:

.d-header #site-logo {
  max-width: unset;
}

إذا فشل ذلك، أضف !important.

3 إعجابات

شكرا لمساعدتك:

للذين يأتون بعدي ويرغبون في زيادة حجم شعارهم في كل من العرض المكتبي والجوال.

  1. تخصيص → سمات → افتراضي → تحرير CSS/HTML

أ) ضع في صندوق سطح المكتب:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

ب) ضع في صندوق الجوال:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
إعجابَين (2)

يمكن أن تكون هذه قاعدة واحدة:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

أعتقد أنه يمكنك ضغط مجموعة القواعد الأولى أيضًا، لكنني لا أتذكر كيف على الفور.

إعجابَين (2)

هناك شيء آخر سيكون من المفيد إضافته وهو كيفية تقليل المسافة البادئة، وذلك لتحريك الشعار إلى اليسار في عرض الهاتف المحمول - أفكار؟

.wrap {
  padding-left: 0;
}

في هذه المرحلة، قد يكون من الجيد اتباع دورة تمهيدية في CSS لأن:

يمكن قراءة المزيد حول تطوير السمات الخاصة بك في فئة المطور.

إعجابَين (2)

شكرا لك تشارلي، أقدر ذلك.
أنا على دراية باستخدام Inspector، على سبيل المثال، Firefox واشتقاق بعض الحلول.

أي أفكار لماذا لا يكون تغيير حجم الشعار جزءًا من الوظائف الأساسية ضمن Discourse. العلامة التجارية لأي موقع ويب أمر بالغ الأهمية والافتقار إلى التفاصيل الدقيقة في هذا الصدد أمر مفاجئ.

إعجاب واحد (1)

“معالجة الشعار” ممكنة تمامًا، تمامًا مثل جميع أنواع التنسيق الأخرى، ضمن السمات ومكونات السمات.
ستحتاج إما إلى تعلم أساسيات html/css/js والاطلاع على وفرة الوثائق على meta لإنجاز الأمور بنفسك، أو ستحتاج إلى البحث عن شخص يمكنك توظيفه لإجراء التغييرات التي ترغب فيها.
يمكن القيام بالخيار الأخير في فئة السوق.
نظرًا لأنه تم الرد على سؤالك الأصلي، أعتقد أنه يمكننا إنهاء هذا الموضوع الآن.
أتمنى لك كل التوفيق مع منتدى الخاص بك.

3 إعجابات

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

3 إعجابات

مرحباً تشارلي،

بقولي “معالجة الشعار” كنت أشير إلى القدرة على تغيير حجم الشعار داخل واجهة المستخدم.

شكراً لمساعدتك.

تم إغلاق هذا الموضوع تلقائيًا بعد 30 يومًا من آخر رد. لم تعد الردود الجديدة مسموح بها.