# Examples of styling and use of Embedding a list of Discourse Topics on a external site **URL:** https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672 **Category:** Support **Created:** [10 oktober 2019 om 08:31 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672 "2019-10-10T08:31:35Z") **Posts on this page:** 6 **Page:** 1
### Author: ![frold](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frold/32/82547_2.png) [@frold](https://meta.discourse.org/u/frold) #### Post date: [10 oktober 2019 om 08:31 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672/1 "2019-10-10T08:31:35Z")
Im looking for users who have used the " [Embedding a list of Discourse Topics in another site](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911)" 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, ---
### Author: ![frold](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frold/32/82547_2.png) [@frold](https://meta.discourse.org/u/frold) #### Post date: [15 oktober 2019 om 12:42 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672/2 "2019-10-15T12:42:03Z")
Really? No one is using the embedding feature and have made a custom style? If so, feel free to share in this thread. ---
### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on) #### Post date: [31 augustus 2020 om 20:00 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672/3 "2020-08-31T20:00:28Z")
I would love to see some examples of this, as well! ---
### Author: ![adamgpope](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/adamgpope/32/121658_2.png) [@adamgpope](https://meta.discourse.org/u/adamgpope) #### Post date: [12 mei 2021 om 16:58 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672/4 "2021-05-12T16:58:57Z")
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](https://global.discourse-cdn.com/meta/original/4X/6/d/8/6d8996dd6656be12eb64b38a5d2e7a9b633dfeb0.png) Code for the search form, styling, and topics list: > **Summary** > > ``` > > > > > > > >
>
> > >
> > ``` 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); > } > > ``` ---
### Author: ![Nick\_Chomey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nick_chomey/32/215378_2.png) [@Nick\_Chomey](https://meta.discourse.org/u/Nick_Chomey) #### Post date: [21 februari 2022 om 15:10 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672/5 "2022-02-21T15:10:58Z")
@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! ---
### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe) #### Post date: [4 januari 2025 om 16:44 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672/6 "2025-01-04T16:44:47Z")
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](https://global.discourse-cdn.com/meta/original/4X/2/f/c/2fcd3bf8b07e3c5b745bacc6fbeba92907badcfd.png) 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 ```plaintext ``` looks great on mobile as well!! I figured this out from this thread > [@Embedding a list of Discourse Topics in another site](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/110): > > The CSS needs adding to your site, rather than Discourse’s embedded, CSS. So you’d have something like this: \ \ \