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

Soporte
1

Estoy buscando usuarios que hayan utilizado “Incrustando una lista de temas de Discourse en otro sitio”

Y el estilo, y que quieran compartir el CSS que están usando para modificar el estilo predeterminado.

Por ahora solo he probado la lista, pero me gustaría cambiar el estilo; creo que es una función muy potente :slight_smile:

Saludos cordiales,

2

¿En serio? ¿Nadie está utilizando la función de incrustación y ha creado un estilo personalizado?

Si es así, siéntete libre de compartirlo en este hilo.

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

@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