Inserta texto o imágenes en cualquier parte de tu sitio con pseudoelementos CSS

[Discourse]

Así que, quieres insertar algún texto o imagen en tu sitio de Discourse.

En la mayoría de los casos, es suficiente modificar el texto desde /admin/customize/site_texts.
Sin embargo, a veces nuestro deseo es agregar una oración 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 poder trabajar, necesitaremos usar la consola de desarrollador presente en los navegadores principales. Para abrirla, simplemente presiona F12.

   

2. Selecciona el elemento donde, before o after, deseas agregar texto.

   

   Como puedes ver, cada vez que el mouse pasa sobre un elemento, este se resalta y la clase correspondiente se selecciona automáticamente en el HTML y el CSS a la derecha. Antes de editar la hoja de estilos de Discourse, haz una prueba en vivo, así que después de elegir el elemento sobre el que operar, simplemente haz clic en el icono . Esto agregará una nueva regla al CSS que podemos modificar según nuestras necesidades.

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

   Agregar una imagen es un poco más complicado si no conoces el 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á donde se utilice la clase específica que hayas seleccionado. A veces necesitas especificar en qué elemento deseas que aparezca el nuevo texto, agregando el elemento padre al CSS.

4. Personalízalo. Conociendo un poco de CSS, es fácil personalizar el estilo del texto como desees.

   

   .fancy-title::after {
     content: "ANOTHER TEXT " "\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, agrega 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 agregar 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 a .topic-body.clearfix::after.
  De la misma manera, es posible agregar un texto plano before o after:

  .topic-body.clearfix::before {
    content: "DISCOURSE ROCKS!";
    color: red;
    font-weight: bold;
    padding-left: 11px;
  }
  

  
  

• Botones de Publicación

  
  

  .nav.post-controls .actions::before {
    color: red;
    content: "Hello from Discourse";
  }
  

• Línea de Tiempo

  

  .topic-timeline::before {
    color: red;
    content: "Hello World";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Hello again";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Hey,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "It's me again!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Start Date ";
  }
  
  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: " Now Date";
  }
  

• Botones del Pie de Página

  

  #topic-footer-buttons::before {
    content: "THESE ARE FOOTER BUTTONS";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "CONTENT AFTER GO HERE";
    border: 2px solid;
  }
  

  En el último caso, debe notarse que el contenido de :after se inserta después de un texto. Si no necesitas personalizaciones especiales, es aconsejable cambiar el texto original a través de /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: " Share";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Like";
  }
  

Ref: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

---

Nota: Los pseudo-elementos generados por ::before y ::after están contenidos por la caja de formato del elemento, y por lo tanto no se aplican a elementos reemplazados como <img>, o a elementos <br>. Fuente: ::after CSS pseudo-element - CSS | MDN

En otras palabras, esto no funcionará para elementos “auto-cerrados” que no pueden tener elementos hijos. Es intuitivo pensar que los pseudo-elementos son como:

{::before is here}<tag>text content</tag>{::after is here}

cuando en realidad es

<tag>{::before is here}text content{::after is here}</tag>

---

Este documento está controlado por versiones - sugiere cambios en github.