# Modifier les couleurs des catégories de cartons

**URL:** https://meta.discourse.org/t/change-the-carton-category-colors/118066
**Category:** Support
**Created:** [Mai 17, 2019, 10:04 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066 "2019-05-17T22:04:07Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Eduardo\_Braga](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eduardo_braga/32/110348_2.png) [@Eduardo\_Braga](https://meta.discourse.org/u/Eduardo_Braga)
#### Post date: [Mai 17, 2019, 10:04 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066/1 "2019-05-17T22:04:07Z")

</div>

Need help to change colors CSS

![cores](https://global.discourse-cdn.com/meta/original/3X/f/4/f4e6568eaee25cd5cca7cd9607fae1f3ec11f81e.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [Mai 18, 2019, 12:41 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066/2 "2019-05-18T00:41:42Z")

</div>

Here’s something that you can play around with:

```scss
.list-controls {
  .category-drop, .tag-drop {
    .select-kit-header {
      background: beige;
      color: black;
      svg {
        color: black;
      }
    }
    .select-kit-filter {
      background: beige;
      .filter-input {
        color: black;
      }
    }
    .select-kit-collection {
      background: beige;
      color: black;
      scrollbar-color: darkgray beige;
      webkit-scrollbar-color: darkgray beige;
  
      .select-kit-row {
        background: beige;
        color: darkgrey;
        .badge-wrapper.bullet span.badge-category {
          color: black;
          svg {
            color: black;
          }
        }
        &.is-highlighted {
          background: brown;
          color: lightgrey;
          .badge-wrapper.bullet span.badge-category {
            color: white;
          }
        }
      }
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Eduardo\_Braga](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eduardo_braga/32/110348_2.png) [@Eduardo\_Braga](https://meta.discourse.org/u/Eduardo_Braga)
#### Post date: [Mai 18, 2019, 2:39 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066/3 "2019-05-18T02:39:36Z")

</div>

Mobile? CSS

 ![imagem](https://global.discourse-cdn.com/meta/original/3X/b/d/bd79fb1cd38998dda01f763d32ab11a402b06985.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [Mai 18, 2019, 3:19 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066/4 "2019-05-18T03:19:27Z")

</div>

Here’s the Mobile CSS for that dropdown:

```scss
.list-controls {
  .nav-pills {
    .navigation-toggle {
      background: beige;
      a {
        color: black;
        &:hover {
          background-color: beige;
        }
      }
    }
    .drop {
      background: beige;
      a {
        color: brown;
      }
    }
  }
}

```

If you need to figure out any other components, I recommend learning how to use your browser’s web inspector to track down the correct CSS selectors. There are a bunch of free resources online to learn how to do this: [Google Search](https://www.google.com/search?q=find+css+selector+using+web+inspector)

---

<div class="post-metadata">

### Author: ![Eduardo\_Braga](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eduardo_braga/32/110348_2.png) [@Eduardo\_Braga](https://meta.discourse.org/u/Eduardo_Braga)
#### Post date: [Mai 19, 2019, 11:47 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066/5 "2019-05-19T23:47:16Z")

</div>

Okay, I did not find it to change the color icon

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [Mai 21, 2019, 12:26 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066/6 "2019-05-21T00:26:07Z")

</div>

The SVG icons have been added to [my original reply](https://meta.discourse.org/t/change-the-carton-category-colors/118066/2) for completeness.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [Juin 20, 2019, 12:26 UTC](https://meta.discourse.org/t/change-the-carton-category-colors/118066/7 "2019-06-20T00:26:23Z")

</div>

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