Vous désirez mod­i­fi­er cer­tains aspects de vos scènes, comme la couleur d’arrière plan, le com­porte­ment de l’image de pre­mier plan, ou la couleur du texte sur une ou plusieurs scènes ?

C’est pos­si­ble en ajoutant du code CSS à votre pro­jet.
A chaque élé­ment ou emplace­ment de votre scène est attribué une “classe”.
En per­son­nal­isant les réglages de cette “classe” avec du code, vous allez pou­voir agir sur leur aspect.

Ces réglages s’opèrent dans le champ “CSS per­son­nal­isé” de l’onglet “con­fig­ur­er le pro­jet”.

Vous trou­verez dans les tableaux ci-dessous quelques exem­ples de class­es et de per­son­nal­i­sa­tion du code.
Un sim­ple copié-col­lé de ce code avec les ajuste­ments qui vous con­vi­en­nent vous per­me­t­tra de don­ner une touche plus per­son­nelle à votre pro­jet.

Classes de base et exemples d’utilisation

Chaque scène est représen­tée sur le play­er avec une balise HTML sec­tion qui com­porte les class­es suiv­antes :

Classe Descrip­tion Exem­ple
scene Toutes les scènes pos­sè­dent cette sim­ple classe scene
scene_num num est l’identifiant de la scène scene_42
tpl_nom_du_template nom_du_template cor­re­spond…
au nom du tem­plate (en anglais)
tpl_splash
tpl_text_input

has_slot

has_not_slot

Si un slot à une valeur dans cette scène,
la scène aura la classe
has_slot cor­re­spon­dante. 

Si un slot n’a pas de valeur dans cette scène
la scène aura la classe
has_not_slot cor­re­spon­dante. 

Tous les slots sont donc représen­tés. 

has_background

has_not_items_text

inFront 

inBack­ground

Seule la scène en cours pos­sède la
classe
inFront, toutes les autres ont la classe
inBack­ground.

Quelques exem­ples :

CIBLE DESCRIPTION EXEMPLE CSS
Toutes les scènes Appli­quer une couleur rouge et une taille
24 aux textes de toutes les scènes
.scene {
 col­or : red;
 font-size : 24px;
}
Seule­ment la scène 12 Appli­quer une couleur rouge et une taille
24 aux textes de la scène 12
.scene_12 {
 col­or : red;
 font-size : 24px;
}
Tous les tem­plates splash Appli­quer une couleur rouge et une taille
24 aux textes de toutes les scènes “splash”
.tpl_splash {
 col­or : red;
 font-size : 24px;
}
Tous les titres des tem­plates splash Appli­quer une couleur rouge et une taille
24 aux titres de toutes les scènes “splash”
.tpl_splash .head­ing {
col­or : red;
font-size : 24px;
}
Toutes les scène qui n’ont pas de
back­ground
Définir un back­ground par défaut
pour toutes les scène qui n’ont pas de
back­ground, en rouge, ou avec une image
importée depuis un url
.scene.has_not_background {
 back­ground-col­or : red;
 back­ground-image : url(http://…)
}
Les bou­tons des scènes rel­e­vant
du tem­plate “choic­es”
Chang­er la couleur de fond
des bou­tons, et chang­er la couleur du texte

.tpl_choices .items .item {
back­ground-col­or : red;
col­or : yel­low;
}

Tous les pop­ups des mar­queurs
de niveau de zoom 1 
Chang­er la couleur et la bor­dure
de tous les pop­ups des mar­queurs de
niveau de zoom 1
.tpl_map .map-popup.map-level‑1 {
bor­der : blue;
back­ground-col­or : rgba(0,0,0,0.8);
}

Réglages par lot grâce au champ CUSTOM_DATA

On peut définir des datas per­son­nal­isées  (CUSTOM_DATA) dans chaque scène, qui appa­raîtront aus­si en class­es de la scène, dans le CSS per­son­nal­isé du pro­jet.

Par exem­ple, si vous ’inscrivez “toto” dans le champ CUSTOM_DATA (onglet SPECIAL) de plusieurs scènes, vous allez pou­voir agir sur toutes ces scènes dans le CSS per­son­nal­isé.

Quelques exem­ples ci-dessous :

CIBLE DESCRIPTION EXEMPLE CSS
Les image front de toutes les
scènes qui ont la data “toto”

Met­tre les image front en hau­teur 100%
de toutes les scènes qui ont la data “toto”

Cus­tom data de la scene : toto

.toto .front {
height : 100%;
}

La couleur de fond de toutes les
scènes qui ont la data “fond­jaune”

Appli­quer la couleur jaune en arrière-plan
de toutes les scènes qui ont la data “fond­jaune”

Cus­tom data de la scene : fond­jaune

.fond­jaune {
back­ground-col­or : yel­low;
}