Inserta texto o imágenes en cualquier lugar de tu sitio usando pseudo-elementos de CSS

[Discourse]

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

1. Para que funcione, necesitaremos usar la consola de desarrollador presente en los principales navegadores. Para abrirla, simplemente pulsa F12.

   

2. Selecciona el elemento donde quieras añadir el texto, ya sea before o after.

   

   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.

3. Comienza a editar. Añade el sufijo :before o :after a la clase y agrega un texto utilizando la propiedad content.

   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.

4. 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;
   }
   

5. 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::before por .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 :after se inserta después de un texto. Si no necesitas personalizaciones especiales, es aconsejable cambiar el texto original mediante /admin/customize/site_texts en 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 ::before y ::after está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.