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

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