Override GWT Styling

Question

Ich hatte eine schöne reine HTML-Mock-up für eine Webseite, die ich jetzt in GWT neu erstellen. Ich versuche, das gleiche CSS in meiner GWT-App zu verwenden, aber das funktioniert nicht gut für mich. GWT-Stile scheinen meine zu überschreiben. Ich weiß, dass ich die GWT-Stile vollständig deaktivieren kann, aber ich würde lieber das Styling für die GWT-Komponenten haben, die ich hinzufüge (Registerkarte, Schaltfläche usw.). Gibt es eine Möglichkeit, das GWT-Styling zu deaktivieren und nur für von mir ausgewählte Komponenten zu aktivieren?

Answer 1

Am einfachsten ist es, die Stile zu überschreiben, die Sie nicht möchten. Wenn Sie beispielsweise nicht möchten, dass gwt Ihre Schaltflächen formatiert, können Sie den Stil für die gwt-Button-Klasse in Ihrer eigenen CSS-Datei definieren.

Weitere Informationen here.

Answer 2

Dies ist eine schnelle, aber hoffentlich hilfreiche Antwort.

Was ich getan habe ist, dass ich über die Stile, die ich will, aus dem Standard GWT Style kopiert habe. Zum Beispiel, wenn Sie den Standardstil gewählt haben, erstellt GWT eine standard.css im Krieg/WEB-INF/appengine-generated (irgendwo in diesen Zeilen) - Ich kopierte alle Button-Stile in die CSS-Datei meiner App, und dann in Die Konfigurationsdatei wählte nicht den Standard-GWT-Stil.

Das hat den Trick für uns gemacht.

Answer 3

Nur für jeden, der sich in einer ähnlichen Situation befindet, um die Antwort auf stringo0 zu beantworten, lege ich meine Styles in die 'GWT_APPNAME.css', wobei GWT_APPNAME der Name der Datei ist, die dein GWT Eclipse-Plugin bei der Erstellung generiert dein Projekt.

Diese CSS-Datei sollte direkt unter dem Kriegsordner mit dem gleichen Namen wie Ihre Begrüßungsseite html verfügbar sein. Ich habe das versucht, um die gwt-Anker Stile zu umgehen und es hat funktioniert.

.gwt-Anchor:link {color:#FF0000;} 
.gwt-Anchor:visited {color:#00FF00;} 
.gwt-Anchor:hover {color:#FF00FF;} 
.gwt-Anchor:active {color:#0000FF;} 

Answer 4

Der Grund Stil außer Kraft gesetzt wird, ist, dass, wenn gwt Ihr Projekt kompiliert, es seine eigene Standard-CSS-Datei enthält. Die Art der CSS-Datei ist abhängig von der Art der Standardstil, den Sie verwenden:

<inherits name='com.google.gwt.user.theme.clean.Clean'/> 
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> --> 
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --> 
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>  --> 

Im obigen Szenario wird eine clean.css Datei aufgenommen werden, was wiederum die folgenden generischen Stile hat, dass vollständig kompensieren die Vorlage (die Marge und Hintergrund-Parameter meine Vorlagen up immer verwirrt):

body, table td, select, button { 
    font-family: Arial Unicode MS, Arial, sans-serif; 
    font-size: small; 
} 
pre { 
    font-family: "courier new", courier; 
    font-size: small; 
} 
body { 
    color: black; 
margin: 10px; 
border: 0px; 
padding: 0px; 
background: #fff; 
direction: ltr; 
} 
a, a:visited { 
    color: #0066cc; 
    text-decoration:none; 
} 

a:hover { 
    color: #0066cc; 
    text-decoration:underline; 
} 

select { 
    background: white; 
} 

wenn Sie sie entfernen, und alles andere intakt (genauer gesagt, wenn man alles verlassen, die mit ‚gwt‘ beginnt) verlassen, Ihre Vorlage wird nicht beeinflusst.

Nicht vergessen - Sie müssen diese Elemente jedes Mal entfernen, wenn Sie Ihr Projekt kompilieren.

Hoffe, das hilft.

Answer 5

Sie können den Standard GWT Styling entfernen mit:

widget.setStyleName(""); 

Oder Ihren eigenen Stil festlegen.

Answer 6

Nun, ich habe es geschafft, das Problem mit dem Überschreiben von Standard-CSS-Regeln zu lösen, indem ich die Datei .css meines Projekts in .gwt.xml Datei meines Projekts erbte. Wenn Sie Ihre benutzerdefinierte .css auf diese Weise - nach der üblichen Vererbungslinie - setzen, hat sie die höhere Priorität bei der Kaskadierung einer Regel als dieselbe Regel, die bei Standard-gwt-Stylesheets definiert ist. Es dauerte ein paar Stunden, um herauszufinden, wie es richtig zu erben, weil in ersten Versuch einfach nur <stylesheet src='WebTerminal.css' /&gt eingeben; in meiner .gwt.xml Datei und <link type="text/css" rel="stylesheet" href="WebTerminal.css"> in meiner .html Host-Seite kommentieren brachte mir kein Ergebnis. So ist die Lösung relativ Pfad zu verwenden, wenn Sie Ihre .css in .gwt.xml Config gesetzt, wie folgt aus:

<stylesheet src='../WebTerminal.css' /> 

Hinweis ../ am Anfang meines relativen Pfad. Um herauszufinden, wie es funktioniert, fügen Sie Window.alert(GWT.getModuleBaseURL()); als erste Zeile Ihrer onModuleLoad() Methode hinzu. Es zeigt Ihnen etwas wie https://localhost:8080/myproject/resouces/webtermial/, wenn Ihre gehostete Seiten-URL tatsächlich wie https://localhost:8080/myproject/resouces/WebTerminal.html aussehen würde. Hier myproject/resouces ist ein Verzeichnis, das Ihre .css Datei enthält, und wenn Sie es in .gwt.xml wie <stylesheet src='WebTerminal.css' /> setzen, beginnt der Compiler nach myproject/resouces/webtermial/WebTerminal.css suchen und kann es nicht finden. Deshalb ist das Hinzufügen von ../ manchmal das einzige, was Sie tun können, um Ihr Problem zu lösen.

Zusätzlich zu den oben genannten Worten möchte ich nur erwähnen, dass ich nicht versucht habe, eine Beschreibung dieses Themas in der neuesten Dokumentation oder während der Diskussionen bei Google-Gruppen zu finden. Ich wünschte, es wäre weniger schwer herauszufinden, weil GWT selbst sehr viel komplexere Probleme hat, als eines, das im Tutorial eine erschöpfte Beschreibung gehabt haben muss.

Answer 7

Sie können <! Wichtig> Erklärung verwenden. Es ist eine der einfachsten Möglichkeiten

--- ---- GWT

.gwt-PopupPanel { 
border: 3px solid #E7E7E7; 
padding: 3px; 
background: white; 
} 

--- Custom Style ---

.gwt-PopupPanel { 
padding: 0px !important; 
} 

--- --- Ergebnis

.gwt-PopupPanel { 
border: 3px solid #E7E7E7; 
padding: 0px; 
background: white; 
} 

Answer 8

Es gibt eine spezielle Ressource, von der Sie erben können, um die clean.css-Datei zu entfernen:

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/> 

So Ihre * .gwt.xml Datei finden und die Suche nach

<inherits name='com.google.gwt.user.theme.standard.Standard'/> 

und ersetzen Sie es mit der obigen Zeile.

Answer 9

Vitrus' Antwort war für mich Arbeit, danke! Änderungen an den CSS-Dateien wurden jedoch beim erneuten Laden der Seite nicht in der Webanwendung wiedergegeben. Es scheint ein Cache-Problem zu sein. Aktualisieren mit Strg + F5 löst dies. Weitere Informationen finden Sie hier: http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok.

Answer 10

ich ein Hintergrundbild zu setzen und einen transparenten Hintergrund für das Körperelement Einstellung, ein ähnliches Problem versucht hatte löste ich es durch einen bestimmten Stil zu dem Element einstellen, so konnte ich die anderen GWT Arten halten:

<body id="elementId">...</body> 

#elementId { 
    background: transparent; 
} 

Ich hoffe, es ist nützlich für Ihr spezifisches Problem.

Answer 11

Lösung ist eigentlich eine public/css Ordner im selben Verzeichnis wie Ihre gwt.xml zu erstellen.

Fügen Sie diese beiden Zeilen in Ihre gwt.xml:

<stylesheet src='css/project-name.css'/> 

und

<public path='public'/> 

Platzieren Sie Ihre Projekt-name.css Datei im css Ordner.

Dies funktioniert mit GWT Compile und Super Dev Mode.

Answer 12

In gwt, 2.6 gibt es einen Ordner namens (gwt) in der generierten JavaScript-Quelle und es hat alle Stile.

Versuchen Sie, es zu löschen.