Les plugins spip

exemples: configurations de quelques plugins

plugin galleria

Une fois le plugin installé

parcourir/téléverser vos image

Effet normal, en cliquant à gauche ou à droite de l’image vous faites défiler vos images les différentes transition sont :
fade|flash|pulse|slide|fadeslide|doorslide|pagesize
Avant, si vous mettez vos images dans le portfolio, alors :
<galleriaxx|mode=document>
mais le portfolio n'existe plus sous spip

codes pour effets :

xx étant le numéro de l’article
<galleriaxx|lightbox=true|transition=fade>
ou encore
<galleriaxxx|width=600|lightbox=true|transition=doorslide>

transition=fade pour des transition en "fondu enchainé"
autoplay=true qui permet de faire défiler les images de façon automatique. Ce défilement s’arrête dès qu’on clique sur une des vignettes.
width=xxx définit la largeur de la galerie en pixels
lightbox=true permet d’ouvrir l’image avec ses dimensions d’origine dans une lightbox
transition=fade pour des transition en "fondu enchainé".
pagesize : le nombre d’image par page
– à vous de lire la doc pour plus de codes

plugin cycle2

Installez le plugin et activez le, puis creér un nouvel article
téléversez vos images
<articleN|cycle> où « N » est le numéro de l’article dont on veut afficher les images.
<articleN|cycle|random=true> fait tourner les images dans un ordre aléatoire.
<articleN|cycle|random=false> ordre des images non aléatoire

OPTIONS:
|largeurmax=350 par défaut 640
|timeout=4000 Temps d’affichage pour chaque image (en millisecondes)
0 pour faire un diaporama manuel
|timeout=4000 Temps de transition entre chaque image (en millisecondes)

Effet de transition:
fade - fadeout - scrollHorz - scrollVert - flipHorz - flipVert - shuffle - tileSlide - tileBlind - carousel - none

Des exemples ici:
https://jquery.malsup.com/cycle2/demo/

quelques confs sur le site d'escal
Bloquer la publication d’un article
https://escal.edu.ac-lyon.fr/spip/spip.php?article390&lang=fr
Limiter la taille des téléversements
https://escal.edu.ac-lyon.fr/spip/spip.php?article260&lang=fr
amusez vous

plugin supersized

Ça va viendre, article en cours

plugin nivo slider

Ça va viendre, article en cours

plugin saveauto

Ça va viendre, article en cours

plugin onglet dans le texte

Ça va viendre, article en cours

plugin skeleditor

Ça va viendre, article en cours

plugin bloc dépliable

Ça va viendre, article en cours

plugin shoutbox

Ça va viendre, article en cours

plugin varicelle

Ça va viendre, article en cours

plugin forum

Ça va viendre, article en cours

plugin cibloc

Ça va viendre, article en cours

plugin time-circle

CountDownTimer
Ici nous démarrons un compte à rebours de 15 minutes avec le mo- dele suivant (les valeurs doivent être renseignées en secondes :
ici 180 = 3 minutes) les secondes défilent de 0 à 3 minutes, puis de 3 à 0 etc etc indéfiniment sur 180 secondes


Le modèle fonctionnera également très bien avec une date que vous aurez au préalable déclaré

Dans un contexte d’événement (avec Agenda)

placé tel quel, n’importe où dans le contenu texte de votre évé- nement, fera également l’affaire, en se basant sur l’heure de dé- but de votre événement.
Si vous utilisez Agenda, le modèle suivant fonctionnera très bien et, partout dans le site, pour afficher un décompte temps jus- qu’au départ de n’importe quel événement SPIP à venir.
Exemple ici avec un id_evenement=3 (1er de l’an 2019 en l’occur- rence)

PAS ENCORE TESTÉ
~ PageOpenTimer
chronomètre sans fin

~ ans evenement datacount
(ça m'affiche pas les jours dans le premier cercle)

affiches le décompte en affichant les jours,les heures les mi- nutes et les secondes jusqu'à la date précisée
SAUF QU'IL METS UN JOURS DE MOINS PUISQUE LE 0 COMPTE donc 363 jours pour 364

plugin splickrbox

On peut l’utiliser en modele avec en lui passant en option un parametre d’id pour limiter la boucle document,
On peut l’utiliser dans les squelettes avec la balise #MODELE{splickrbox}
On peut l’utiliser avec différent paramètres (qu’on peut aussi combiner) :
<splickrbox> et <splickrbox|left> pour les alignements
<splickrbox|taille=24> permet de spécifier le nombre de colonnes à afficher,Ce nombre devrait être un multiple du nombre de colonnes.
<splickrbox|colonnes=10> permet de spécifier le nombre de colonnes à afficher.
<splickrbox|masque=carre-100.png> permet de définir la taille des vignettes (le masque correspond à la grande vignette).
<splickrbox|tri=date> permet de spécifier le classement (date, hasard...).
<splickrbox|senstri=1> permet d’inverser le sens de classement choisi ci-dessus.

plugin mes_fichiers

le plugin mes_fichiers

typographie spip

ceci contient quelques codes de syntaxe typographique spip
ce titre est encadré par les symboles {{{pour titre ou paragraphe }}} Écrire en caractères penchés,à mettre en début et fin de ligne ce titre est encadré par les symbole {texte penché} salut la compagnie ce titre écrit en gras est encadré par les symboles {{texte en gras}} Les textes de syntaxes sont dans un cadre blanc, la couleur de fond peut être changé dans le fichier perso css, tout comme la couleur de fond de l’article. pour le cadre blanc, la syntaxe est donc <code>texte et fermer la balise en plaçant un / après le< pour le cadre générale la partie voulue est encadré par [( en début et)] à la fin le principe est toujours le même, de fermer les balises qui sont ouverte au début de texte. ceci est une citation la syntaxe est :<quote>ceci est une citation</quote> ou <poesie>texte</poesie> ce texte est biffé la syntaxe est :<del>ce texte est biffé</del> texte défilant de droite à gauche de l’écran <marquee> texte défilant de droite à gauche de l'écran </marquee> centrer un texte <center> centrer un texte </center> * la numérotation des lignes * première ligne deuxième ligne une sous liste à puce de retour dans le niveau initial - et voila et revoila Les puces de début de ligne exemple qui ne marche pas avec mes grenouilles à la place des * première ligne deuxième ligne une sous liste à puce de retour dans le niveau initial la syntaxe -* première ligne -* deuxième ligne -** une sous liste à puce -* de retour dans le niveau initial Faire un tableau centrer et tout et tout dans un tableau exemples xxxxxxxx * Faire un tableau à partir d’un fichier csv * . – ouvrir le csv avec libreoffice – choisir Europe occidental (windows- 1252/winlatin1 – français (france) – séparé par tabulation (cocher virgule) séparateur de texte ’’ par défaut – une fois le tableur ouvert, insérer des colonnes avant, entre et après les colonnes existantes et coller des pipes | (commande pour pipe = Alt Gr + 6) Sélectionner le tout du tableau et faites un copier coller dans votre article * le code des tableaux * -* Le principe est simple, le signe "|" sépare chaque cellule -* le plus simple tableau est: | canard | cochons | dindons | aiglons | moutons | ~ -*Voir la doc de spip, on peut fusionner des cellules, avec |^| - |<| ..etc.. Dans le tableau au dessus le code est. : ~ enter>|<img1665|center>|<img1666|center>|<img1667|center>| | <center>[or]nom[/or]</center> |<center> [or]prenom[/or]</center>| <center>[or]avatar[/or]</center>| |<center> rusote</center> | <center>gilbert</center> | <center>gigi</center> | |<center> [rouge]coincoin[/rouge]</center> | <center>[or]coincoin[/or]</center> | <center>[rouge]coincoin[/rouge]</center> | Un peu de couleurs dans vos textes avec le plugin "couleurs_spip" quelques exemples ET ÇA VA LE FAIRE MON GAILLARD ah les vilains canards la syntaxe est <cs_xxl>ah les vilains canards </cs> ah les vilains canards la syntaxe est <cs_xxxl>ah les vilains canards </cs> ah les vilains canards la syntaxe est <cs_xxxs>[or]ah les vilains canards[/or] </cs> ah les vilains canards la syntaxe est <cs_xs>ah les vilains canards </cs> ah les vilains canards la syntaxe est <cs_xxxl>[rouge]ah les vilains canards[/rouge] </cs> avec le plugins "exergue * Ce texte est mis en exergue la syntaxe est : <exergue|texte=[vert fonce]Ce texte est mis en exergue[/vert fonce] |center> la grosseur des caractères se configure dans le plugin

quelques exemples de config "perso.css dans squelettes/style

quelques exemples perso.css
Votre fichier "perso.css" se trouve dans squelette, nous avons vu comment l’éditer ec le sauvegarder dans le paragraphe précédent squelette-escal . C’est ici que l’on va créer le fichier perso.css ce fichier vous donne de nombreuses possibilités pour améliorer le contenu graphique de votre site. Nous allons en voir quelques exemples, beaucoup d’autres sont à découvrir sur le site d’escal,le site de developpeur ici : http://escal.ac-lyon.fr/spip/ pour écrire mon code informatique dans ce cadre comment j'ai fait : J'ai téléchargé sur le net le plugin escal et j'ai édité le fichier "general.css" qui est dans le dossier "style". Dans fichier on trouve tous les css, j'ai donc trouvé celui pour les cadres. dans le paragraphe " la page article", j'ai trouvé ceci: .spip_cadre, .coloration_code { background-color: #F0F0F0; overflow: auto; } Je voulais une couleur noir avec les lettres blanches, et que le cadre fasse 75% de la largeur de la page article: j'ai donc modifié comme ceci mon fichier perso.css situé dans squelettes /*============================================ cadre pour le code informatique ===========================================*/ .spip_cadre, .coloration_code { background-color: #000000; overflow: auto; width:75%; color:#FFFFFF; } plus besoin de mettre l'image dans squelettes/images, c'est maintenant intégré dans escal /////////////////////////////////////////////////////// Je trouve que mon bandeau colle trop en haut de ma page dans le navigateur /*=============================== un espace au dessus du bandeau =================================*/ div#bandeau { padding-top: 30px; } //////////////////////////// Cet article est dans un encadrement marron clair, j’ai demandé ce cadre avec ce code [( en début et fermer à la fin )] //////////////////////////////////// pour la couleur c’est dans style.css /*================================================= couleur de fond pour les encadrements d'articles ===================================================*/ .texteencadre-spip { background-color:#A7A37E; width: 70%; margin: auto; } //////////////////////////////////////// /*===================================================== pour le plugin exergue couleur et grosseur de la police ======================================================*/ .exergue { color: steel blue; font-size: 2em; } dans votre article:(choisissez center,rght ou left) <exergue|texte=Le texte à mettre en exergue |center> ////////////////////////////////////// /*============================================= couleur de fond d’un article x le code pour mettre le fond d'un article d'une couleur différente est ici noir ===============================================*/ .article4 #cadre-article{ background: #000000; color: white; } naturellement il faudra mettre le texte en blanc soit avec le plugin "couleurs spip" soit dans le code ci dessus, de votre perso.css, rajouter color //////////////////////////////////// /*==================================================== reconfigurer la largeur d 'un tableaux dans un article =====================================================*/ .article7 table { width: 70%; } .article12 table { width: 80%; } //////////////////////////////////////// /*================================================ couleur pour les encadrements des textes en code ================================================*/ .spip_code { background-color:#40A497; display: inline-block; background-position: 780px 5% ; background-repeat: no-repeat; background-image: url("../images/sourcecode.jpg"); width:65%; } ////////////////////////////////////////////// /*====================================================== mettre un fond coloré à vos citation <quote> ======================================================*/ blockquote { background-color: yellow; } si vous désirez les caractères en rouge, ajoutez color: red; /////////////////////////////////////////// si le point rond ne vous plaît pas, celui ci étant créer par -* dans votre article vous pouvez changer cette puce, toujours dans perso.css. Vous pouvez voir que j’ai mis une grenouille.Mais, comment ? mettez votre image puce dans "/squelettes/images/puce1.png puis dans votre perso.css, le code : /*================================= changer l'image de la puce -* =================================*/ #texte-article ul.spip { background-image: url(../../squelettes/images/puce1.png); background-repeat: no-repeat; list-style-type: none; }