Vous désirez modifier certains aspects de vos scènes, comme la couleur d’arrière plan, le comportement de l’image de premier plan, ou la couleur du texte sur une ou plusieurs scènes ?
C’est possible en ajoutant du code CSS à votre projet.
A chaque élément ou emplacement de votre scène est attribué une “classe”.
En personnalisant les réglages de cette “classe” avec du code, vous allez pouvoir agir sur leur aspect.
Ces réglages s’opèrent dans le champ “CSS personnalisé” de l’onglet “configurer le projet”.
Vous trouverez dans les tableaux ci-dessous quelques exemples de classes et de personnalisation du code.
Un simple copié-collé de ce code avec les ajustements qui vous conviennent vous permettra de donner une touche plus personnelle à votre projet.
Classes de base et exemples d’utilisation
Chaque scène est représentée sur le player avec une balise HTML section qui comporte les classes suivantes :
| Classe | Description | Exemple | |
| scene | Toutes les scènes possèdent cette simple classe | scene | |
| scene_num | num est l’identifiant de la scène | scene_42 | |
| tpl_nom_du_template | nom_du_template correspond… au nom du template (en anglais) |
tpl_splash tpl_text_input |
|
|
has_slot has_not_slot |
Si un slot à une valeur dans cette scène, Si un slot n’a pas de valeur dans cette scène Tous les slots sont donc représentés. |
has_background has_not_items_text |
|
|
inFront inBackground |
Seule la scène en cours possède la classe inFront, toutes les autres ont la classe inBackground. |
||
Quelques exemples :
| CIBLE | DESCRIPTION | EXEMPLE CSS |
| Toutes les scènes | Appliquer une couleur rouge et une taille 24 aux textes de toutes les scènes |
.scene { color : red; font-size : 24px; } |
| Seulement la scène 12 | Appliquer une couleur rouge et une taille 24 aux textes de la scène 12 |
.scene_12 { color : red; font-size : 24px; } |
| Tous les templates splash | Appliquer une couleur rouge et une taille 24 aux textes de toutes les scènes “splash” |
.tpl_splash { color : red; font-size : 24px; } |
| Tous les titres des templates splash | Appliquer une couleur rouge et une taille 24 aux titres de toutes les scènes “splash” |
.tpl_splash .heading { color : red; font-size : 24px; } |
| Toutes les scène qui n’ont pas de background |
Définir un background par défaut pour toutes les scène qui n’ont pas de background, en rouge, ou avec une image importée depuis un url |
.scene.has_not_background { background-color : red; background-image : url(http://…) } |
| Les boutons des scènes relevant du template “choices” |
Changer la couleur de fond des boutons, et changer la couleur du texte |
.tpl_choices .items .item { |
| Tous les popups des marqueurs de niveau de zoom 1 |
Changer la couleur et la bordure de tous les popups des marqueurs de niveau de zoom 1 |
.tpl_map .map-popup.map-level-1 { border : blue; background-color : rgba(0,0,0,0.8); } |
Réglages par lot grâce au champ CUSTOM_DATA
On peut définir des datas personnalisées (CUSTOM_DATA) dans chaque scène, qui apparaîtront aussi en classes de la scène, dans le CSS personnalisé du projet.
Par exemple, si vous ’inscrivez “toto” dans le champ CUSTOM_DATA (onglet SPECIAL) de plusieurs scènes, vous allez pouvoir agir sur toutes ces scènes dans le CSS personnalisé.
Quelques exemples ci-dessous :
| CIBLE | DESCRIPTION | EXEMPLE CSS |
| Les image front de toutes les scènes qui ont la data “toto” |
Mettre les image front en hauteur 100% Custom data de la scene : toto |
.toto .front { |
| La couleur de fond de toutes les scènes qui ont la data “fondjaune” |
Appliquer la couleur jaune en arrière-plan Custom data de la scene : fondjaune |
.fondjaune { |
