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

Supporto
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 Mi Piace
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 Mi Piace
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 Mi Piace
5

@adamgpope Se ho capito bene, quello che hai mostrato qui (barra di ricerca, argomenti, ecc.) è incorporato in un sito esterno? Se sì, è fantastico!

6

Mi dispiace per aver riaperto una discussione molto vecchia ma…
Vorrei anche vedere alcuni esempi di styling dell’elenco incorporato di argomenti. Il mio assomiglia alla versione telefonica sul desktop

image
image542Ă—218 13.8 KB

come posso farlo diventare a larghezza intera?
Scusa per la domanda da principiante

MODIFICA:
Per rispondere alla mia domanda
TL:DR
quanto segue doveva essere inserito nella pagina in cui è incorporato l’elenco

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

ha un bell’aspetto anche su mobile!!

Ho capito questo da questa discussione