ExtJS: transparent button background

Hi there,
i use ExtJS 3.1.1 and i have a normal Ext.Panel with 4 Toggle Buttons.
Now i want to change the Background of the Buttons to transparent and only on mouseover a background should be visible.
Like in Microsoft Office 2007, in the Settings Window on the left navigation panel.

How is that possible? (I dont want to change it global for all buttons. Only for the 4 buttons in this panel)

thx and best regards


Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

If you put a class on the panel you can drill down in the css to remove the image.  The background image for the button is actually on a table behind the actual button element.   This is how it is currently set and we want to override it.  These classes are on the td element of the table under the buttons class.
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {

So what we need to do is on your panel have a class   cls: 'transpButtonPanel'
Then you can say in your css file  .transpButtonPanel .x-btn td {background-image: none}
This should then cause any button under that panel to have no button image.

Then in your css file add another rule for when the button has the mouse over it and both together you have

.transpButtonPanel .x-btn td {background-image: none}
.transpButtonPanel .x-btn-over td {url(PATHTOEXT/resources/images/default/button/btn.gif)}

I am not 100% sure if it is resources/images but starting after images it is correct.  Most of this is off my head with a little help from firebug so it may be slightly off.  You may need to change things slightly to get it to work with toggle buttons but this will at least give you an idea how to go about it.

mesXAuthor Commented:
thank you very much for your help!
I have some problems with the mouse over effect and the toggle effect.

.transpButtonPanel .x-btn-over td {background-image:url(path/To/My.gif)}
the button stayes transparent but with a thick border of my image.gif.

u know what i can do?

mesXAuthor Commented:
Oh, and before i forget: how is it possible to alignment the text of the button to the left and not center?

Hello again,

I apologize for my slow answer.  I am out of town for the weekend visiting my Fiancee.  Since you are using your own image, it may be better just to drop the image directly on the .transpButtonPanel .x-btn-over rather than on the td elements, and leave the td elements with no background image.  The toggle class would be .trasnpButtonPanel .x-btn-pressed.  The text class could probably be floated left.  The path for that would be .transpButtonPanel .x-btn-text.

If those don't work just be more specific when drilling down in the css or use an !important at the end of the css rule.  

I definitely recommend looking into these classes in firebug and playing with them to get your desired effect.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mesXAuthor Commented:
Thank you very much for your help!
It realy works!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.