View Full Version : Problem Stiling a button bar...

16 Jun 2009, 4:44 PM
Hello I need a icon bar (that especifically) be borderless and white BG.

I managed to removed the border and apply the white bg but Im getting some buttom-border that I just cant get ride off...


The buton bar is rendered in a DIV called userMenu this is the CSS code:

#userMenu .x-toolbar {
background-image: none;
background-color: #FFFFFF;

this is the JS code:

var SamplePanel = Ext.extend(Ext.Panel, {
renderTo: 'userMenu',
border: false,
region: 'center',
height: 30,
autoScroll: false
new SamplePanel({
tbar: [{
text: 'Empresa',
iconCls: 'add16',
menu: [
{text: 'Menu Button 1',iconCls: 'add16'},
{text: 'Menu Button 2',iconCls: 'add16'},
{text: 'Menu Button 1',iconCls: 'add16'},
{text: 'Menu Button 2',iconCls: 'add16'},
{text: 'Menu Button 1',iconCls: 'add16'},
{text: 'Menu Button 2',iconCls: 'add16'}
text: 'Administracion',
iconCls: 'add16',
menu: [{text: 'Cut Menu Item'}]
text: 'Preferencias',
iconCls: 'add16'
text: 'salir',
iconCls: 'exit'

Question 1:
How to get ride of the bottom border, just adding border: none in the css does not work. what's the x-class causing that border.

Question 2:
I also want to change the button group separator color. how?

Question 3:
As you can see selecting a menu option (Administration) I get again the border and blue colors, how do I assign a grayer one?

I dont want to change the theme to x-theme-gray, because all the other panels I like the blue stile I just want that particullar div be white and gray.


17 Jun 2009, 4:42 AM
1) use firebug, your answer will reveal itself.