Así que quieres insertar algún texto o imagen en tu sitio de Discourse.
En la mayoría de los casos, para el texto basta con modificarlo desde /admin/customize/site_texts.
Sin embargo, a veces nuestro deseo es añadir una frase entre dos bloques distintos, en lugar de modificar uno de los elementos existentes.
Veamos cómo hacerlo utilizando las propiedades :before y :after en CSS3.
Pasos básicos
-
Para que funcione, necesitaremos usar la consola de desarrollador presente en los principales navegadores. Para abrirla, simplemente pulsa F12.
-
Selecciona el elemento donde quieras añadir el texto, ya sea
beforeoafter.
Como puedes ver, cada vez que el ratón pasa sobre un elemento, este se resalta y la clase correspondiente se selecciona automáticamente en HTML y CSS a la derecha. Antes de editar la hoja de estilos de Discourse, realiza una prueba en vivo; así, tras elegir el elemento sobre el que vas a trabajar, haz clic en el icono
. Esto añadirá una nueva regla al CSS que podremos modificar según nuestras necesidades. -
Comienza a editar. Añade el sufijo
:beforeo:aftera la clase y agrega un texto utilizando la propiedadcontent.Añadir una imagen es un poco más complicado si no conoces CSS, pero es buena práctica seguir un patrón similar:
background-image: url("url-goes-here"); background-repeat: no-repeat; background-size: your-value; content: ""; width: your-value; height: your-value; display: inline-block;Antes:
Y después:
Recuerda que el texto aparecerá en cualquier lugar donde se utilice la clase específica que hayas seleccionado. A veces es necesario especificar en qué elemento quieres que aparezca el nuevo texto, añadiendo el elemento padre al CSS.
-
Personalízalo. Conociendo un poco CSS, es fácil personalizar el estilo del texto como desees.
.fancy-title::after { content: "OTRO TEXTO " "\f072"; color: violet; font-family: Fontawesome; background: linear-gradient(to right, #7ce5df 27%, #f1da36 100%); font-size: 18px; padding: 2px 4px; border: 1px solid; } -
Una vez satisfecho, añade tus cambios al CSS de tu sitio creando un componente de tema.
Procedemos con algunos ejemplos prácticos:
-
Título del tema
Para algunos sitios puede ser útil añadir una imagen, un banner o un anuncio personalizado antes o después del título o de cada publicación.
#topic-title::before { background-image: url(your-URL-here); background-repeat: no-repeat; background-size: 750px 335px; width: 750px; height: 335px; display: inline-block; content: ""; } #topic-title::after { background-image: url(your-URL-here); background-repeat: no-repeat; background-size: 800px 295px; width: 800px; height: 295px; display: inline-block; content: ""; } -
Cuerpo del tema
.topic-body.clearfix::before { background-image: url(your-URL-here); max-height: 2.8571em; width: 690px; height: 184px; background-size: auto 2.8571em; background-repeat: no-repeat; margin-left: 11px; margin-bottom: 0.25em; }O después:
Simplemente cambia
.topic-body.clearfix::beforepor.topic-body.clearfix::after.
De la misma manera, es posible añadir texto plano antes o después:.topic-body.clearfix::before { content: "¡DISCOURSE ES GENIAL!"; color: red; font-weight: bold; padding-left: 11px; } -
Botones de publicación
.nav.post-controls .actions::before { color: red; content: "Hola desde Discourse"; } -
Línea de tiempo
.topic-timeline::before { color: red; content: "Hola Mundo"; } .topic-timeline::after { color: red; content: "Hola de nuevo"; } .timeline-scroller-content::before { color: violet; content: "Hola,"; } .timeline-scroller-content::after { color: violet; content: "¡Soy yo otra vez!"; } .timeline-container .topic-timeline .start-date::before { color: goldenrod; content: "Fecha de inicio "; } timeline-container .topic-timeline .start-date::after { color: goldenrod; content: " \f060"; font-family: Fontawesome; } .widget-link.now-date::before { content: "\f061 "; color: burlywood; font-family: Fontawesome; } .widget-link.now-date::after { color: burlywood; content: " Fecha actual"; } -
Botones del pie de página
#topic-footer-buttons::before { content: "ESTOS SON LOS BOTONES DEL PIE DE PÁGINA"; color: indianred; border: 2px solid; padding: 3px; } #topic-footer-buttons::after { color: indianred; content: "CONTENIDO DESPUÉS VA AQUÍ"; border: 2px solid; }En este último caso, cabe destacar que el contenido
:afterse inserta después de un texto. Si no necesitas personalizaciones especiales, es aconsejable cambiar el texto original mediante/admin/customize/site_textsen lugar de editar el CSS. -
Temas sugeridos
#suggested-topics::before { content: ""; background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png); width: 690px; height: 184px; background-size: 690px 184px; background-repeat: no-repeat; display: inline-block; } #suggested-topics::after { content: ""; background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png); width: 690px; height: 184px; background-size: 690px 184px; background-repeat: no-repeat; display: inline-block; } -
Acciones del tema
.widget-button.btn-flat.share.no-text.btn-icon::after { content: " Compartir"; } .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after { content: " Me gusta"; }
Ref: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009
Nota: Los pseudoelementos generados por
::beforey::afterestán contenidos en el cuadro de formato del elemento, y por lo tanto no se aplican a elementos reemplazados como<img>, ni a los elementos<br>. Fuente: ::after - CSS | MDN
En otras palabras, esto no funcionará para elementos «autocerrados» que no pueden tener elementos hijos. Es intuitivo pensar que los pseudoelementos son como:
{::before está aquí}<tag>contenido de texto</tag>{::after está aquí}
cuando en realidad es
<tag>{::before está aquí}contenido de texto{::after está aquí}</tag>
Este documento tiene control de versiones: sugiere cambios en GitHub.














