Verwendung von CSS und Stilen in Vuforia Studio
Klicken Sie im Fensterbereich PROJEKT, unter STILE, auf Anwendung, und geben Sie Ihr CSS im Anwendungsstil-Editor ein. Beispielsweise können Sie eine Klasse für Schaltflächen erstellen, indem Sie Folgendes eingeben:
.my-button {
font-family: Century Gothic;
color: black;
font-weight: normal;
font-style: italic;
background-color: grey
}
Geben Sie anschließend im Fensterbereich DETAILS für die Schaltfläche Folgendes im Feld Klasse ein:
my-button
|
|
Beachten Sie, dass Klassen eindeutige Namen haben sollten, sodass es nicht zu Konflikten mit anderen Klassen oder vorkonfigurierten Eigenschaften kommt.
|
Dies bezieht sich auf Inhalt, der unter > hinzugefügt wurde.
| Versuchen Sie das Projekt zu speichern, wenn der neue Stil nicht unmittelbar auf der Canvas zu sehen ist. |
Sollten Sie einige CSS-Beispiele ausprobieren wollen, so finden Sie weitere Informationen in den einzelnen
Widget-Themen.
Benutzerdefinierte Schriftarten verwenden
Mit dem Application Styler können Sie benutzerdefinierte Schriftarten in Vuforia Studio importieren. Nachfolgend sehen Sie ein Beispiel:
@import url(//fonts.googleapis.com/css?family=Bowlby+One);
.specialfont{
font-family:'Bowlby One';
}
Sobald Sie die Schriftart im Anwendungs-Editor hinzugefügt haben, können Sie die importierte Schriftart in Ihren Klassen verwenden. Zum Beispiel:
.ptc-label {
font-size: 24px;
font-family: Bowlby One;
font-weight: normal;
color: black;
}
CSS-Vorrang
Der Formatvorlagensatz in der CSS-Datei für die Anwendung überschreibt alle CSS im Standardthema, wobei davon ausgegangen wird, dass der gleiche Selektor verwendet wird. Die Selektorspezifität kann manchmal dazu führen, dass Stile für ein Thema eine Deklaration für eine einzelne Klasse überschreibt. Weitere Informationen zur Selektor-Spezifität finden Sie unter
https://developer.mozilla.org/de/docs/Web/CSS/Spezifität.
Mit Stil verbundene Eigenschaften in den Widgets überschreiben Formatvorlagensätze im CSS für die Anwendung oder im Thema, da sie über die Eigenschaft Inlinestil festgelegt werden. Die Widget-Eigenschaften können als eine lokale Überschreibung der generischen Regel angesehen werden.
Die Statusformatierungs-Funktion überschreibt die CSS für die Anwendung und das Thema, da nach den erwähnten Dateien ein Stil eingefügt wird. Diese Funktion wird möglicherweise von Anwendungsstilen überschrieben, welche die Überschreibungs-Syntax !important verwenden. Eine Überschreibung ist auch dann möglich, wenn zu spezifische Selektoren verwendet werden.
