Change the carton category colors

Product Support

AI-generated summary

The discussion is about changing the carton category colors in a Discourse forum. Eduardo_Braga asked for help with changing the colors using CSS and provided an image of the current colors. tshenry provided SCSS code to change the colors for desktop, including the dropdown menu and categories. Eduardo_Braga asked about changing the colors for mobile and provided an image of the mobile layout. tshenry provided the mobile CSS code to change the dropdown colors. However, Eduardo_Braga had trouble finding the CSS selector to change the icon color. tshenry mentioned that the SVG icons are included in the original reply and recommended using the browser’s web inspector to find the correct CSS selectors.

1

Need help to change colors CSS

cores

2

Here’s something that you can play around with:

.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;
          }
        }
      }
    }
  }
}
3

Mobile? CSS

imagem
imagem640×1136 151 KB

4

Here’s the Mobile CSS for that dropdown:

.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

5

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

6

The SVG icons have been added to my original reply for completeness.