Anderes Aussehen für Details-Block

Entwickler
1

Ich habe versucht, ein ähnliches Aussehen wie das eines finnischen Medienunternehmens zu erzielen.

Der Screenshot sagt genug, denke ich:

IMG_3465
IMG_34651306×887 166 KB

Ich habe nur grundlegende CSS-Kenntnisse und bin mir nicht sicher, ob das (einfach) mit CSS gemacht werden kann. Aber mein erster Versuch war… nun ja, nicht so gut.

Das habe ich verwendet (Kommentare sind natürlich für mich)

/*- Benutzerdefinierter Stil für das details-Element - */
/* Ersetzt Hintergrundbild und Aussehen des Buttons */
summary {
  background-color: #f5f5f5; /* Hintergrundfarbe */
  border: 1px solid #d8d8d8; /* Randlinie */
  padding: 10px; /* Einrückung */
  border-radius: 5px; /* Abgerundete Ecken */
  cursor: pointer; /* Cursor-Stil */
  display: flex; /* Flexbox-Nutzung */
  justify-content: space-between; /* Ausrichtung */
  align-items: center; /* Zentrierung */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Standard-Listenpunkt entfernen */
}
summary::after {
  content: '⮟'; /* Pfeil hinzufügen */
  font-size: 20px; /* Pfeilgröße */
}

/*- Benutzerdefinierter Stil für den Inhalt des details-Elements - */
details[open] summary::after {
  content: '⮝'; /* Pfeil nach oben ändern, wenn geöffnet */
}
details {
  margin-bottom: 10px; /* Abstand zum Block */
}
details > div {
  padding: 10px; /* Einrückung zum Inhalt */
}

Einige habe ich selbst gemacht und einige sind Vorschläge von GPT.

Ideen?

2 „Gefällt mir“
2

Hallo @Jagster :wave:

Ich habe eine Theme-Komponente dafür erstellt… :tada:

9 „Gefällt mir“
3

Du bist großartig :+1: Und jetzt werde ich untersuchen, was zum Teufel du getan hast.

Danke!

3 „Gefällt mir“
4

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

6

Zuerst habe ich vor etwa 20 Jahren ein „Hallo Welt“-Ding mit Visual Basic gemacht. Und ich habe einige WordPress-Plugins mit der Versuch-und-Irrtum-Methode angepasst und einmal geschafft, jeden Besitz auf meinem VPS zu ändern, angefangen beim Root.

Diese großartige Lösung folgt nicht mehr [details .. open]. Verbunden damit Details block doesn’t obey open, vermute ich.

Kommt das Problem von diesem Teil:


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

Warum das? Weil es dem hier von Discourse ähnelt :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>
1 „Gefällt mir“