How to remove or overwrite the tbseperator class

[majid mir]

Hi ,

I have application in extjs 3.0 , i have one requirement we have wizard panels and it has toolbar where i have to display arrow images rather then seperator pipeline image. i tired to overwrite the .x-sep class and added the arrow image in the css file and add the config property call

cls:'wizard-arrow'

but nothing is display...

please anyone has answer this how to overwrite the seperator image.

Cheers

[Animal]

Why can't you just override the background image for that class "xtb-sep" within that toolbar? Give the toolbar and ID or a class, and you have a selector to use.

[majid mir]

Thanks Animal, i tried that way to override the background image for example

.wizard-icon .x-toolbar .xtb-sep {
background-image:url(../images/wizard-arrow.png);
}
.wizard-icon .x-toolbar .xtb-sep {
background-position:center center;
background-repeat:no-repeat;
border:0 none;
cursor:default;
display:block;
font-size:1px;
height:16px;
margin:0 2px;
overflow:hidden;
width:10px;
}

i have even increased the width as well.

it still show the existing sep image and i want this arrow image in this toolbar only

Thx

[Animal]

Well you have not added the class wizard-icon to the Panel which owns this toolbar then.

Debug your CSS using Firebug!

[Animal]

You could also just use a raw Component in the Toolbar:

{
    xtype: 'component',
    cls: 'my-special-arrow-class'
}

And style that with some CSS rules.

[majid mir]

I have already add the class

{
xtype: 'tbseparator',
cls:'wizard-icon'
}

that it is not override.

Thx

[majid mir]

Animal it does not work, do you know how to extend the tpseperator class or any other solution..

or any other xtype

[Animal]

I give up.

If you can't get a simple Component to be styled, then give it up.

[steffenk]

css issue solving with override? Wrong!
Use firebug, edit the css on the fly until it's displayed as you want, then copy the rule to your css. This has nothing to do with ExtJS, it's normal web work.
Did you ever tried !important ?