How can I modify jquery ui tabs in Yii framework?

Yii jquery ui tabs default styles:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top"><a title="#yw0_tab_0" href="#yw0_tab_0">test</a></li>
<li class="ui-state-default ui-corner开发者_StackOverflow-top ui-tabs-selected ui-state-active"><a title="#yw0_tab_1" href="#yw0_tab_1">test title</a></li>
<li class="ui-state-default ui-corner-top"><a title="#yw0_tab_2" href="#yw0_tab_2">test content</a></li>
</ul>

Now, I want to modify

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

to

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-top">

How can I do it in Yii framework? Please answer in details, thanks.

This is not really a Yii issue but more to do with how jQuery ui styles the tabs when it loads in its javascript.

You can always fix this with some jQuery

$(function(){
    $('.ui-tabs-nav').removeClass('ui-corner-all ui-widget-header').addClass('ui-corner-top')
});

Sadly it's not possible as a (yii widget) configuration option. It if you look at the page source you will see that the classes are added by javascript. I would suggest that you instead use css to override the affect classes. There is also a jQuery UI Theming api which might be worth a look.