أمثلة على التنسيق واستخدام تضمين قائمة مواضيع Discourse على موقع خارجي

الدعم
1

أبحث عن مستخدمين استخدموا “تضمين قائمة بمواضيع Discourse في موقع آخر”

وتشارك النمط (CSS) الذي يستخدمونه لتغيير النمط الافتراضي.

في الوقت الحالي، جربت القائمة فقط. لكنني أرغب في تغيير النمط - أرى أن هذه وظيفة قوية جدًا :slight_smile:

مع خالص التحيات،

2

حقًا؟ هل لا يزال أحد يستخدم ميزة التضمين وقام بإنشاء نمط مخصص؟

إذا كان الأمر كذلك، فلا تتردد في مشاركته في هذا الموضوع.

3

أود أيضًا رؤية بعض الأمثلة على ذلك!

4

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

topics
topics768×560 51.5 KB

كود نموذج البحث والتنسيق وقائمة المواضيع:

ملخص 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://adams-discourse.com/javascripts/embed-topics.js"></script>
<style>

* {
  box-sizing: border-box;
}

#form {
position:absolute;
  left: 22px;
  top:5px;
  width:55%;
}

form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
    }

form.example button {
  float: left;
  width: 19%;
  padding: 10px;
  background:#1e825b;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: green;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}

d-topics-list iframe{
position:absolute;
width: 100%!important;
top:-10px;
}
</style>

</head>
<body>
<d-topics-list discourse-url="https://adams-discourse.com" template="complete" category="9" per-page="6" allow-create="true" ></d-topics-list>
<div id="form">
<form class="example" action="https://adams-discourse.com/search?q=" target="_blank">
   <input placeholder="البحث في هذا المنتدى" aria-label="البحث في هذا المنتدى" type="text" id="q" name="q" value="">
  <button type="submit"><i class="fa fa-search"></i></button>
</form> </div>

للحصول على تخطيط الصندوق، استخدمت flex بدلاً من grid في CSS المضمّن الخاص بـ Discourse.

ملخص 
.topics-list {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 8px 8px 0 8px;
  margin: 3px 3px 0 0;
  
.topic-list-item .main-link {
    border: 1px solid gray;
    margin: 5px;
    width: 250px;
    height: 90px;
    }
  
    .topic-column-wrapper {
      flex-direction: column-reverse;
      
      .topic-column.details-column {
        width: 100%;
      }

.topic-created-at {
    padding-left: 0!important;
    font-size:13px;
    }

      .topic-column.featured-image-column .topic-featured-image img {
        display:none;
      }
    }
}

.new-topic-btn {
    float: left;
    margin: 16px 0 0 58%;
    height: 40.5px;;
    background:#1e825b;
}
.new-topic-btn:hover {
    background: rgb(73, 130, 5);
}
5

@adamgpope إذا فهمت هذا بشكل صحيح، فإن ما عرضته هنا (شريط البحث، والمواضيع، وما إلى ذلك) مضمن في موقع خارجي؟ إذا كان الأمر كذلك، فهذا مذهل!

6

عذرًا على إحياء موضوع قديم جدًا ولكن…
أود أيضًا رؤية بعض الأمثلة على تنسيق القائمة المضمنة للمواضيع. تبدو نسختي مثل نسخة الهاتف على سطح المكتب

image
image542×218 13.8 KB

كيف أجعلها بعرض كامل؟
عذرًا على سؤال المبتدئين

تعديل:
للإجابة على سؤالي بنفسي
باختصار
كان يجب وضع ما يلي في الصفحة التي تم تضمين القائمة فيها

      d-topics-list iframe{
        width: 100%!important;
        }

تبدو رائعة على الهاتف المحمول أيضًا!!

لقد اكتشفت هذا من هذا الموضوع