أدخل نصًا أو صورًا في أي مكان على موقعك باستخدام عناصر CSS الوهمية

[Discourse]

إذن، تريد إدراج بعض النص أو الصورة في موقع Discourse الخاص بك.

في معظم الحالات، يكون تعديل النص من /admin/customize/site_texts كافيًا.
لكن في بعض الأحيان، قد نرغب في إضافة جملة بين كتلتين مختلفتين، بدلاً من تعديل أحد العناصر الموجودة.

لنرَ كيف نفعل ذلك باستخدام خاصتَي :before و :after في CSS3.

الخطوات الأساسية

1. للعمل، سنحتاج إلى استخدام وحدة التحكم للمطورين (developer console) الموجودة في المتصفحات الرئيسية. لفتحها، ما عليك سوى الضغط على F12.

   

2. اختر العنصر الذي تريد إضافة نص before أو after إليه.

   

   كما ترون، كل مرة يمر فيها المؤشر فوق عنصر، يتم إبرازه ويتم تحديد الفئة (class) المقابلة تلقائيًا في HTML و CSS على اليمين. قبل تحرير ورقة أنماط Discourse، قم بإجراء اختبار مباشر، فبعد اختيار العنصر الذي تريد العمل عليه، انقر فقط على أيقونة . ستضيف هذه الأيقونة قاعدة جديدة إلى CSS يمكننا تعديلها وفقًا لاحتياجاتنا.

3. ابدأ التحرير. أضف البادئة :before أو :after إلى الفئة (class)، وأضف نصًا باستخدام خاصية content.

   إضافة الصورة أكثر تعقيدًا قليلاً إذا لم تكن على دراية بـ CSS، لكن من الجيد اتباع نمط مشابه:

   background-image: url("url-goes-here");
   background-repeat: no-repeat;
   background-size: your-value;
   content: "";
   width: your-value;
   height: your-value;
   display: inline-block;
   

   قبل (Before):

   

   وبعد (After):

   

   تذكّر أن النص سيظهر في أي مكان تُستخدم فيه الفئة (class) المحددة. في بعض الأحيان، تحتاج إلى تحديد العنصر الذي تريد ظهور النص الجديد عليه، عن طريق إضافة العنصر الأب إلى CSS.

4. خصّصه. بمعرفة بسيطة بـ CSS، من السهل تخصيص نمط النص كما تريد.

   

   .fancy-title::after {
     content: "ANOTHER TEXT " "\f072";
     color: violet;
     font-family: Fontawesome;
     background: linear-gradient(to right, #7ce5df 27%, #f1da36 100%);
     font-size: 18px;
     padding: 2px 4px;
     border: 1px solid;
   }
   

5. بمجرد رضاك، أضف تعديلاتك إلى CSS الخاص بموقعك من خلال إنشاء مكوّن سمة (theme component).

---

نتابع ببعض الأمثلة العملية:

• عنوان الموضوع (Topic Title)

  قد يكون من المفيد لبعض المواقع إضافة صورة، أو بانر، أو إعلان مخصص قبل أو بعد عنوان كل منشور.

  

  #topic-title::before {
    background-image: url(your-URL-here);
    background-repeat: no-repeat;
    background-size: 750px 335px;
    width: 750px;
    height: 335px;
    display: inline-block;
    content: "";
  }
  
  #topic-title::after {
    background-image: url(your-URL-here);
    background-repeat: no-repeat;
    background-size: 800px 295px;
    width: 800px;
    height: 295px;
    display: inline-block;
    content: "";
  }
  

• نص الموضوع (Topic Body)

  

  .topic-body.clearfix::before {
    background-image: url(your-URL-here);
    max-height: 2.8571em;
    width: 690px;
    height: 184px;
    background-size: auto 2.8571em;
    background-repeat: no-repeat;
    margin-left: 11px;
    margin-bottom: 0.25em;
  }
  

  أو بعد (after):

  

  ما عليك سوى تغيير .topic-body.clearfix::before إلى .topic-body.clearfix::after.
  وبالمثل، من الممكن إضافة نص عادي before أو after:

  .topic-body.clearfix::before {
    content: "DISCOURSE ROCKS!";
    color: red;
    font-weight: bold;
    padding-left: 11px;
  }
  

  
  

• أزرار المنشور (Post Buttons)

  
  

  .nav.post-controls .actions::before {
    color: red;
    content: "Hello from Discourse";
  }
  

• الخط الزمني (Timeline)

  

  .topic-timeline::before {
    color: red;
    content: "Hello World";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Hello again";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Hey,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "It's me again!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Start Date ";
  }
  
  timeline-container .topic-timeline .start-date::after {
    color: goldenrod;
    content: " \f060";
    font-family: Fontawesome;
  }
  
  .widget-link.now-date::before {
    content: "\f061 ";
    color: burlywood;
    font-family: Fontawesome;
  }
  
  .widget-link.now-date::after {
    color: burlywood;
    content: " Now Date";
  }
  

• أزرار التذييل (Footer Buttons)

  

  #topic-footer-buttons::before {
    content: "THESE ARE FOOTER BUTTONS";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "CONTENT AFTER GO HERE";
    border: 2px solid;
  }
  

  في الحالة الأخيرة، تجدر الإشارة إلى أن محتوى :after يُدرج بعد نص. إذا لم تكن بحاجة إلى تخصيصات خاصة، فمن المستحسن تغيير النص الأصلي عبر /admin/customize/site_texts بدلاً من تحرير CSS.

• المواضيع المقترحة (Suggested Topics)

  

  #suggested-topics::before {
    content: "";
    background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
    width: 690px;
    height: 184px;
    background-size: 690px 184px;
    background-repeat: no-repeat;
    display: inline-block;
  }
  
  #suggested-topics::after {
    content: "";
    background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
    width: 690px;
    height: 184px;
    background-size: 690px 184px;
    background-repeat: no-repeat;
    display: inline-block;
  }
  

• إجراءات الموضوع (Topic Actions)

  

  .widget-button.btn-flat.share.no-text.btn-icon::after {
    content: " Share";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Like";
  }
  

مرجع: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

---

ملاحظة: العناصر الزائفة (pseudo-elements) التي يولدها ::before و ::after محتوية داخل صندوق تنسيق العنصر، وبالتالي لا تنطبق على العناصر المستبدلة مثل <img>، أو على عناصر <br>. المصدر: ::after CSS pseudo-element - CSS | MDN

بمعنى آخر، لن يعمل هذا مع العناصر “المغلقة ذاتيًا” التي لا يمكن أن تحتوي على عناصر فرعية. من المنطقي التفكير بأن العناصر الزائفة تكون على النحو التالي:

{::before is here}<tag>text content</tag>{::after is here}

في حين أن الواقع هو

<tag>{::before is here}text content{::after is here}</tag>

---

هذا المستند مُتحكَّم في إصداراته - اقترح تعديلات على github.