Icon panels: Change panel background color/category title color

By default, the Icon panels subcategory display will create white tiles with a colored icon, like this:

When you use the category icon background color, it will add a small square of color behind the icon only:

If you'd prefer to set the entire icon panel to use a colored background with a white icon, you can combine the icon color and background color with some Custom CSS:

You can choose to apply this Custom CSS to:

• All icon panels across your entire knowledge base (including your homepage)
• The icon panels on your homepage only (ignore categories)
• The icon panels in categories only (ignore the homepage)

See below for more details on each of these approaches. In all cases, you'll want to know the color you want to set the tiles to (this can be a hex code or RGB value) and the color you'd like to set the text to (we use white in our examples).

All icon panels, including homepage

You can choose to use the same color treatment across your entire knowledge base, anywhere icon panels are used. This will apply to icon panels on the homepage as well as any category landing pages where you're using the icon panels subcategory display option.

To set your knowledge base up to use the same treatment everywhere:

1. Go to Settings > Style.
2. In the Customize HTML, CSS, and JS section, be sure Custom CSS is selected.
3. Copy the CSS below and paste it into the Custom CSS editor. If you already have Custom CSS, we recommend adding it to the bottom.

   /* Set icon panels to use colored background instead of default white */
   .cat-icon-panel {
     background-color: #26435c; /* change color here */
   }
   
   /* Change color of text for category label in panels from default to white */
   .hg-minimalist-theme .cat-icon-panel .category-header,
   .cat-icon-panel .category-header {
     color: #ffffff; /* change color here */
   }

4. Update the background-color in row 3 to be the color you'd like used for the tiles themselves, to override the default white. Our sample uses a dark blue.
5. Update the color in row 9 to adjust the color used for the category titles. Our sample uses white.
6. You can Update Preview your to see your homepage update in the Preview pane above.
7. Be sure to Save your changes.

   Category icons unaffected
   This CSS will NOT impact the color of category icons. We recommend reviewing all categories with icons to be sure the colors still look good. White icons will only preview well in the category editor if you've explicitly set a category icon background color!

Homepage icon panels only

To apply style changes to your homepage icon panels only:

1. Go to Settings > Style.
2. In the Customize HTML, CSS, and JS section, be sure Custom CSS is selected.
3. Copy the CSS below and paste it into the Custom CSS editor. If you already have Custom CSS, we recommend adding it to the bottom.

   /* Set homepage icon panels to use colored background instead of default white */
   .hg-home-page .cat-icon-panel {
     background-color: #26435c; /* change color here */
   }
   
   /* Change color of text for category label in homepage panels from default to white */
   .hg-minimalist-theme.hg-home-page .cat-icon-panel .category-header,
   .hg-home-page .cat-icon-panel .category-header {
     color: #ffffff; /* change color here */
   }

4. Update the background-color in row 3 to be the color you'd like used for the tiles themselves, to override the default white. Our sample uses a dark blue.
5. Update the color in row 9 to adjust the color used for the category titles. Our sample uses white.
6. You can Update Preview your to see your homepage update in the Preview pane above.
7. Be sure to Save your changes.
   This CSS will NOT impact the color of your top-level category icons! We recommend reviewing those categories to be sure the colors still look good. White icons will only preview well in the category editor if you've explicitly set a category icon background color!

All subcategory panels only (no homepage)

To apply style changes to all categories but NOT your homepage:

1. Go to Settings > Style.
2. In the Customize HTML, CSS, and JS section, be sure Custom CSS is selected.
3. Copy the CSS below and paste it into the Custom CSS editor. If you already have Custom CSS, we recommend adding it to the bottom.

   /* Set homepage icon panels to use colored background instead of default white */
   .hg-category-page .cat-icon-panel {
     background-color: #26435c; /* change color here */
   }
   
   /* Change color of text for category label in homepage panels from default to white */
   .hg-minimalist-theme.hg-category-page .cat-icon-panel .category-header,
   .hg-category-page .cat-icon-panel .category-header {
     color: #ffffff; /* change color here */
   }

4. Update the background-color in row 3 to be the color you'd like used for the tiles themselves, to override the default white. Our sample uses a dark blue.
5. Update the color in row 9 to adjust the color used for the category titles. Our sample uses white.
6. Be sure to Save your changes.

   Subcategory icons unaffected
   This CSS will NOT impact the color of your subcategory icons! We recommend reviewing those categories with icons to be sure the colors still look good. White icons will only preview well in the category editor if you've explicitly set a category icon background color!