web-dev-qa-db-fra.com

Le style de thème GWT remplace mon style CSS

J'ai des fichiers HTML avec leur propre CSS. Je souhaite les utiliser dans une application GWT, donc j'ai copié les fichiers HTML et CSS de l'application.

Le problème est que lorsque j'ouvre le HTML, il utilise le style de thème GWT. Par exemple, dans mon CSS, la couleur de fond "corps" HTML est noire, mais elle a l'air blanc à moins que je désactive le thème.

Comment pourrais-je remplacer le style de thème GWT et utiliser mes styles CSS?

cssgwtthemes
31
david

Comme Sarfaz a dit - !important devrait être votre dernier recours car il est en quelque sorte défaite tout le concept de en cascade .

Quoi qu'il en soit, dans GWT, afin de remplacer facilement les styles de base GWT contenus dans le thème que vous avez sélectionné, vous devez localiser votre fichier de module (celui qui a un nom de fichier se terminant sur * .gwt.xml), puis localisez la ligne où vous Déclarez votre thème et mettez votre style personnalisé/quelle que soit la feuille de style après cela, comme ceci:

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />

Notez cependant que pour GWT 2.0 CssResource et IBINDER est recommandé.

Assurez-vous de lire la touche section appropriée de la documentation pour plus de pointeurs.

18
Igor Klimer

Ceci POST sur la liste de diffusion GWT décrit une solution alternative. Vous devez créer un nouveau ClientBundle qui fait référence à votre fichier CSS:

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface Resources extends ClientBundle {

      public static final Resources INSTANCE = GWT.create(Resources.class); 

      @Source("style.css")
      @CssResource.NotStrict
      CssResource css();
}

Et puis à l'intérieur de votre méthode onModuleLoad() vous devez injecter le fichier CSS:

public class YourApp implements EntryPoint {

    public void onModuleLoad() {
        //...
        Resources.INSTANCE.css().ensureInjected(); 
        //...
    }

À mon avis, c'est le moyen le plus propre et le plus simple de remplacer les styles.

36
tsauerwein

Vous pouvez remplacer les styles de GWT en utilisant le mot-clé !important Dans tous vos CSS des fichiers HTML, par exemple, si l'un de votre fichier HTML contient ce CSS:

background-color:#000000;

Ensuite, vous devriez l'écrire comme ceci:

background-color:#000000 !important;

Faites la même chose pour tous vos styles dans les fichiers HTML.

Notez que l'utilisation !important n'est pas le meilleur moyen, si vous pouvez trouver un mieux Alternatives que vous devriez aller pour eux d'abord.

6
Sarfraz

La solution <stylesheet src="CustomStylesheet.css" /> est obscutable et n'a pas fonctionné avec le nouveau SuperDevmode.

Une solution qui a fonctionné pour moi (à l'aide de GWT 2.7) consistait à créer un nouveau thème personnalisé:

ProjectPackage/Thèmes/MyCustomtheme/myCustomtheme.gwt.xml 

<module>
    <stylesheet src="gwt/MyCustomTheme/MyCss.css"/>
</module>

ProjectPackage/Thèmes/MyCustomtheme/MyCustomthemeressources.gwt.xml 

</module>

ProjectBackage/Thèmes/MyCustomtheme/Public/GWT/MYCUSTOMTOMTHEME/MYCSS.CSS (Remarque: Supprimer le GWT/MyCustomtheme/Partie du chemin travaillé dans DevMode mais N'a pas fonctionné dans la version déployée, de cause que vous pouvez toujours renommer "myCustomtheme" à quelque chose de votre goût)

Le fichier CSS que vous souhaitez utiliser

projet.gwt.xml 

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
        "http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="Project">

(...)

<!-- Inherit GWT theme.  e.g. the Clean theme -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Our custom theme      -->
<inherits name='projectPackage.themes.MyCustomTheme.MyCustomTheme'/>

(...)

</module>


Remarque: vous pouvez obtenir un exemple de thème personnalisé à l'aide de http://gwt-theme-generator.appspot.com/ et extraire le fichier .jar téléchargé.

2
H. Hess

En plus de l'utilisation !important Vous pouvez également compter sur Sélecteur CSS Spécificité .

La plupart (tous?) Des styles GWT sont indiqués en utilisant juste la classe, par exemple:

.gwt-DisclosurePanel .header {
    color: black;
    cursor: pointer;
    text-decoration: none;
}

Pour remplacer cela, vous pouvez utiliser !important ou Vous pouvez être plus spécifique dans vos sélecteurs, par exemple:

table.gwt-DisclosurePanel .header {
    text-decoration: underline;
}

Comment ça marche ? Cela fonctionne car l'ajout du nom d'élément (tableau) à la classe du sélecteur le rend plus spécifique que la seule classe. Cela remplacera d'autres styles, même des feuilles de style répertoriées dans l'en-tête.

Donner vos identifiants de widgets et utiliser ceux-ci est encore plus spécifique.

2
Damo

Je sais que ce n'est pas très élégant mais je l'ai trouvé plutôt efficace pour remplacer le standard.css Fichier dans les fichiers de sortie générés par GWT avec un fichier vide .

(Maven peut prendre soin de ce de manière fiable.)

2
mxro