frold
10. Oktober 2019 um 08:31
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
Best Regards,
4 „Gefällt mir“
frold
15. Oktober 2019 um 12:42
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“
jord8on
(Jordan)
31. August 2020 um 20:00
3
I would love to see some examples of this, as well!
adamgpope
(Adam Pope)
12. Mai 2021 um 16:58
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:
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“
@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!
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
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
The CSS needs adding to your site, rather than Discourse’s embedded, CSS. So you’d have something like this:
<html>
<head>
<script src="https://jonathan5-discourse.com/javascripts/embed-topics.js">
</script>
<style>
d-topics-list iframe{
width: 100%!important;
}
</style>
</head>
<body>
<d-topics-list discourse-url="https://jonathan5-discourse.com" category="5" per-page="5"></d-topics-list>
</body>
</html>