PDA

View Full Version : The ugly blue bar behind top position tabs.



mysticav
30 Mar 2007, 8:47 PM
How can I get rid of that ugly blue bar ?

This happens when I include a tab component inside a layout Region:

http://ajaxcode.net/myUglyBlueBar.gif

Is this a bug ?

Animal
30 Mar 2007, 10:57 PM
Just a tiny little bit of looking for the solution using Firebug revealed that this style rule



.x-layout-panel .x-tabs-wrap {
background:transparent url(../images/default/layout/gradient-bg.gif) repeat scroll 0% 50%;
}


Sets the background.

You can apply your own, overriding rules for this selector.

mysticav
30 Mar 2007, 11:08 PM
Honestly, days ago using firebug I was able to see the div causing that. I just feel that is not a normal behaviour. Users will expect a transparent background. That class works nice with bottom position tabs.

If you change that style, you will also change the bottom tabs background, which look nice with the bg.

It can be considered in the future.

Thanks.

JeffHowden
1 Apr 2007, 6:33 PM
Honestly, days ago using firebug I was able to see the div causing that. I just feel that is not a normal behaviour. Users will expect a transparent background.

I hardly agree that having a background color behind the tabs is not "normal" behavior. There are tons of tab implementations, both with and without a background color. Like Animal said, if you don't like it, change it up via CSS.


If you change that style, you will also change the bottom tabs background, which look nice with the bg.

Then get more specific with the CSS so it only affects the top tabs.


It can be considered in the future.

I see no reason to make it an option in the framework when the developer can make the change easily enough themselves.

mysticav
2 Apr 2007, 6:18 PM
Nice answer. Thanks. I going to check the specific style for top tabs.