Once More unto the Breach - styles

[Joe]

My dialog has no buttons... Well not really, they're there but they're white.  White button, white text... They don;t show up until I hover over one of them.  What styles or classes do I need to edit to get my dialog buttons to show up?

 

[Ivan Danchev]

Hello Joe,

Here's a CSS rule that changes the background and text color of the Dialog's buttons and shows the selector that can be used in order to customize the buttons:

.k-dialog-buttongroup .k-button {
  background: lightblue;
  color: red;
}

Regards,
Ivan Danchev
Telerik by Progress

[Joe]

Thank you.

 

I spend most of my time digging around for which class/style to override for stuff... Are any of these documented somewhere?  I try by using the Chrome developer tools, but in trying to find this one I ended up using .k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button and .k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button:hover, whereas your response simplified it significantly. If each component's specific class styles were documented somewhere, it might save me all sorts of time.

[Ivan Danchev]

Hi Joe,

We have documented the common classes that are used across different widgets and the states classes, but a complete structure of the widget rendered elements and their classes, which can be quite complex for some of the widgets (Scheduler, Gantt, etc.), is not documented. The recommended approach is to inspect the element you want to apply custom styles to in the browser's dev tools and use the corresponding selector in custom CSS rules. 

Regards,
Ivan Danchev
Telerik by Progress

[Joe]

Yeah, unfortunately that's what I have been doing but it's a tedious process that is a whole lot of trial & error.  I wish I could actually write code instead of being stuck in CSS hell... But thanx anyways...