Aspecto diferente para details-block

Desarrollador
1

Intenté lograr un aspecto similar al que utiliza una empresa de medios finlandesa.

La captura de pantalla lo dice todo, supongo:

IMG_3465
IMG_34651306×887 166 KB

Solo tengo habilidades básicas para manipular CSS y no estoy seguro de si eso se puede hacer (fácilmente) con CSS. Pero mi primer intento salió… bueno, no muy bien.

Esto usé (los comentarios son para mí, por supuesto)

/*- Estilo personalizado para el elemento details - */
/* Reemplaza la imagen de fondo y el estilo del botón */
summary {
  background-color: #f5f5f5; /* Color de fondo */
  border: 1px solid #d8d8d8; /* Borde */
  padding: 10px; /* Relleno */
  border-radius: 5px; /* Esquinas redondeadas */
  cursor: pointer; /* Estilo del cursor */
  display: flex; /* Uso de Flexbox */
  justify-content: space-between; /* Alineación */
  align-items: center; /* Centrado vertical */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Elimina el marcador de lista predeterminado */
}
summary::after {
  content: '⮟'; /* Agrega una flecha */
  font-size: 20px; /* Tamaño de la flecha */
}

/*- Estilo personalizado para el contenido del elemento details - */
details[open] summary::after {
  content: '⮝'; /* Cambia la flecha hacia arriba al abrir */
}
details {
  margin-bottom: 10px; /* Margen inferior del bloque */
}
details > div {
  padding: 10px; /* Relleno del contenido */
}

Algunos los hice yo mismo y otros son sugerencias de GPT.

¿Ideas?

2 Me gusta
2

Hola @Jagster :wave:

He hecho un componente temático para esto… :tada:

9 Me gusta
3

Eres increíble :+1: Y ahora voy a investigar qué demonios hiciste.

¡Gracias!

3 Me gusta
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

6

Hace unos 20 años, hice un “hola mundo” con Visual Basic. Y he modificado algunos plugins de WordPress probando y errando, y una vez logré cambiar la propiedad de todo en mi VPS, empezando desde la raíz.

Esa gran solución ya no sigue [details .. open]. Conectado a esto Details block doesn’t obey open, creo.

¿El problema viene de esta parte?


cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

¿Por qué? Porque es similar a esto de Discourse :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>
1 me gusta