Styled items as selected

[Gabriel]

I've used the dev tools in IE (F12) to see what styles are being applied + looked through the theme CSS but cannot find what I need.

I would like to be able to apply the hovered style to items so they appear selected but do not know which one to apply. I've only had luck changing text and such, not the acutal styling.

[Dimo]

Hi Gabriel,

Hover styles in Kendo are determined by the k-state-hover CSS class. Selected state styles are determined by k-state-selected.

Basically you need to enforce the selected styles (background and text color) to the k-state-hover class. Depending on the skin used, they are different, you can see them in the corresponding CSS file.

For example:

ul.k-panelbar .k-state-hover
{
    background-color: #f0713a;
    color: #fff;
}

The k-panelbar CSS class is used for two reasons - limit the effect of the CSS rule to the PanelBar only, and increase the selector's specificity, so that it can override the skin styles.

Regards,
Dimo
the Telerik team

[Gabriel]

Thanks for the info Dimo.

I'm still having trouble however. The CSS provided only changes the hover colour...
How would I apply a CSS rule to a LI element inside a panelbar so it stays the hovered over colour?

[Dimo]

Hi Gabriel,

I am not sure I understand what you are trying to do. If you want to permanently change the item styles, so that they appear as hovered (or selected) then use the k-link CSS class and apply the corresponding background and text color:

ul.k-panelbar .k-link
{
    background-color: #f0713a;
    color: #fff;
}

Regards,
Dimo
the Telerik team

[Gabriel]

Sorry, but I'm still have trouble with this. I can style as you said, but it only changes the background colour around the text, not the same as the hover/selected state which is around the entire items bounding..

The image attached shows what I mean: when I apply a specifc CSS attribute (say bingo), I'd like the item it is applied to look the same as the selected state as per the image on the right.

The styling will be applied dynamically when I need it so it can't be permanently applied.

[Dimo]

Hello Gabriel,

In this case please apply the desired styling to a custom CSS class instead of the default ones (k-link, k-state-hover and k-state-selected). Then append the CSS class to the corresponding <span class="k-link"> element with Javascript when needed.

Greetings,
Dimo
the Telerik team

[Gabriel]

Thanks Dimo, but I still can't work it out. I cannot seem to find the CSS rule that controls the hover over. All I can manage is highlighting the items.

Can you please whip up a jsFiddle for me?

[Dimo]

Hello Gabriel,

I hope this will make things clear now:

http://jsfiddle.net/dimodi/XMbNx/

Regards,
Dimo
the Telerik team