Esempi di stile e utilizzo dell'incorporamento di un elenco di argomenti Discourse su un sito esterno

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

Ho fatto qualche modifica e aggiunto una barra di ricerca in cima all’elenco degli argomenti. Ecco come appare il mio embed:

topics
topics768Ă—560 51.5 KB

Codice per il modulo di ricerca, lo stile e l’elenco degli argomenti:

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

Per ottenere il layout a riquadri, invece di grid ho utilizzato flex nel CSS incorporato di Discourse.

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