هل يمكن إضافة فاصل/مسافة هنا وإنشاء صندوق CSS جديد؟

ليس لدي فكرة عن كيفية شرح ذلك، لذا سأرفق صورة:

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

يبدو أن منطقة المواضيع لديها معرف div هو suggested-topics بفئة div هي more-topics__list وأعتقد أن الصندوق المستدير بالكامل الذي يحيط بكل ذلك هو main-outlet ولكني لا أستطيع تحديد أي منها هي المنطقة المذكورة أعلاه حيث توجد أيقونة جرس التتبع.

لذلك، أريده أن يبدو هكذا:

المربعات الحمراء تشير إلى “المربعات/الفقاعات” التي أشرت إليها أعلاه. الخط البرتقالي بينهما هو المكان الذي أريد أن تكون فيه المسافة بينهما. ونعم، لقد قرأت جميع مواضيع CSS الموصى بها عادةً وما إلى ذلك. لا يمكنني معرفة ذلك بعد حوالي 6 ساعات. من خلال التجربة، يبدو أنه إذا قمت بما يلي:

.more-topics__list{
  display:none;
}

فإن ذلك يزيل فعليًا كل الأشياء بين أيقونة جرس التتبع و “هل تريد القراءة المزيد؟…” في الأسفل، لكن هذا لا يساعدني حقًا في الوصول إلى أي مكان عندما أريد الاحتفاظ بالمحتوى، فقط تقسيم الأقسام.

لتقسيم الأقسام إلى حاويتين، ستحتاج إلى تغيير القالب الأساسي. لا أعتقد أنه يمكنك تعديل القالب الافتراضي باستخدام CSS فقط، لأن:

ولا يوجد غلاف آخر في القالب الافتراضي.

يمكنك التحقق مما إذا كان هناك منفذ للمكون الإضافي هناك

مرحباً :wave:

أفترض أنك تستخدم :cloud: سمة Discourse Air.

يمكنك تحقيق شيء كهذا.

CSS شائع

body.archetype-regular,
body.archetype-banner,
body.archetype-private_message {
  #main-outlet {
    margin-top: 30px;
    margin-bottom: 0px;
    background: transparent !important;
    box-shadow: none;
    padding: 0em 0em 5%;
    width: 100% !important;
  
    #topic-title {
      margin-bottom: 0;
      background: var(--secondary);
      padding: 3em 3em 1em;
      border-radius: 1em 1em 0 0;
    }
  
    .container.posts {
      margin-bottom: 0;
      background: var(--secondary);
      padding: 0 3em var(--below-topic-margin);
    }
  
    .topic-above-footer-buttons-outlet.presence {
      margin: 0;
      padding: var(--below-topic-margin) 0;
      background: var(--secondary);
    }
  
    #topic-footer-buttons {
      max-width: 100%;
      background: var(--secondary);
      border-radius: 0 0 1em 1em;
      margin: 0;
      padding: var(--below-topic-margin) 3em 1em;
    }
  
    .more-topics__container {
      border-radius: 1em;
      background: var(--secondary);
      max-width: 100%;
      padding: 3em;
    }
  }
}
4 إعجابات

هاها، هذا هو الخيار الذي لن أفكر فيه لكمية العمل! أحسنت صنعًا يا @Don :tada:

إعجابَين (2)

شكراً جزيلاً على هذا الرد!

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.