Des blocs dépliables

Cet outil du Couteau Suisse vous permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (articles, rubriques, etc.) ainsi que dans vos squelettes.

Présentation

Cet outil permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (articles, rubriques, etc.) ainsi que dans vos squelettes (fichiers .html). Ils sont facilement configurables et imbricables.

Les fonctionnalités décrites ici font partie du plugin Le Couteau Suisse que vous pouvez trouver ici : Le Couteau Suisse. Pour avoir accès aux blocs dépliables présentés dans cet article, il vous faut donc avoir préalablement installé ce plugin.

Dans les contenus SPIP

Les rédacteurs ont à disposition les nouvelles balises <bloc> (ou <invisible>) et <visible> à utiliser dans leurs textes (articles, rubriques, etc.) comme ceci :

<bloc>
 Un titre qui deviendra cliquable
 
 Le texte, initialement caché, à montrer/cacher, après deux sauts de ligne...
</bloc>
<visible>
 Un titre qui deviendra cliquable
 
 Le texte, initialement affiché, à cacher/montrer, après deux sauts de ligne...
</visible>

A noter : si le texte du bloc ne comporte pas deux sauts de ligne délimitant le titre et le futur texte dépliable, alors le Couteau Suisse crée un titre qui deviendra cliquable en prenant les 30 premiers caractères du texte présent dans le bloc. Si besoin, ce paramètre est directement modifiable sur la page de configuration du plugin.

• Résumé

Pour qu’un résumé puisse alterner avec le contenu du bloc initialement caché, vos rédacteurs peuvent utiliser les balises <resume></resume> après le double saut de ligne comme ceci :

<bloc>
Le titre
 
<resume>Un résumé</resume>
Le contenu du bloc plus développé
</bloc>

Dans les squelettes

Vous avez à votre disposition les nouvelles balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN à utiliser comme ceci :

 #BLOC_TITRE
 Mon titre
#BLOC_RESUME
Le résumé de la suite
#BLOC_DEBUT
 Mon bloc dépliable
 #BLOC_FIN

• Résumé

La balise #BLOC_RESUME est facultative. En cas d’utilisation, le résumé entre #BLOC_RESUME et #BLOC_DEBUT sera masqué lorsque le bloc est rendu visible.

Toutefois, seul le titre reste cliquable.

• Ajax

Pour utiliser Ajax, il faut préciser l’URL à charger grâce à la balise #BLOC_TITRE{mon_URL} à laquelle vous ajoutez un paramètre. Le fichier (ou l’adresse) pointée par l’url sera alors chargée dans le BLOC (entre #BLOC_DEBUT et #BLOC_FIN) avant que le bloc ne soit rendu visible.

Exemple dans une boucle (ARTICLES) : [(#BLOC_TITRE{[(#URL_PAGE{monajax}|parametre_url{id_article,#ID_ARTICLE})]})]
Ici, le fond monajax.html ne sera donc appelé que lorsque le visiteur voudra déplier le bloc.

Ce mécanisme permet d’alléger le poids de la page initiale et pourra augmenter la vitesse de navigation...

Notez cependant que #URL_PAGE n’aime pas les sous-répertoires sous SPIP : vous risquez un accès interdit. Remplacez donc #URL_PAGE{inc/qqchose} par #URL_PAGE{qqchose}.

Un exemple appelant le 1er article en base et transmettant le paramètre var_mode indispensable développement du site :

[(#BLOC_TITRE{[(#URL_PAGE{monajax}|parametre_url{id_article,1}|parametre_url{var_mode,#ENV{var_mode}})]})]
	My qualifications
#BLOC_DEBUT
	Wait please...
#BLOC_FIN

• Bloc visible

Pour produire un bloc déplié (dont le contenu est visible), ajoutez simplement l’argument {visible} à la balise #BLOC_TITRE. Exemple : #BLOC_TITRE{visible}Sommaire

Installation

L’outil décrit ici est une fonctionnalité du plugin «Le Couteau Suisse» que vous pouvez trouver ici : Le Couteau Suisse.

Pour avoir accès aux raccourcis et aux balises décrits dans cet article, il vous faut donc avoir préalablement installé ce plugin en suivant la procédure normale d’installation des plugins SPIP.

Ensuite, veuillez activer l’outil «Blocs Dépliables» en vous rendant sur la page d’administration du plugin en espace privé (Bouton Configuration, et onglet “Le Couteau Suisse”).

Une fois cet outil activé, vous aurez enfin la possibilité d’insérer dans vos articles ou dans vos squelettes des blocs dépliables/repliables.

Dépendances

Cet outil a besoin de la librairie jQuery. Le site officiel (en anglais) est : http://jquery.com/. D’autres informations sont disponibles en français ici : http://www.jquery.info/. Cette librairie de fonctions JavaScript a été complètement intégrée dans SPIP à partir de la version 1.92. Pour les versions antérieures, il vous faudra installer un plugin spécifique que vous pouvez télécharger ici : http://files.spip.org/spip-zone/jqu....Sommaire

Si vous remarquez un conflit avec votre squelette ou un autre plugin (dysfonctionnement des blocs par exemple), tentez de modifier l’option de configuration « Balise pour les titres ». La valeur par défaut est h4, mais elle peut être changée en h5 ou même div.

Personnalisation des blocs

Les CSS doivent être ajoutées dans le fichier habituel de vos squelettes. En ce qui concerne la dist SVN de SPIP, il s’agit du fichier “habillage.css”. On le surcharge souvent à la racine du squelette utilisé pour le site.

Il y a une autre possibilité encore, celle de surcharger directement le fichier couteau_suisse/outils/blocs.css.html en le recopiant dans monsquelette/outils/blocs.css.html et en y modifiant les styles proposés ou en y ajoutant vos propres styles.

Attention : toute modification d’un fichier surchargé nécessite une recompilation des outils du Couteau suisse, obtenue en se rendant simplement sur la page de configuration du plugin ou en ré-affichant celle-ci. N’hésitez pas à vider également les caches de SPIP, ou de travailler sans cache durant le développement du site.

Un bloc <bloc> (ou un #BLOC_XXX) est construit comme ceci :

<div class="cs_blocs">
<h4 class="blocs_titre blocs_replie">
<a href="#">un titre</a></h4>
<div class="blocs_invisible">le contenu</div>
</div>

Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :

div.cs_blocs>div {
	border:solid 2px;
}
 
h4.blocs_titre, h4.blocs_replie {
	background:transparent none;
}

Dans cet exemple, tous les <bloc> auront un cadre noir autour du contenu et les tous les titres de blocs repliables h4 seront privés de leur petit triangle.

Pour y voir plus clair, je conseille toujours de débuguer son site avec FireFox et l’excellente extension FireBug. On peut y gérer les CSS et débugger le JS à la volée, c’est très pratique. (Modif. 2018 : Chrome le permet également très bien).

Il se peut que, si vous placez une image dans un bloc dépliable, le bloc ne soit pas correctement déplié. Essayez alors d’ajouter le style CSS suivant :

.blocs_destination { overflow: hidden; }Sommaire

Blocs numérotés

Vous avez la possibilité d’ajouter un numéro à vos raccourcis, afin de mieux cibler l’apparence que vous pourriez donner à vos blocs dépliables. La numérotation des blocs est également fort utile pour créer des blocs imbriqués. En utilisant par exemple <bloc#2> (ou <invisible#2> ou <visible#2>), la classe « cs_bloc2 » sera ajoutée au bloc <div principal :

<bloc#2>
 Un titre qui deviendra cliquable
 
 Le texte à cacher/montrer, après deux sauts de ligne...
</bloc#2>

Ce bloc <bloc#2> est construit comme ceci :

<div class="cs_blocs cs_bloc2">
<h4 class="blocs_titre blocs_replie">
<a href="#">un titre</a></h4>
<div class="blocs_invisible">le contenu</div>
</div>

Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :

div.cs_bloc2>div {
	border:solid 2px;
}
 
div.cs_bloc2 h4.blocs_titre, div.cs_bloc2 h4.blocs_replie {
	background:transparent none;
}

Dans cet exemple, tous les <bloc#2> auront un cadre noir autour du contenu et seuls les titres de ces blocs h4 seront privés de leur petit triangle.

Petite précision : l’ancienne syntaxe <bloc2></bloc2> (sans le dièse) devient obsolète et doit être évitée car SPIP 2.0 considère désormais que cette notation est un modèle. Si vos rédacteurs ont utilisé cette notation, je crains qu’il faille corriger toutes les occurrences directement en base de données... Pour rechercher les fautifs, la syntaxe SQL à utiliser est par exemple : SELECT id_article FROM spip_articles WHERE texte REGEXP '</?bloc[[:digit:]]+>'. Pour effectuer les remplacements, alors essayez peut-être : UPDATE spip_articles SET texte = REPLACE(texte, 'bloc2>', 'bloc#2>') (je ne pense pas qu’on puisse utiliser les regexp avec un replace...)

Dans vos squelettes, la balise titre à utiliser est alors :
#BLOC_TITRE{un_numero} ou #BLOC_TITRE{un_numero, mon_URL} à la place de : #BLOC_TITRE ou #BLOC_TITRE{mon_URL}. Les classes générées sont les mêmes que précédemment. Exemples : #BLOC_TITRE{1} ou #BLOC_TITRE{#ID_ARTICLE}. Pour un bloc déplié (bloc dont le contenu est visible), utilisez alors la syntaxe #BLOC_TITRE{visible, un_numero, mon_URL}. L’ordre des arguments n’importe pas.Sommaire

Balise <h4>

Puisque le titre du bloc est transformé en titre HTML (balise <h4> par défaut), il est bien entendu déconseillé de rédiger un bloc comme :

<bloc>
{{{Un intertitre à éviter !!}}}
 
Ceci est une mauvaise syntaxe...</bloc>

De même, il est conseillé d’agir directement sur les styles, plutôt que de mettre un attribut en dur sur un titre de bloc. Exemple :

<bloc>
{{Un titre en gras}}
 
Le gras sur le titre est complètement inutile si vous avez défini ce style :
h4.blocs_titre {
	font-weight:bold;
}
</bloc>

Enfin, si le choix de la balise <h4> ne vous convient pas pour le titre cliquable de vos blocs, il suffit de la modifier sur la page d’administration du Couteau Suisse en indiquant h5, h6 ou h7, en fonction de vos CSS.... Si vous voulez utiliser la balise <h3> que SPIP utilise lui-même pour les intertitres (notation : {{{Mon intertitre}}}), alors le sommaire automatique prendra en compte vos titres de blocs.Sommaire

L’attribut title du titre

Depuis la version 1.8.15.01 du plugin, le titre d’un bloc est automatiquement affublé d’un title par défaut : “Déplier” ou “Replier”. La source brute du bloc ne possède pas de title, mais JavaScript s’en charge au chargement de la page en cherchant le dernier div de classe blocs_titre (cette classe est invisible par défaut). Si cette classe est trouvée, JavaScript en lit le contenu HTML qui doit contenir le séparateur «||» et modifie le title du titre du bloc en fonction de son état (déplié ou replié).

Exemple : <div class="blocs_title">Déplier||Replier</div>.

Personnalisation : dans le fichier mes_fonctions.php de votre squelette, créez la fonction blocs_title($titre='', $corps='', $num=''). Celle-ci doit renvoyer un tableau contenant le texte pour chaque état du bloc (déplié ou replié). Exemple :

function blocs_title($titre='', $corps='', $num='') {
	$titre = couper($titre, 30);
	return array("D&eacute;plier le bloc &laquo;$titre&raquo;", "Replier le bloc &laquo;$titre&raquo;");
}

Pour un bloc dans un squelette, il suffit d’ajouter la div.blocs_title décrite ci-dessus en clair :

#BLOC_TITRE #TITRE
#BLOC_RESUME #INTRODUCTION
#BLOC_DEBUT #TEXTE
<div class="blocs_title">Déplier mon bloc||Replier mon bloc</div>
#BLOC_FIN

Déplier un bloc au chargement de la page

Cela peux se faire directement en jQuery (code JavaScript à insérer dans votre squelette) en simulant un clic de souris.

Blocs classiques

La fonction eq(index) permet de choisir le bloc à déplier, sachant que la variable index commence à zéro. L’exemple suivant déplie le premier bloc de la page :

jQuery(document).ready(function() {
	jQuery('h4.blocs_titre').eq(0).click();
});

Dès la version de SPIP 2.0, utilisez plutôt la balise #BLOC_DEPLIER{index} que vous pouvez placer n’importe où dans la page. Exemple pour déplier le 5ème bloc une fois la page chargée : #BLOC_DEPLIER{4}.

Blocs numérotés

Le code jQuery est plus facile : il suffit de repérer le sélecteur “div.cs_blocXX” où XX est le numéro du bloc. L’exemple suivant déplie le bloc #4 de la page :

jQuery(document).ready(function() {
	jQuery('div.cs_bloc4')
		.children('.blocs_titre').eq(0).click();
});

Dès la version de SPIP 2.0, utilisez plutôt la balise #BLOC_DEPLIER_NUM{index} que vous pouvez placer n’importe où dans la page. Exemple pour déplier le bloc #4 une fois la page chargée : #BLOC_DEPLIER_NUM{4}.

Ancre et paramètres d’URL

Le but ici est de faciliter les dépliages/repliages de blocs par URL. Pour déplier plusieurs blocs, il faut lister leur identifiant séparés par une virgule. Voici la syntaxe à utiliser pour vos liens (NN, XX, YY et ZZ sont les identifiants numériques de vos blocs) :

  • Blocs numérotés : &deplier_num=NN ou &deplier_num=XX,YY,ZZ
  • Blocs simples : &deplier=NN ou &deplier=XX,YY,ZZ

Attention, les blocs non numérotés sont repérés à partir de zéro : 0 = 1er bloc, 1 = 2e bloc, etc. Ce chiffrage inclus tous les blocs de la page finale, y compris les blocs numérotés éventuels.

Les ancres#deplierNN et #deplier_numNN fonctionnent aussi, mais seuls les blocs numérotés ont un id pour l’instant et provoqueront un défilement de la page jusqu’au bloc voulu... Il est en effet plus prudent d’ancrer des blocs numérotés, histoire d’éviter toute erreur en cas de modification du contenu de la page.

Variable JS

Dès que la page est chargée, le plugin consulte deux variables JavaScript pour savoir qu’il faut ouvrir un bloc ou non. En fonction des besoins, cette variable peut donc être initialisée (avant l’appel des scripts du Couteau suisse) de cette façon :

	// déplier le 2e bloc non numéroté :
	var bloc_actif = 1; 
	// déplier le bloc numéroté #2 :
	var bloc_actif_num = 2; 

Si l’URL de la page comporte un paramètre sur les blocs (voir paragraphe précédent), alors ces variables (dans la catégorie concernée) seront ignorées.

Pagination à l’intérieur d’un bloc

Pour être sûr que le bloc contenant une pagination s’ouvre automatiquement au rechargement de la page, il vous faut d’abord numéroter vos blocs en utilisant pour le titre le même numéro que celui de la pagination.

Par exemple : #BLOC_TITRE{#ID_ARTICLE} pour un critère de pagination comme celui-ci : {pagination 5 #ID_ARTICLE}.
Vous pouvez aussi remplacer l’exemple #ID_ARTICLE par #COMPTEUR_BOUCLE, #_NomDeMaBoucle:COMPTEUR_BOUCLE, ou tout autre numéro.

Enfin, insérez simplement dans votre page le code Javascript suivant [1] :

jQuery(document).ready(function() {
  if(blocs_pagination) {
    jQuery('div.cs_bloc' + blocs_pagination 
       + ' .blocs_titre').eq(0).click();
    window.location.hash = '#pagination' + blocs_pagination;
  }
});

La variable blocs_pagination est automatiquement calculée par le plugin. Elle représente le numéro de la pagination appelée (ce numéro est présent dans l’ancre de l’URL).
Exemple : “11” si l’url contient l’ancre “#pagination11”.

Impression

Dans votre navigateur, ajouter à l’adresse d’une page le paramètre « cs=print » force le Couteau Suisse à déplier les blocs en vue d’une impression. Par exemple : www.monsite.ici/spip?article999&cs=print
Aussi, ce paramétrage est automatique dans les squelettes suivants : “print.html”, “imprimer.html”, “imprimir_articulo.html”, “imprimir_breve.html” ou “article_pdf.html” (donc ici : “page=print”, “page=imprimer”, etc.). Lisez ici le paragraphe “Particularités” pour en savoir davantage.Sommaire

Autre méthode (astuce de Commetou) : Javascript. «Si on veut faire un bouton imprimer (sans passer par une page intermédiaire) avec la commande onclick="window.print(); return false;" sur un lien, il faut modifier [2] la CSS d’impression avec le code div.cs_blocs div.blocs_invisible{display: block;} pour que les blocs soient ouverts.»

Zoom sur vos squelettes...

Les balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN ne font qu’envelopper vos blocs à l’aide de trois balises HTML : <div>, <h4> et <a>.

Allez, un exemple vaut mieux qu’un long discours. Voici comment le plugin transforme :

	#BLOC_TITRE Un dépliage simple sans résumé
	#BLOC_DEBUT COUCOU !!
	#BLOC_FIN
 
	#BLOC_TITRE Un dépliage simple avec résumé
	#BLOC_RESUME Un résumé...
	#BLOC_DEBUT COUCOU !!
	#BLOC_FIN

en :

	<div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple sans résumé
	</a></h4><div class="blocs_invisible blocs_destination"> COUCOU !!
	</div></div>
 
	<div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple avec résumé
	</a></h4><div class="blocs_resume"> Un résumé...
	</div><div class="blocs_invisible blocs_destination"> COUCOU !!
	</div></div>

Notez que les retours à la ligne sont respectés.

Donc, attention à votre syntaxe HTML !

Il faut veiller à ce que les blocs entre les différentes balises #BLOC (#BLOC_TITRE et #BLOC_DEBUT, puis entre #BLOC_DEBUT et #BLOC_FIN par exemple) soient corrects dans leur syntaxe HTML : pas de balise ouverte non fermée ou fermée et non ouverte.
-  Exemple incorrect : <b>#BLOC_TITRE[(#DATE|annee)]</b>
-  Exemple correct : #BLOC_TITRE<b>[(#DATE|annee)]</b>

Étant donné que le plugin place entre <h4><a> et </a></h4> tout ce qui se trouve entre #BLOC_TITRE et #BLOC_DEBUT, n’y placez pas des liens ou des balises block (<hX>, <p> ou <div>). Les balises inline (comme <span>) en revanche sont permises. En cas de doute référez-vous à la syntaxe HTML des balises imbriquées.
-  Exemple incorrect : #BLOC_TITRE{#ID_RUBRIQUE}<a href="#URL_RUBRIQUE">#TITRE</a>#BLOC_DEBUT
-  Exemple correct: #BLOC_TITRE{#ID_RUBRIQUE}#TITRE#BLOC_DEBUT

De même, au sein de vos articles, ne mettez pas de liens dans le titre du bloc, et surtout par d’intertitre non plus.

Voici un exemple de tri des articles par date, utilisant les listes <ul><li> :

<B1><ul>
<BOUCLE1(ARTICLES){par date}{inverse}{fusion YEAR(date)}>
  <li>#BLOC_TITRE<b class="texte">[(#DATE|annee)]</b>
  <B2>
     #BLOC_DEBUT<ul>
     <BOUCLE2(ARTICLES){annee_relatif}{par date}{inverse}{lang_select=non}{fusion MONTH(date)}>
     <li>#BLOC_TITRE<small>[(#DATE|nom_mois)]</small>
     <B3>
        #BLOC_DEBUT<ul>
        <BOUCLE3(ARTICLES){mois_relatif}{par date}{inverse}>
 
           <li><small><a href="#URL_ARTICLE">#TITRE</a></small></li>
        </BOUCLE3>
        </ul>#BLOC_FIN
     </B3>
     </BOUCLE2>
     </ul>#BLOC_FIN
  </B2></li>
</BOUCLE1></ul>
</B1>

Voici un exemple listant les brèves dans un bloc avec une pagination :

<B_breves><ul><li>
#BLOC_TITRE
Les Br&egrave;ves du site !
#BLOC_DEBUT
	#ANCRE_PAGINATION
	[<p class="pagination">(#PAGINATION)</p>]
	<ul>
		<BOUCLE_breves(BREVES){tous}{par date}{inverse}{pagination 5}>
			<li>
			<divclass="titredebreve">#TITRE ([(#DATE|affdate_court)])</div>
			[<div class="textedebreve">(#TEXTE)</div>]
			</li>
		</BOUCLE_breves>
	</ul>
	[<p class="pagination">(#PAGINATION)</p>]
#BLOC_FIN</li></ul>
</B_breves>

Voici un exemple de blocs imbriqués [3] :

<B_rubriques>
   <ul>
      <BOUCLE_rubriques(RUBRIQUES) {id_parent} {par titre}>
          <li>
              #BLOC_TITRE{#ID_RUBRIQUE}
              [(#TITRE|supprimer_numero)]
              #BLOC_DEBUT
              <B_articles2>
                  <ul>
                      <BOUCLE_articles2(ARTICLES) {id_rubrique} {par titre}>
                          [<li><a href="#URL_ARTICLE">(#TITRE|supprimer_numero)</a></li>]
                      </BOUCLE_articles2>
                  </ul>
              </B_articles2>
              <BOUCLE_sous_rubriques(BOUCLE_rubriques)>
              </BOUCLE_sous_rubriques>
              #BLOC_FIN
          </li>
       </BOUCLE_rubriques>
   </ul>
</B_rubriques>

Lien cliquable permettant de replier le bloc par l’intérieur

Par défaut, le plugin possède une fonction jQuery qui prendra automatiquement en compte un “lien de repliage” placé dans un bloc déplié, c’est à dire : entre les balises #BLOC_DEBUT et #BLOC_FIN. Ce lien doit être affublé de la classe replier_bloc. Exemple :

#BLOC_TITRE #TITRE
#BLOC_DEBUT #TEXTE
<a href="javascript:;" class="replier_bloc">[Replier l'article]</a>
#BLOC_FIN

Utilisation de la Balise #INTRODUCTION

Cet outil du Couteau Suisse vous permet de paramétrer la balise SPIP #INTRODUCTION et la doter par exemple de points de suite cliquables. Si par hasard vous désirez que ces points de suite produisent l’ouverture du bloc, alors voici comment faire.

Si les points de suite cliquables sont bien activés et que, dans votre squelette, votre bloc dépliable ressemble à :

	<BOUCLE_art(ARTICLES)>
		#BLOC_TITRE #TITRE
		#BLOC_RESUME #INTRODUCTION
		#BLOC_DEBUT #TEXTE
		#BLOC_FIN
	</BOUCLE_art>

... alors le code code JavaScript à insérer dans la page, ou dans le header de votre squelette APRÈS les appels du Couteau Suisse est :

jQuery(document).ready(function(){
	jQuery('.blocs_resume a.pts_suite')
	  .click( function(){
		jQuery(this).parents('.cs_blocs:first').children('.blocs_titre')
			.blocs_replie_tout().blocs_toggle();
		// annulation du clic
		return false;
		});
});

Déplier un bloc éloigné de son titre

Depuis la version 1.8.10.11 du Couteau Suisse, il est possible de déplier un bloc à distance. Le titre cliquable du bloc et son contenu peuvent être éloigné dans la page et placés où vous voulez de façon totalement indépendante, à conditions :
-  d’ouvrir et fermer vos blocs grâce aux couples de balises #BLOC_TITRE_DEBUT/#BLOC_TITRE_FIN (enfermant le futur bouton de dépliage/repliage du bloc) et #BLOC_DEBUT/#BLOC_FIN (enfermant le contenu dépliable/repliable du bouton associé)
-  de choisir un identifiant unique à préciser obligatoirement aux balises #BLOC_TITRE_DEBUT{identifiant_unique} et #BLOC_DEBUT{identifiant_unique} qui permet d’associer le bouton de dépliage/repliage (titre cliquable) à son contenu. Cet identifiant doit être le premier argument de la balise.

Un deuxième argument ’visible’ ou ’invisible’ est autorisé. Il permet de choisir l’état du bloc au démarrage de la page.

Par exemple :

#BLOC_TITRE_DEBUT{toto}
	Bouton pour un bloc éloigné invisible
#BLOC_TITRE_FIN
<p>Allez, un peu de texte, histoire de mettre de la distance... Voyez que le bouton du bloc 'toto' est construit avant son contenu replié que voici :</p>
#BLOC_DEBUT{toto}
	UN COUCOU ELOIGNE !!
#BLOC_FIN
 
#BLOC_DEBUT{titi,visible}
	UN COUCOU ELOIGNE !!
#BLOC_FIN
<p>Allez, un peu de texte, histoire de mettre de la distance... Voyez que le contenu déplié du bloc 'titi' est constuit avant son titre cliquable que voici :</p>
#BLOC_TITRE_DEBUT{titi,visible}
	Bouton pour un bloc éloigné visible
#BLOC_TITRE_FIN

Attention toutefois à ne pas oublier de changer d’identifiant à chaque tour si vous placez un bloc dépliable à distance à l’intérieur d’une boucle. Si votre identifiant est fixe, alors tous les blocs produits par la boucle s’ouvriraient et se fermeraient ensemble... La balise #COMPTEUR_BOUCLE est ici indispensable :

 <B1><ul>
<BOUCLE1(ARTICLES)>
 <li>
#BLOC_TITRE_DEBUT{toto#COMPTEUR_BOUCLE}
       #COMPTEUR_BOUCLE. #TITRE
#BLOC_TITRE_FIN
blablabla 
 #BLOC_DEBUT{toto#COMPTEUR_BOUCLE}
       #INTRODUCTION
 #BLOC_FIN
</li>
</BOUCL1></ul>
</B1>

Court-circuiter les réglages généraux

Dans une page particulière, pour ignorer le paramétrage général “Un seul bloc ouvert sur la page” [4], placez dans votre page la balise #BLOC_UNIQUE avec l’argument qui correspond à cette page.
-  Syntaxe pour n’avoir qu’un seul bloc ouvert à la fois sur la page : #BLOC_UNIQUE, #BLOC_UNIQUE{oui}, #BLOC_UNIQUE{1}
-  Syntaxe pour permettre au visiteur d’ouvrir plusieurs blocs à la fois sur la page (réglage général par défaut) : #BLOC_UNIQUE{non}, #BLOC_UNIQUE{0}, #BLOC_UNIQUE{-1}

Bien entendu, si vous placez dans la même page la balise #BLOC_UNIQUE{oui} et plusieurs balises valides #BLOC_DEPLIER (ou #BLOC_DEPLIER_NUM), seule la dernière de ces dernières sera prise en compte !

Ouvrir un bloc contenant un formulaire

Si vous décidez de mettre un formulaire SVT dans un bloc, alors il sera nécessaire d’ouvrir le bloc au chargement de la page au cas où le formulaire renvoie une erreur de saisie.

Voici une petite commande JS qui veillera à ouvrir automatiquement un bloc contenant une erreur :

jQuery(document).ready(function() {
  jQuery('.cs_blocs').has('.erreur_message')
    .find('.blocs_titre.blocs_replie').blocs_toggle();
});

Footnotes

[1dans le corps de votre page ou dans le header APRÈS les appels du Couteau Suisse

[2NDLR : en la surchargeant dans votre squelette

[3Utile pour le plan d’un site par exemple

[4paramètre que vous pourrez trouver sur la page d’administration du Couteau Suisse après avoir sélectionné l’outil “Blocs Dépliables”

updated on 2 October 2019

Discussion

138 discussions

  • 5

    Hello,

    Ben chez moi ça marche pas :-(

    Le code source de ma page présente bien ce qui est prévu, à savoir quelque chose de ce type:

    <div class="cs_blocs"><h4 class="blocs_titre blocs_replie"><a href="#">un titre</a></h4><div class="blocs_invisible">le contenu</div></div>

    ... et ceci, que je construise le bloc dépliable dans la partie administrative ou dans un squelette. Tout espoir n’est donc pas perdu...

    Mais le problème c’est que la page affiche le bloc déplié et c’est tout. (Tout au plus, quand je clique sur le titre, la page se repositionne en haut, à cause du href=“#”, je pense.)

    J’ai bien essayé de désactiver, un à un, tous les autres plugins, rien n’y fait. Je ne peux malheureusement pas vous envoyer sur un site, car je développe en interne sur MAMP.

    Spip version 1.9.2d - jquery par défaut (1.1) - Couteau suisse 1.7.17.00

    • jQuery par défaut, càd ? SPIP 1.92 n’a pas besoin du plugin jQuery. Il est possible qu’une erreur Javascript se soit produite. Avec Firefox/Firebug, vous pourrez trouver cette erreur.

      Si par hasard la balise #INSERT_HEAD manque dans le header du squelette, les blocs ne pourront pas non plus fonctionner.

    • «jQuery par défaut». Je veux dire par là que je n’ai rien ajouté ou changé de ce qui est livré par défaut avec la 1.92. En me référant à ce qui est écrit plus haut dans cette page: «Cette librairie de fonctions Javascript a été complètement intégrée dans SPIP à partir de la version 1.92.»

      Pour être sûr que ce ne sont pas mes pages qui posent un problème, j’ai copié un squelette (rubrique.html) de la dist dans mon dossier squelettes et j’y ai juste ajouté mon petit bout de code avant le pied de page. Le résultat est le même, ça ne marche pas. (rubrique.html contient cette balise #INSERT_HEAD par le truchement de inc-head.)

      Voici mon code tout simple:

      #BLOC_TITRE
      Mon titre à cliquer
      #BLOC_DEBUT
      Mon bloc dépliable 
      <br>
      qui contient un peu de texte
      #BLOC_FIN

      J’ai d’autres scripts du Couteau suisse qui fonctionnent bien.
      Firebug ne me montre aucun erreur.

    • Merci de ces précisions. Aucune erreur, même au moment du clic ? réussis-tu à débugger le Javascript? D’après ta description, jQuery ne parvient pas à lier le clic au dépliage. De plus, si tes blocs sont spontanément dépliés, c’est que Javascript ne les a pas repliés au chargement de la page. Il doit bien y avoir une raison simple. Question bête, mais as-tu bien activé le Javascript dans ton navigateur ? Le code source de la page te parait-il complet? exempt d’erreurs?

      tu peux m’envoyer par mail privé le code source de ta page si tu ne réussis toujours pas à résoudre ce pb.

    • Merci de ta peine;-)
      Juste une question générale avant que j’aille me coucher (je continuerai demain...): est il normal que tous les JS soient écrits dans la page? Ça fait une sacrée tartine! Quand je réalise de sites «normaux», je mets ces bibliothèques en externe.

    • non, dans les pages il ya peu de js. et puis c’est bien plus couteux pour un serveur de faire un hit spécial sur un fichier de quelques octets. les lames du couteau utilisant du js important le font dans un fichier à part (cf. les blocs).

    Reply to this message

  • 8

    Bonjour,
    Avant de me lancer, je voudrais savoir si vous pensez que ça peut s’adapter sans trop de circonvolutions aux forums, dont on verrait les titres, et déplierait le contenu.
    Sachant que ce serait bien aussi d’avoir la possibilité de déplier l’ensemble d’un fil ou l’ensemble de tous les forums si on veut.
    Merci beaucoup.

    • Je pense que ça peut s’adapter très facilement. Il faut juste quelques connaissances en jQuery et une juste programmation des boucles SPIP.

      La possible numérotation des blocs récemment ajoutée pour les articles (<bloc1>, <bloc2>, etc.) n’a pas été portée sur les balises pour squelettes, mais ça pourrait sans doute faciliter la programmation de ce que tu cherches... Je vais voir cela. Je n’ai aucune objection à faire évoluer cette lame du Couteau Suisse.

      Ce forum est là bien sûr pour trouver des solutions, et même si nous pouvons t’aider, une mise à disposition publique de tes trouvailles est la bienvenue !

      (H.S. : un grand bravo pour ton livre !)

    • J’ai commencé à tenter une adaptation, ça peut aller, voyez vous-même, en cliquant ici.
      Un problème : le style h4.blocs_titre ne prend pas la caractéristique padding:0pt 0pt 0pt 20px. Ce qui fait que l’espace nécessaire pour voir le triangle de dépliement/repliement n’existe pas. Impossible de comprendre pourquoi.
      Une idée ?

    • Tu n’utilises pas Firefox+Firebug ? On y vout tout de suite que tes h4 sont courcicuités par blog.css :

       h4, #conteneur #content h4 {
         /* blog.css (ligne 189) */
         (...)
         padding:0pt;
         (...)
      }

      Pour contrarier les priorités de style (ordre de déclaration) tu peux utiliser !important dans lipietz.net (ligne 86) :

      padding:0pt 0pt 0pt 20px !important;

    • Si tu es satisfaite du résultat et si tu veux, tu pourrais nous donner ton code SPIP afin que d’autres puisse en profiter. Ca illustrerait également bien l’utilisation des blocs dépliables.

    • Perline

      Oui, je pensais donner le code une fois que j’aurais réglé ces petits problèmes.
      En ce qui concerne les téléscopages, oui j’utilise firebug, mais c’est l’ordre des priorités des prises en compte des css que je n’arrive pas à comprendre, car je ne la maîtrise pas (comment les plugins, leurs css, et leurs css adaptées sont ordonnés ? J’ai tout essayé, je ne vois pas).
      De plus, le style ne devrait quand même pas ne pas considérer ce padding là, à cet endrot-là.
      Bref, je continue de ce côté.

    • Avec la modif que je t’ai suggérée, ça marche très bien, quel que soit l’ordre des priorités. C’est vrai que moi aussi, je m’y perds.

    • Perline

      Oui, certes, mais si je ne veux pas changer l’ensemble de mon style dans le css principal
      ?
      Même problème poru changer le triangle, j’ai tenté, j’ai mis dans squelettes/images, et ça marche pas. Au secours.....

    • Il suffit de cibler le h4 :

      h4.blocs_titre, h4.blocs_replie {
              padding:0pt 0pt 0pt 20px !important;
      }

      Quant au petit triangle, c’est celui de SPIP. Actuellement, il n’y a pas de surcharge prévue dans outils/blocs.css.html : il faudrait y changer le code et mettre #CHEMIN...

      Bon, si tu veux mettre tes triangles perso alors tu peux mettre :

      h4.blocs_titre {
              background:transparent url(monchemin/triangle-bas.gif) no-repeat scroll left center !important;
      }
      
      h4.blocs_replie {
              background:transparent url(monchemin/triangle.gif) no-repeat scroll left center !important;
      }

      Et si tu veux tout personnaliser, alors il t’es possible de surcharger directement le fichier plugins/couteau_suisse/outils/blocs.css.html en le recopiant/modifiant dans : squelettes/outils/blocs.css.html

    Reply to this message

  • 1

    Bonjour,

    Super travail !

    Y a-t-il une possibilité de donner un effet de transition au bloc qui se déplie ou se replie ?
    Par effet de transition, j’entends un dépliement tout en douceur et beau à voir...

    Merci d’avance !

    Reply to this message

  • 1

    Bonjour,

    D’abord, félicitations pour ce plugin fort utile et que j’ai, déjà mis en œuvre dans 2 sites.

    Comment faire en sorte qu’au chargement de la page, un bloc soit déplié ?

    Ex : http://dynamique-solidaire94.org/menage-service-emplois-familiaux

    J’aimerais que le 1er bloc à de la colonne de gauche soit déplié.

    Merci d’avance

    • Tu peux le faire directement en jQuery. La fonction eq(index) permet de choisir le bloc à déplier :

      jQuery(document).ready(function() {
              jQuery('h4.blocs_titre').eq(0).click();
      });

    Reply to this message

  • 7

    Bonjour,

    Tout d’abord, merci pour le travail effectué qui permet “aux billes” dans mon genre de faire un site.

    J’utilise sarkaspip comme squelette (dernière version).
    Je suis sous spip 1.2c

    J’ai installé le “Couteau suisse”
    Je n’arrive pas à faire fonctionner le bloc dépliant.

    Voici le “morceau d’article” concerné en essais :

    “bloc” (je ne met pas entre guillemets mais entre signe “inférieur” et “supérieur”)
    Il existe différents types d’arc en fonction de l’utilisation que l’on veut en faire : (suivi de 2 lignes blanches)

    • Les arcs à poulies sont utilisés principalement pour la chasse.
    • Les arcs classiques sont quant à eux utilisés pour le sport ou le loisir.

    “bloc” (sans ligne avant ce dernier bloc)

    Pouvez-vous me dire ce que je fais mal SVP

    Cordialement
    JPA

    • je me réponds à moi-même, j’avais oublié le “/” avant le second “bloc”. Mais il me semble que ce n’est pas noté dans l’explication.

      Par contre le titre cliquable n’apparait pas bien au format PDF ==> bleu avec des signes # et chiffres à la place de lettres.

      Est-ce dû au squelette ? au plugin “Pdf” ?

      Ou plus certainement une erreur de ma part ?

      Avec toutes mes excuses pour cet apprentissage “un peu rude” pour moi.

    • En plus le “/” Etait bien noté. Je suis vraiment mauvais
      Avec toutes mes excuses

    • Si tu veux donner un morceau de code, pourrais-tu le noter entre les balises <code> et </code> ?

      Tu as aussi : <cadre>, </cadre>, <html> et </html>

      Tu as peut-être un lien public à montrer?

    • Bonjour,

      Merci pour votre aide.

      <bloc>
      Il existe différents types d’arc en fonction de l’utilisation que l’on veut en faire :
      
      
      
      -* {{Les arcs à poulies}} sont utilisés principalement pour la chasse. 
      -* {{Les arcs classiques}} sont quant à eux utilisés pour le sport ou le loisir.
      </bloc>

      La page concernée : http://www.fscf-fcomte.fr/spip.php?article35
      Puis mettre au format PDF.

      J’obtiens :

      Il existe différents types d&#8217;arc en fonction de
      l&#8217;utilisation que l&#8217;on veut en faire :

      En fait il semble qu’il s’agisse des “apostrophes” qui ne passent pas au pdf car sur un autre article en “Actualité” cela passe bien.

      A part enlever les apostrophes je ne vois pas ce qu’il faut faire.

      Encore merci
      Cordialement

    • Ah, c’est plutot un problème du plugin pdf alors, pas des blocs...

      Le titre cliquable est codé comme ceci : <h4 class=blocs_titre><a href="#">L'apostrophe :</a></h4>

      Essaie de mettre <h4 class=blocs_titre>L'apostrophe :</h4>, puis <a href="#">L'apostrophe :</a>, histoire de voir quelle balise ce plugin interprète mal...

    • Bonjour,

      De retour, je découvre votre message. merci pour votre réponse et je vais essayer de faire ce que vous dites.

      Mais... où est-ce que je dois noter ce que vous suggérez... je vous avais bien dit que je suis une “bille”... j’avoue que je suis un peu gêné d’embêter comme cela.

      Merci pour tout

      JPA

    • Mais... où

      ... directement dans le texte de l’article. Ensuite, il suffit de le visionner sous PDF...

    Reply to this message

  • 6

    youpi encore une fonctionnalité totalement inaccessible au clavier

    • euh? tu peux expliquer et donner les solutions ? ça serait plus constructif qu’un coup de gueule. tu as l’air un pro du clavier alors aide-nous...

    • Tu utilises un onclick sur un Hx et un Hx ne peut pas recevoir le focus au clavier par défaut donc je n’ai aucun moyen d’activer le onlick sans la souris.
      Pour corriger cela tu peux entourer le contenu du Hx d’un lien vers une ancre situé juste en dessous et ajouter le onclick sur le lien plutot que sur le Hx

    • Ok, mais ta remarque concerne une généralité sur l’accessibilité ou toi, tu as besoin de faire un site accessible au clavier? Dans le second cas, je peux fournir sans problème un code jQuery adapté.

      Ensuite, prones-tu l’utilisation d’accesskey ou de simples tabulations sur les liens ?

      Utiliser un lien comme tu dis impliquerait l’utilisation des styles associés aux liens, ce qui n’est pas forcément du meilleur effet...

    • Ce genre de solution donc : <div class="cs_blocs cs_bloc2"><a href="#" class="blocs_titre blocs_replie">un titre</a><div class="blocs_invisible">le contenu</div></div>

    • pas d’accesskey c’est merdique donc oui plutot qqchose comme :

      <div class="cs_blocs cs_bloc2">
      <h3 class="blocs_titre blocs_replie"><a href="#monbloc1">un titre</a></h3>
      <div class="blocs_invisible"><a name="#monbloc1" id="#monbloc1"></a>
      le contenu
      </div>
      </div>

      (attention souvent sur ie y a un problème de la synchronisation du clavier avec les ancres et les focus)

      ce qui sans javascript donne :

      <h3>un titre</h3>
      le contenu
    • Allez pour le lien dans le titre. je viens de faire la modif dans le plugin. En revanche, il s’agit bien d’un h4, non d’un h3, et pointer le titre sur un “#” me parait suffisant...

    Reply to this message

  • 3

    Bonjour,

    top fonctionnalité !

    Je l’utilise dans un menu de rubriques et sous-rubrique (adapté de “inc-rubriques.html” de la dist)
    Y’aurait-il un moyen de ne pas afficher la flèche quand le bloc ne comprend rien ?

    • Je devine que tu utilises les balises en #BLOC_TOTO dans ton squelette ?

      La syntaxe SPIP (crochets et parenthèses) ne suffirait-elle pas pour obtenir ce que tu veux ? Le plugin n’a aucun moyen de savoir ce que se trouve entre #BLOC_DEBUT et #BLOC_FIN...

    • Tu devines bien !
      et non, ça ne fonctionne pas avec la synthaxe Spip...
      et je suis en plus confrontée à un autre souci : mes titres sont des titres de rubriques, et il faudrait donc que la flèche effectue le dépliage, mais que le clique sur le titre m’amène sur la rubrique.

      Je sais pas si je suis claire. En tout cas, je cherche et je vous tiens au courant ! (je suis pas non plus contre une piste, si y’a ça facile sous le coude ;-)

    • Ca, ce n’est pas possible... La flèche et le titre sont liés. Si tu veux un lien vers ta rubrique, il faut faire un lien distinct...
      Voici un exemple de code, si ça peut te servir :

      <BOUCLE_rub_test(RUBRIQUES){tout}>
      [(#TEXTE*|?{' ',''})#BLOC_TITRE #TITRE #BLOC_DEBUT #INTRODUCTION #BLOC_FIN]
      [(#TEXTE*|?{'',' '})<div>#TITRE</div>]
      </BOUCLE_rub_test>

    Reply to this message

  • 10

    J’ai tenté de définir un bloc2 dans bloc.css.html comme suit :

    div.cs_blocs h4 {
            background:transparent url([(#EVAL{_DIR_IMG_PACK}|url_absolue)]triangle-bas.gif) no-repeat scroll left center;
            font-family: "Trebuchet MS";
            font-variant:small-caps;
            font-weight:bold;
            font-size:100%;
            color:#666666;
            background-color: #AF9CB4;
            font-weight:normal;
            line-height:1.2em;
            margin-top:4px;;
            padding:0pt 0pt 0pt 20px;
            margin-bottom:0.1em;
            clear:left;
    }
    
    div.cs_blocs h4:hover {
            cursor:pointer;
            text-decoration:underline;
    }
    
    div.cs_blocs h4.blocs_replie {
            background:transparent url([(#EVAL{_DIR_IMG_PACK}|url_absolue)]triangle.gif) no-repeat scroll left center;
            background-color: #BFB0C4;
    }
    
    div.cs_bloc2>div {
            font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
            float: right;
            width:20em;
            margin-right:0em;
            border: 0.10em solid;
            padding:0.5em;
            font-size:0.95em;
            background-color:#D4D4D4;
    }
    
    div.cs_bloc2 h4, div.cs_bloc2 h4.blocs_replie {
            background:transparent none;
    }

    Mais devinez ? ça ne marche pas...

    Elle est où ma bêtise ?

    Merci

    • bonjour,

      peut être 2 petites pistes pour toi :
      div.cs_blocs h4 background:transparent url([(#EVAL_DIR_IMG_PACK|url_absolue)]triangle-bas.gif)

      cela ne me semble pas terrible , div.cs_blocs h4 background:transparent url([#EVAL_DIR_IMG_PACK/triangle-bas.gif]) semble mieux (enfin dans le principe il doit manquer ’’\’ avant ton image)

      ensuite dans la déclaration de tes polices :

      font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;

      pourquoi des guillemets sur les 3 premiers ?

      Voila je ne sais pas si cela pourra t’aider mais je pense que ces deux passages ne sont pas conformes

      ps: au passage merci encore à pat pour son engagement et ses supers plugins

    • Ecoute, je viens d’essayer ton code sous SPIP SVN, et les modifs sont bien prises en compte... Que veux-tu dire par “ça marche pas” [1] !?

    • Une fois ces modifs faites dans bloc-css.html, si je mets une partie de texte dans un article entre <bloc2> et </bloc2>, ma partie de texte disparaît mais bloc2 n’est pas pris en compte.

    • As-tu bien :

      1. pris en compte la syntaxe avec le double saut de ligne ?
      2. mis à jour le Couteau suisse avec la toute dernière version ?
      3. affiché la page de config du plugin pour réinitialiser l’ensemble des outils ?
    • 1 - Oui le réglage <bloc> est bien pris en compte mais <bloc2> ne passe pas
      2 - Toute dernière version installée : 1.7.16.01
      3 - Réinitialisation des outils, message

      vérifier les droits d'écriture
      Le système a rencontré une erreur lors de l'écriture du fichier _DIR_CS_TMPmes_options.php. Veuillez, en tant qu'administrateur du site, vérifier les droits d'écriture sur le répertoire ..

      Mais je ne vois pas de quel répertoire il s’agit.

    • Ah ui, la version du plugin n’a pas changé lorsque le numéro des blocs a été introduit... Si tu mettais à jour le plugin qd même (v1.7.16.02) ?

      (je ne parlais pas de réinitialisation totale des outils, mais une simple recompilation des outils, obtenue en se rendant sur la page de config du plugin)

    • ça commence à venir...

      bloc2 est pris en charge. Seulement le titre du bloc se trouve en dehors du cadre du bloc et le triangle n’apparaît pas à gauche du titre comme dans bloc1

    • La situation est donc débloquée ; maintenant, c’est du css pur et dur. utilise-donc firefox/firebug !

      bon courage.

    • Merci...

      Je sens que je vous énerve et il y a de quoi...

      Voici ce que j’ai trouvé...

      Bizarre mais ça a l’air de marcher. Bloc1 (h4) sur toute la largeur et bloc2 largeur réduite et calé à droite. Le code de mon bloc.css.html

      div.cs_blocs h4 {
              background:transparent url([(#EVAL{_DIR_IMG_PACK}|url_absolue)]triangle-bas.gif) no-repeat scroll left center;
              font-family: "Trebuchet MS";
              font-variant:small-caps;
              font-weight:bold;
              font-size:120%;
              color:#666666;
              background-color: #AF9CB4;
              line-height:1.2em;
              margin-top:4px;
              padding:0pt 0pt 0pt 20px;
              margin-bottom:0.1em;
      }
      
      div.cs_blocs h4:hover {
              cursor:pointer;
              text-decoration:underline;
      }
      
      div.cs_blocs h4.blocs_replie {
              background:transparent url([(#EVAL{_DIR_IMG_PACK}|url_absolue)]triangle.gif) no-repeat scroll left center;
              background-color: #AF9CB4;
      }
      div.cs_bloc2 {
              font-family: "Lucida Grande",Lucida Sans Unicode,Tahoma,Verdana,Arial,Helvetica,sans-serif;
              font-variant:small-caps;
              font-weight:bold;
              font-size:120%;
              color:#666666;
              background-color: #AF9CB4;
              line-height:1.2em;
              margin-top:4px;
              padding:0pt 0pt 0pt 20px;
              margin-bottom:0.1em;
              width: 20em;
              float: right;
      }
      div.cs_bloc2 bloc2_replie {
              background:transparent url([(#EVAL{_DIR_IMG_PACK}|url_absolue)]triangle.gif) no-repeat scroll left center;
              background-color: #AF9CB4;
      }

      J’ai fait des bêtises ?

      Mais si vous n’avez pas le temps, tant pis...

      Merci quand même

    • Mais non ya aucun énervement ici, on veut bien t’aider. On sait pas trop quel aspect tu veux donner à tes blocs. Mais c’est vrai aussi que l’apprentissage des CSS n’est pas l’objet de ce forum.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom