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,

Really? No one is using the embedding feature and have made a custom style? If so, feel free to share in this thread.

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] Code for the search form, styling, and topics list: Summary * { 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; } 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); }

@adamgpope If I understand this correctly, what you’ve shown here (search bar, topics etc…) is embedded in an external site? If so, that’s amazing!

Sorry for bumping a really old thread but… I would also like to see some examples of styling the embedded list of topics. Mine looks like the phone version on desktop [image] how do I make it be full width? Sorry for newbie question EDIT: To answer my own question TL:DR the following had to be placed in the page the list is embedded in d-topics-list iframe{ width: 100%!important; } looks great on mobile as well!! I figured this out from this thread [image] Embedding a list of Discourse Topics in another site megaphoneAnnouncements The CSS needs adding to your site, rather than Discourse’s embedded, CSS. So you’d have something like this: d-topics-list iframe{ width: 100%!important; }

Examples of styling and use of Embedding a list of Discourse Topics on a external site

Product Support

jord8on (Jordan) August 31, 2020, 8:00pm 3

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

Topic		Replies	Views
Embed a list of Discourse topics onto an external site Integrations embedding , how-to	13	3820	September 17, 2025
Embedding a list of Discourse Topics in another site Announcements embedding	91	24308	February 25, 2024
Widget to embed in 3rd party websites Development	6	5653	June 27, 2022
How to Embed Recent and Popular Topics? Product Support	3	2410	November 23, 2019
Embed “Latest” on external site Product Support	2	1012	September 19, 2020

Examples of styling and use of Embedding a list of Discourse Topics on a external site

Related topics