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

I would love to see some examples of this, as well!

4

I’ve done a bit of tinkering, and added a search bar to the top of the list of topics. So my embed looks like this:

topics
topics768×560 51.5 KB

Code for the search form, styling, and topics list:

Summary 
<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="Search this forum" aria-label="Search this forum" type="text" id="q" name="q" value="">
  <button type="submit"><i class="fa fa-search"></i></button>
</form> </div>

To get the box layout, instead of grid I used flex in the Discourse Embedded CSS.

Summary 
.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