EasyUI Forum

Howto create custom css for spesific panel without affect another panel header, i add headerCls to data-options to increase height and add tools button but not show my expected  :

(http://i60.tinypic.com/3500314.png)

<!-- HTML -->
<div data-options="region:'south',split:true,collapsed:false,title:'Data',tools:'#toolPB',headerCls:'customCss'" style="height:200px;">
</div>

<!-- Tools -->
<div id="toolPB" style="padding:0px;">
    <a id="btnPlay" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pb_play'" onclick="M.pb_play('play');"></a>
    <a id="btnPause" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pb_pause'" onclick="M.pb_play('pause');"></a>
    <a id="btnStop" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pb_stop'" onclick="M.pb_play('stop');"></a>
    <a id="btnSlow" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-stop'" onclick="M.change_speed('slow');"></a>
    <a id="btnNormal" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-on'" onclick="M.change_speed('normal');"></a>
    <a id="btnFast" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-red'" onclick="M.change_speed('fast');"></a>
</div>

//Custom Css
.customCss{
    height: 18px;
    background-color: #CCE6FF;
}

//easyui.css
.panel-icon,
.panel-tool {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  height: 16px;
  overflow: hidden;
}

howto override above css

Tks
Result

This example shows how to add custom tools to a panel header.
http://www.jeasyui.com/demo/main/index.php?plugin=Panel&theme=default&dir=ltr&pitem=Custom%20Tools