This is a migrated thread and some comments may be shown as answers.

Styling a panelbar

3 Answers 1660 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Gabriel
Top achievements
Rank 1
Gabriel asked on 19 Jan 2012, 03:41 AM
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...

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 19 Jan 2012, 01:53 PM
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!
0
Gabriel
Top achievements
Rank 1
answered on 20 Jan 2012, 01:42 AM
Thanks. Do you know of any tools similar to Firebug but for IE? Firefox is not compatiable with me.
0
Dimo
Telerik team
answered on 20 Jan 2012, 07:28 AM
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!
Tags
PanelBar
Asked by
Gabriel
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Gabriel
Top achievements
Rank 1
Share this question
or