# Different look for details-block

**URL:** <https://meta.discourse.org/t/different-look-for-details-block/320134>\
**Category:** Development\
**Tags:** hide-details\
**Created:** [August 5, 2024, 10:23am UTC](https://meta.discourse.org/t/different-look-for-details-block/320134 "2024-08-05T10:23:56Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [August 5, 2024, 10:23am UTC](https://meta.discourse.org/t/different-look-for-details-block/320134/1 "2024-08-05T10:23:56Z")

</div>

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

Screenshot tells enough, I reckon:

 ![IMG_3465](https://global.discourse-cdn.com/meta/original/4X/8/8/0/88046329d2d1096d68933d5cfc243bc8b59d281a.jpeg)

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)

```plaintext
/*- 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?

---

_[View the full topic](https://meta.discourse.org/t/different-look-for-details-block/320134)._