I tried achieve similar look than one finnish media company uses. Screenshot tells enough, I reckon: [IMG_3465] 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?

Hey @Jagster :wave: I’ve made a theme component for this… :tada: https://github.com/VaperinaDEV/discourse-custom-details

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

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 bar

Different look for details-block

Development

Jagster (Jakke Flemming) August 6, 2024, 2:14pm 3

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

Thanks!

Topic		Replies	Views
Details in topic styling changes - Feedback UX completed , design-experiment	40	2695	December 5, 2023
Details block doesn’t obey open Bug hide-details , fixed	10	353	October 8, 2024
Hide details button style Theme component hide-details	2	987	December 1, 2023
Is there a way to change the position of "Hide Details"? Product Support hide-details	1	818	November 1, 2017
Display issue in the "hide details" element UX hide-details	3	929	June 20, 2022

Different look for details-block

Related topics