Bonjour à tous!

Je découvre actuellement GWT en version (je suis en version V2.4)...

Bref, pour le moment je découvre, et je suis face à une question, je vous expose la situation.

mon module gwt contient ceci (de manière à hériter de ce thème):

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
<inherits name="com.google.gwt.user.theme.clean.Clean" />

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:b="urn:import:mikon.bb.client"
    xmlns:v="urn:import:mikon.bb.client.view" >
 
    <ui:style src="bb.css" >
 
    </ui:style>
 
 
        <g:TabLayoutPanel
            addStyleNames="{style.mikon-content}"
            animationDuration="500"
            barHeight="30"
            ui:field="tabLayoutPanel" >
 
            <g:tab>
 
                <g:header>
Home1
                </g:header>
 
                <g:HTML addStyleNames="{style.mikon-display}" >
Coucou1
                </g:HTML>
            </g:tab>
 
            <g:tab>
 
                <g:header>
Home2
                </g:header>
 
                <v:TeamView
                    addStyleNames="{style.mikon-display}"
                    ui:field="teamView" >
                </v:TeamView>
            </g:tab>
 
            <g:tab>
 
                <g:header>
1
                </g:header>
 
                <g:HTML>
d
                </g:HTML>
            </g:tab>
 
            <g:tab>
 
                <g:header>
3
                </g:header>
 
                <g:HTML>
b
                </g:HTML>
            </g:tab>
 
            <g:tab>
 
                <g:header>
5
                </g:header>
 
                <g:HTML>
a
                </g:HTML>
            </g:tab>
        </g:TabLayoutPanel>
 
</ui:UiBinder>
C'est mon fichier ui.xml .

Cette ligne :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
        <g:TabLayoutPanel
            addStyleNames="{style.mikon-content}"
Fait référence au fichier css qui contient ça :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
.mikon-content
{
	width: 90%;
	top: 100px !important;
	left: 5% !important;
	background-color: #000000 !important;
	opacity: 0.5;
}
Bon déjà, j'utilise !important, qui à mon sens est un hack dégeu', mais passons.

Je génère, et après j'obtiens mon tab panel avec mes onglets tout bien.
Arrive le moment ou je veux changer les couleurs des différents composants du tabPanel.

Après avoir fait un coup de FireBug, je vois que les headers des onglets sont sur un div qui est de classe gwt-TabLayoutPanelTabs, et j'aimerai bien changer sa couleur! Mais comment faire au plus propre?
Le problème c'est que dans mon fichier ui.xml je n'ai pas "accès" à ce div :/

- dans mon .html ajouter un lien vers un fichier CSS qui surchargera cette classe?
- ajouter dans mon module la déclaration d'un fichier CSS (dans la même veine que la solution précédente)

Enfin, j'espère que j'ai été clair, je tiens à préciser que j'ai déjà pas mal feuilleté google et Cie, et je n'ai rien trouvé de satisfaisant (chez Google, ils disent que les 2 méthodes ci dessus sont "depecrated")... Bref, toutes les remarques/astuces/etc seront les bienvenues !!!!

Merci bien ;