Search code examples
csskendo-uikendo-panelbar

kendoui panelbar format text with color and underline

I'm trying to format the kendoui panelbar text only, not the content inside the container. 

    /* kendo overrides */
    .k-panelbar .k-link
    {
        font-size:larger;
        font-weight:700;
        text-decoration: underline;
    }

The code above leaves the content in the panel intact, and formats the text in the panel bar with all but the text-decoration option.

text-decoration (tried text-decoration-color as well) doesn't work unless I use .k-item, but k.item affects the content in the panel as well. 

    /* kendo overrides */
    .k-panelbar .k-item
    {
        font-size:larger;
        font-weight:700;
        text-decoration: underline;
    }

How do I change only the text in the panelbar itself?

Solution

  • Please try with the below code snippet.

    .k-panelbar>.k-item>.k-link {
      color: red !important;
      text-decoration: underline !important;
}

    You want to change apply style only to panelbar header.

    Let me know if I am not understand your requirement.