Styled items as selected

8 posts, 2 answers
  1. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 24 Jan 2012 Link to this post

    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.
  2.
  3. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 25 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 25 Jan 2012 Link to this post

    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?
  7. Answer
    Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 26 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 19 Feb 2012 Link to this post

    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.
  11. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 20 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 20 Feb 2012 Link to this post

    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?
  14.
  15. Answer
    Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 21 Feb 2012 Link to this post

    Hello Gabriel,

    I hope this will make things clear now:

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

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top