Skip to main content
Personnaliser mon projet grâce au CSS
Niveau 2

Personnaliser mon projet grâce au CSS

By 19 septembre 2019No Comments

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 projet.
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 projet”.

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 projet.

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 suivantes : 

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 correspond…
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 correspondante. 

Si un slot n’a pas de valeur dans cette scène
la scène aura la classe has_not_slot correspondante. 

Tous les slots sont donc représenté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
background		 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 relevant
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 : yellow;
}
Tous les pop­ups des marqueurs
de niveau de zoom 1 		 Chang­er la couleur et la bordure
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 projet.

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 personnalisé.

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 : fondjaune

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

Tags:

Close Menu