Beispiele für Styling und Verwendung beim Einbetten einer Liste von Diskursthemen auf einer externen Website

Unterstützung
1

Im looking for users who have used the " Embedding a list of Discourse Topics in another site"

And the style and will share the CSS they are using to change the default style.

At the moment I have only tested the list. But would like to change the style - I see this a very powerfull function :slight_smile:

Best Regards,

4 „Gefällt mir“
2

Really? No one is using the embedding feature and have made a custom style?

If so, feel free to share in this thread.

1 „Gefällt mir“
3

Ich würde auch gerne einige Beispiele dazu sehen!

4

Ich habe ein wenig herumprobiert und eine Suchleiste oben in die Liste der Themen eingefügt. So sieht mein Embed aus:

topics
topics768×560 51.5 KB

Code für das Suchformular, das Styling und die Themenliste:

Zusammenfassung 
<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="Dieses Forum durchsuchen" aria-label="Dieses Forum durchsuchen" type="text" id="q" name="q" value="">
  <button type="submit"><i class="fa fa-search"></i></button>
</form> </div>

Um das Box-Layout zu erhalten, habe ich anstelle von grid in den Discourse Embedded CSS flex verwendet.

Zusammenfassung 
.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 „Gefällt mir“
5

@adamgpope Wenn ich das richtig verstehe, ist das, was Sie hier gezeigt haben (Suchleiste, Themen usw.), in eine externe Website eingebettet? Wenn ja, ist das erstaunlich!

6

Entschuldigung, dass ich einen sehr alten Thread hochhole, aber…
Ich würde auch gerne einige Beispiele für das Styling der eingebetteten Themenliste sehen. Meine sieht auf dem Desktop wie die Handyversion aus

image
image542×218 13.8 KB

wie mache ich, dass sie die volle Breite einnimmt?
Entschuldigung für die Anfängerfrage

EDIT:
Um meine eigene Frage zu beantworten
TL;DR
Folgendes musste auf der Seite platziert werden, auf der die Liste eingebettet ist

<style>
      d-topics-list iframe{
        width: 100%!important;
        }
</style>

sieht auch auf dem Handy super aus!!

Ich habe das aus diesem Thread herausgefunden