Styling a panelbar

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

    Posted 18 Jan 2012 Link to this post

    I'm stuck and need some help to:
    • move the expand/collapse arrow from the right to the left of the bar
    • remove all the borders from the panelbar, including child items and their items if any
    • override the heading of the panelbar items
    • override child items text colour/font/size

    I've used the theme designer to do what I want but this affects all controls, not just the panelbar...

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 19 Jan 2012 Link to this post

    Hello Gabriel,

    In order to customize the appearance of a widget, you can use Firebug to see which styles are applied currently and with what selectors. Then create similar CSS rules to override them.

    The ThemeBuilder by design creates styles that influence all widgets. In order to target them to a specific widget, its wrapper CSS class must be present in all involved selectors, as shown below.

    1. move arrows to the left

    .k-panelbar .k-panelbar-expand,
    .k-panelbar .k-panelbar-collapse
    {
        right: auto;
        left: 2px;
    }
     
    ul.k-panelbar .k-link
    {
       padding-left: 2em;
    }

    2. remove borders

    ul.k-panelbar,
    ul.k-panelbar .k-group,
    ul.k-panelbar .k-content,
    ul.k-panelbar .k-link,
    {
       border-width: 0;
    }

    3. Styling the PanelBar headings is a little more complex, because the CSS rules depend on the state that you want to customize. The .k-header CSS class is responsible for the default state. The .k-state-hover and .k-state-selected CSS classes are responsible for the respective states. For example

    .k-panelbar .k-header
    {
             background-color: #f00;
    }

    4. Child items' font and size can be controlled with

    ul.k-panelbar .k-group .k-link
    {
             /* font-size, line-height and color 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!
  3. Kendo UI is VS 2017 Ready
  4. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 19 Jan 2012 Link to this post

    Thanks. Do you know of any tools similar to Firebug but for IE? Firefox is not compatiable with me.
  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 20 Jan 2012 Link to this post

    Hi Gabriel,

    Internet Explorer 8 and above have a "Web Developer Toolbar" included. Just press F12. If you by any chance don't have it (or you are using IE7), you can download it for free from the Microsoft website.

    All the best,
    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
Kendo UI is VS 2017 Ready