Un look différent pour details-block

Dev
1

J’ai essayé d’obtenir un look similaire à celui utilisé par une société de médias finlandaise.

La capture d’écran en dit assez, je pense :

IMG_3465
IMG_34651306×887 166 KB

Je n’ai que des compétences de base en manipulation CSS, et je ne suis pas sûr que cela puisse être fait (facilement) avec CSS. Mais mon premier essai n’a pas été… eh bien, pas très bon.

Ceci est ce que j’ai utilisé (les commentaires sont pour moi, bien sûr)

/*- Style personnalisé pour l'élément details - */
/* Remplace l'image d'arrière-plan et l'apparence du bouton */
summary {
  background-color: #f5f5f5; /* Couleur de fond */
  border: 1px solid #d8d8d8; /* Bordure */
  padding: 10px; /* Rembourrage */
  border-radius: 5px; /* Coins arrondis */
  cursor: pointer; /* Style du curseur */
  display: flex; /* Utilisation de Flexbox */
  justify-content: space-between; /* Alignement */
  align-items: center; /* Centrage vertical */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Supprime le marqueur de liste par défaut */
}
summary::after {
  content: '⮟'; /* Ajoute une flèche */
  font-size: 20px; /* Taille de la flèche */
}

/*- Style personnalisé pour le contenu de l'élément details - */
details[open] summary::after {
  content: '⮝'; /* Change la flèche vers le haut lors de l'ouverture */
}
details {
  margin-bottom: 10px; /* Marge dans le bloc */
}
details > div {
  padding: 10px; /* Rembourrage dans le contenu */
}

Certains ont été faits par moi-même et d’autres sont des suggestions de GPT.

Des idées ?

2 « J'aime »
2

Salut @Jagster :wave:

J’ai créé un composant de thème pour cela… :tada:

9 « J'aime »
3

Tu es génial :+1: Et maintenant, je vais creuser pour comprendre ce que diable tu as fait.

Merci !

3 « J'aime »
4

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

6

Pour commencer, j’ai fait un truc “hello world” en Visual Basic il y a environ 20 ans. Et j’ai ajusté quelques plugins WordPress par essais/erreurs, et une fois j’ai réussi à changer toutes les propriétés de mon VPS, en commençant par la racine.

Cette excellente solution ne suit plus [details .. open]. Connecté à cela Details block doesn’t obey open je suppose.

Le problème vient-il de cette partie :


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

Pourquoi cela ? Parce que c’est similaire à ceci de Discourse :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>
1 « J'aime »