Different look for details-block

Development

AI-generated summary

In a Dev category discussion titled ‘Different look for details-block’ tagged ‘hide-details’, Jagster shared a CSS attempt to style <details> elements similarly to a Finnish media site, including custom arrows and hover effects. Despite some GPT-assisted code, results were unsatisfactory. Don responded with a ready-made theme component (GitHub repo) that visually mimics the desired behavior, demonstrated via video. Jagster thanked Don and began investigating the code. Later, Jagster noted the component no longer respects the open attribute on <details>, possibly linked to this Discourse meta thread. He suspects the issue lies in JavaScript forcibly setting details.setAttribute("open", ""), which mirrors Discourse’s own HTML output test — humorously noting the similarity. The thread reflects collaborative problem-solving around customizing Discourse’s <details> block with CSS/JS, while wrestling with platform-specific behavior.

1

I tried achieve similar look than one finnish media company uses.

Screenshot tells enough, I reckon:

IMG_3465
IMG_34651306×887 166 KB

I have only basic skill manipulate CSS, and I’m not sure if that can be done (easily) by CSS. But my first try went… well, not that good.

This I used (comment are for me, of course)

/*- Mukautettu tyyli details-elementille - */
/* Korvaa painikkeen taustakuva ja ulkoasu */
summary {
  background-color: #f5f5f5; /* Taustaväri */
  border: 1px solid #d8d8d8; /* Reunaviiva */
  padding: 10px; /* Sisennys */
  border-radius: 5px; /* Pyöristetyt kulmat */
  cursor: pointer; /* Kursorin tyyli */
  display: flex; /* Flexbox käyttö */
  justify-content: space-between; /* Tasaus */
  align-items: center; /* Kohdistus keskelle */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Poista oletus listamerkki */
}
summary::after {
  content: '⮟'; /* Lisää nuoli */
  font-size: 20px; /* Nuolen koko */
}

/*- Mukautettu tyyli details-elementin sisällölle - */
details[open] summary::after {
  content: '⮝'; /* Muuta nuoli ylös avatessa */
}
details {
  margin-bottom: 10px; /* Väliaika lohkoon */
}
details > div {
  padding: 10px; /* Sisennys sisältöön */
}

Some I made by myself and some are suggestions from GPT.

Ideas?

2

Hey @Jagster :wave:

I’ve made a theme component for this… :tada:

https://github.com/VaperinaDEV/discourse-custom-details

3

You are awesome :+1: And now I’ll dig what the heck you did.

Thanks!

6

First, I’ve done one hello world thingy using Visual Basic about 20 years ago. And I’ve tuned some WordPress plugins using the try/error method, and once I managed to change every ownership in my VPS, starting from the root.

That great solution doesn’t follow [details .. open] any more. Connected to that Details block doesn’t obey open I reckon.

Is the issue coming from this part:


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

Why that? Because it is similar to this from Discourse :joy:

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