Utilisation de CSS et de styles dans Vuforia Studio

Dans le volet PROJET, sous STYLES, cliquez sur Application et saisissez votre CSS dans l'éditeur de styles d'application. Par exemple, vous pouvez créer une classe pour les boutons en saisissant les éléments suivants :

.my-button {
font-family: Century Gothic;
color: black;
font-weight: normal;
font-style: italic;
background-color: grey
}

Puis, dans le volet DETAILS du bouton, saisissez la valeur suivante dans le champ Classe :

Rappelez-vous qu'il est préférable de donner à vos classes des noms uniques afin qu'ils ne soient pas en conflit avec d'autres classes ou propriétés prédéfinies.

Cela fait référence au contenu ajouté dans Styles > Application.

Si le nouveau style n'est pas immédiatement appliqué sur le canevas, essayez d'enregistrer le projet.

Pour tester quelques exemples de CSS, consultez les rubriques consacrées à chaque widget.

Vous pouvez importer des polices personnalisées dans Vuforia Studio en utilisant le Styler d'application. Voici un exemple :

@import url(//fonts.googleapis.com/css?family=Bowlby+One);
.specialfont{
font-family:'Bowlby One';
}

. Une fois que vous avez ajouté cette chaîne dans l'éditeur d'application, vous pouvez utiliser la police importée dans vos classes. Par exemple :

.ptc-label {
font-size: 24px;
font-family: Bowlby One;
font-weight: normal;
color: black;
}

Les styles définis dans le fichier CSS de l'application remplace tout autre CSS du thème par défaut, en supposant qu'il utilise le même sélecteur. La spécificité du sélecteur peut parfois amener les styles du thème à remplacer une déclaration de classe unique. Pour plus d'informations sur la spécificité du sélecteur, consultez la page https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity.

Les propriétés de style dans les widgets se substituent aux styles définis dans le CSS ou le thème de l'application, car elles sont définies par le biais d'une propriété de style en ligne. Les propriétés du widget peuvent être considérées comme une substitution locale à la règle générique.

La fonctionnalité de mise en forme de l'état remplace le CSS et le thème de l'application, car elle insère un style après les fichiers mentionnés. Toutefois, celle-ci peut être remplacée par les styles de l'application qui utilisent la syntaxe de substitution !important, ou si elle utilise des sélecteurs trop spécifiques.