Réglages de la mise en page des Jeux :
Je vais prendre ici comme exemple, la LOTERIE. Mais le fonctionnement sera identique pour tous les jeux.
2 éléments servent à configurer la mise en page.
1er élément :
Le code que vous récupérez sur la page ADMIN / DIVERS / PAGE JEUX et que vous collez dans ADMIN / CONFIGURATION / GESTION DES PAGES
=> CODE DE BASE
Code : Tout sélectionner
[Loterie]
<h3>[nom_L] : gagnez <span style='color:red'>[gain_L]</span> des mises !</h3>
<p>Jackpot actuel : [jackpot_L] !! [tickets_L]</p>
<p><b>Tirage au sort le [date_L]</b></p>
<p>J'achète 1 ticket à [prix_L] (retirés immédiatement sur mon compte).</p>
[boutonjouer_L]
<h4>Dès le jeu terminé, un mail avertit l'admin du site et le vainqueur !</h4>
[/Loterie]
Vous pouvez mettre en page ce code, par exemple pour mon PTP, j'ai fait cela :
(remarquez, je n'ai pas touché à [Loterie][/Loterie], ni à tout ce qui est entre crochet !!!)
=> CODE UN PEU MODIFIE
Code : Tout sélectionner
[Loterie]
<h2 align='center'>[nom_L] : gagnez <span style='color:red;'>[gain_L]</span> des mises !</h2>
<h3 align='center'>Jackpot actuel : [jackpot_L] !! [tickets_L]</h3>
<p align='center'><b>Tirage au sort le [date_L]</b></p><br/>
<p><b>J'achète 1 ticket à <u>[prix_L]</u> (retirés immédiatement sur mon compte).</b></p>
[boutonjouer_L]
<h4><i>Dès le jeu terminé, un mail avertit l'admin du site et le vainqueur !</i></h4>
[/Loterie]
2ème élément :
Le code CSS pour modifier ce qui est caché et d'autres paramètres => ADMIN / CONFIGURATION / SKIN
Je vous mets ici les différents éléments réglables, avec un exemple de code :
Code : Tout sélectionner
/* Réglages généraux de tout la DIV loterie*/
#loterie{
border:1px black solid;
background-color:#FFFF99;
padding:8px;
}
/* réglages des paramètres du formulaire */
.jeu_form{}
/* message affiché aux visiteurs non connectés */
.jeu_pasconnecte{color:red;font-size:1.4em;}
/* message affiché lorsque le jeu est terminé */
.jeu_termine{
color:red;font-size:1.4em;font-style:italic;
}
/* mise en forme du bouton */
.jeu_boutonjouer{
border:2px solid #FF6600;
background-color:#FF9933;
color:#000000;
margin:14px;
padding:3px;
font-size:1.5em;
}
/* mise en forme du texte qui annonce le gagnant */
.jeu_gagnant{color:red;font-size:1.8em;}
/* mise en forme du titre de la liste des parties jouées du membre */
.jeu_liste{font-weight:bold;text-decoration:underline;}
/* div de chaque ticket de jeu */
.jeu_ticket{
float:left;
width:152px;height:174px;
text-align:center;
background-image:url(/upload/ptp/ban/ticket.png);
}
/* 1ère ligne du ticket */
.jeu_tick{padding-top:40px;}
/* numéro du ticket */
.jeu_num{font-weight:bold;font-size:1.1em;}
/* date du jeu */
.jeu_date{font-style:italic;}
/* message aucune partie jouée */
.jeu_pasdeticket{color:red;}
Explications
Tout ce qui est entre /* */, ce sont des commentaires, ils peuvent rester là, ils sont une aide précieuse à la lecture.
# désigne un ID, souvent pour nommer un assez gros bloc. Il est toujours unique sur une page.
Ici nous mettons #loterie, pour désigner tout le bloc <DIV> Loterie </DIV>
. désigne une classe, et permet de mettre en page, un paragrache, une image...
Ici, nous utilisons plein de petites classes.
On met les paramètres CSS entre { accolades }
Un paramètre s'écrit toujours NOM : valeur;
Exemple :
color:red; ou color:#CC0000; => color = couleur du texte (et pas font-color qui n'existe pas en css), ici en rouge. On met le nom de la couleur, ou son code hexa
(url sympa pour les codes couleurs :
http://www.henri-ruch.ch/HTML/Couleurs/couleurs.asp )
Pour aller plus loin :
Si vous voulez régler différemment certaines classes pour les différents jeux, il suffit de préciser l'id devant la classe.
#loterie .jeu_form{ paramètres ici}
#pair_impair .jeu_form{ paramètres ici}