Customizing Colors for Grid Column Headers with CSS: A Step-by-Step Guide

Customize Your Grid Appearance with CSS

Transform the look of your grid by following these streamlined steps to apply custom background and font colors to each row. You’ll need to locate your widget ID and use the CSS snippet provided below to achieve this customization.

Step-by-Step Instructions:

Identify Widget ID: Begin by locating the ID of the widget associated with your grid. This unique identifier is essential for targeting your CSS modifications correctly.
Insert Code Snippet: Navigate to the widget settings for your grid and find the section labeled "Footnote" or similar. Paste the provided CSS snippet into this area.
Configure Widget ID: In the snippet, replace the placeholder [data-id="123"] with your actual widget ID to ensure the styles apply to your specific grid.
Adjust for Multiple Rows: For each row in your grid that you wish to customize, copy the relevant part of the CSS snippet and adjust it by changing the number within nth-child() to match the row number. This selector targets the specific row for customization.

Example for the first row:

.widget[data-id="YOUR_WIDGET_ID"] .webix_hcolumn:nth-child(1)
{ background-color: red; }

(Remember to Replace YOUR_WIDGET_ID with your actual widget ID and adjust the nth-child() number for each row you're customizing.)

5. Customize Colors: Define the background and font colors for each row by altering the background-color and color properties in the snippet to your desired colors.

CSS Snippet for Customization:

Here is a template CSS snippet for customizing the first two rows of your grid. Replace 123 with your actual widget ID and adjust the colors as needed:

<style>
.widget[data-id="123"] .webix_hcolumn:nth-child(1)
{ background-color: red; }
.widget[data-id="123"] .webix_hcolumn:nth-child(2)
{ background-color: blue; color: white; }
</style>

Additional Resources:

For a visual guide on applying these customization steps, please watch the following video tutorial: Watch Video Tutorial