Question

I am trying to change my css for the tab panel
here is my code

      <g:HTMLPanel>
    <div class="center">
        <g:TabLayoutPanel ui:field="tabPanel" barUnit="PX"
            barHeight="60" width="500px" height="250px" 
                                 styleName="gwt-TabPanel">
            <g:tab >
                <g:header>
                    DashBoard
        </g:header>

I have this css

    .gwt-TabPanel {
    background-color: rgb(36, 36, 36);
    }

    .roundedTab {
    background-color: red;  
    }

   .gwt-TabBar {
    background-color: rgb(36, 36, 36);
    padding-top: 5px;
    }

    .gwt-TabPanelBottom {
    background-color: rgb(64, 64, 64);
    border-top: none;

    padding-top: 1px;
    margin: 0px 0px 3px 0px;
    }

    .gwt-TabBar .gwt-TabBarFirst {
    border-bottom: 1px solid rgb(36, 36, 36);
    padding-left: 3px;
    }

   .gwt-TabBar .gwt-TabBarRest {
    border-bottom: 1px solid rgb(36, 36, 36);
    padding-right: 3px;
    }

   .gwt-TabBar .gwt-TabBarItem {           
    border-bottom: 1px solid rgb(36, 36, 36);

    margin-left: 2px;
    margin-right: 2px;

    cursor: pointer;
    cursor: hand;

    background-color: rgb(48, 48, 48);
    } 

    .gwt-TabBar .gwt-TabBarItem-selected {  
    border-bottom: 1px solid rgb(64, 64, 64);       
    background-color: rgb(64, 64, 64);
    }

    .gwt-TabBar .selectedText {
    color: white;
    background-color: rgb(64, 64, 64);
    font-weight: bold;      
    padding: 3px 7px 5px 7px;
    }

    .gwt-TabBar .unselectedText {
    color: rgb(227, 209, 13);       
    background-color: rgb(48, 48, 48);

    padding: 3px 7px 5px 7px;       
    }

   .gwt-TabBar .onMouseEnter {
    color: white;
    background-color: rgb(64, 64, 64);
    }

    .gwt-TabBar .onMouseLeave {

     }

    .deckPanel {
    margin: 5px;
   }

But it make the whole tab panel black and the Tabs also disappear .
What i want is to make every tab (not the complete tab Panel) background-color to blue and remove the border of the tabPanel

Any idea how can i achieve this.

Answer 1

Remove the background-color property from .gwt-TabPanel and add new CSS property as,

.gwt-TabLayoutPanelTab {
    background-color: blue;
}

.gwt-TabPanel is the CSS for whole Tabpanel but .gwt-TabLayoutPanelTab is the CSS applied for each tab.