Hi , we want to totally modify the color of the grid .i have gone through couple of posts and am not exactly getting what am looking for.
we want to modify the color of the header, header columns border, data border and back ground and what color for selection and setting the font and so on. including the column filters/hidden column
can you share example how we can achieve this with css/scss without using any theme?
if theme is mandatory can you share how we can override those what we are looking for.
Hi Peru,
Thank you for posting to Infragistics Community!
Before I proceed with assisting you, could you please confirm if under “without using any theme” you are referring to not using the SASS Component Themes, which can be included by defining the corresponding function. For instance, for the Multi-column headers feature, as described in the Styling section of its topic, this would be the grid-theme. The function accepts parameters, such as $header-background, $header-text-color, etc. that target these elements’ colors.
What I can say is that this is the most straightforward approach to customizing the components’ colors. Additionally, the themes could either be defined globally to affect all components of the corresponding type, or alternatively, they can target separate groups or instances of components, depending on the CSS scope they are included in.
If you would require only a CSS solution, the other straightforward approach I can suggest is defining the CSS variables that correspond to the different parameters that can be passed to the component themes.
Each variable name is constructed in the following format:
--igx + “component-name-with-hyphens”-“parameter-name”,
so, for the abovementioned grid-theme $header-background parameter, for instance, the CSS variable would be:
--igx-grid-header-background
For you convenience, I have modified the Styling demo from the referenced topic to achieve the same by using CSS variables. Please, check it out here.
In conclusion, please, refer to the Styling sections of each of the listed features topics in our documentation. There you will find links to the components themes’ APIs, where you will find listed all the available parameter names.
If you have further questions about a concrete element that should be styled, please, let me know. Additionally, if this is not an accurate demonstration of what you’re trying to achieve, please, elaborate further on your requirement.
Best regards, Bozhidara Pachilova Associate Software Developer
Thank you . this is very helpful.
i referred the component theme API , say for example
for styling the column hiding where it shows the list of columns in checkbox what is the corresponding theming for that.
for cell data color or making it bold etc what should i do ?
is there a way i can easily identify with naming conventions