Splitter Arrow Style nad divider width

[Deepak]

Hi,

Is it possible to change the style of splitter arrow like make it bigger, more intuitive? Also, how to increase the width of the divider between the panes. wanted to make it more wider.

Thanks,
Deepak

[Iliana Dyankova]

Hello Deepak,

Basically the icon is part of a sprite and in order to change it you should override the default one. For example: 

.k-splitbar .k-icon.k-collapse-prev{
   background: url('//...');  /*specify the icon url*/
   width: 15px;  /*specify the icon width */
   height: 15px;  /*specify the icon height */
}

Dividers' widths can be increased using the following CSS rules: 

<style>
.k-splitbar.k-splitbar-horizontal{
    width: 20px; /*specify the width of the horizontal splitbar*/
}

.k-splitbar-vertical{
    height: 20px; /*specify the height of the vertical splitbar*/
}
</style>

Regards,

Iliana Nikolova
Telerik

[Will]

Just to expand on Iliana's response to save anyone else coming here a bit of time.  This is obviously targeting the Flat theme:
​

.k-splitbar-horizontal .k-resize-handle {
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -330px -573px;
   width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-resize-handle {
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -360px -573px;
   width: 20px; height: 20px;
}

.k-splitbar-horizontal .k-icon.k-expand-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -389px;
   width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-collapse-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -454px;
   width: 20px; height: 20px;}

.k-splitbar-horizontal-hover > .k-icon.k-expand-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -389px;
   width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-icon.k-collapse-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -454px;
   width: 20px; height: 20px;
}
.k-splitbar.k-splitbar-horizontal{
    width: 15px;}