Ejemplos de estilo y uso de incrustar una lista de Temas de Discourse en un sitio externo

Soporte
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 Me gusta
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 me gusta
3

¡Me encantaría ver algunos ejemplos de esto también!

4

He hecho algunos ajustes y agregué una barra de búsqueda en la parte superior de la lista de temas. Así es como se ve mi embed:

topics
topics768×560 51.5 KB

Código para el formulario de búsqueda, los estilos y la lista de temas:

Resumen 
<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="Buscar en este foro" aria-label="Buscar en este foro" type="text" id="q" name="q" value="">
  <button type="submit"><i class="fa fa-search"></i></button>
</form> </div>

Para obtener el diseño de cuadros, en lugar de grid utilicé flex en los CSS incrustados de Discourse.

Resumen 
.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 Me gusta
5

@adamgpope Si entiendo esto correctamente, ¿lo que has mostrado aquí (barra de búsqueda, temas, etc.) está incrustado en un sitio externo? Si es así, ¡es asombroso!

6

Lo siento por revivir un hilo muy antiguo, pero…
También me gustaría ver algunos ejemplos de cómo estilizar la lista incrustada de temas. La mía se ve como la versión del teléfono en el escritorio

image
image542×218 13.8 KB

¿cómo hago que ocupe todo el ancho?
Perdón por la pregunta de novato

EDITAR:
Para responder a mi propia pregunta
EN RESUMEN
lo siguiente tuvo que colocarse en la página donde está incrustada la lista

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

¡¡se ve genial en móvil también!!

Descubrí esto en este hilo