Introduction :
Alors tous les dossiers que l'on veut bidouiller sont dans squelettes-dist, alors on les copie sur notre ordi via Filezilla et quand on les a modifiés, on les met dans squelettes tout court... 
Comme ca on a toujours nos fichiers originaux dans squelettes-dist en cas de drame.
NB: Le machin qui récupère nos fichiers pour faire le site va d'abord dans squelettes et y prend ce qu'il y trouve puis dans squelettes-dist pour compléter...
Exemple: J'ai mon habillage.CSS modifié dans squelettes et l'original toujours dans squelettes-dist, c'est celui dans squelettes qui est pris en compte, l'autre on s'en fout, c'est juste notre filet de sécurité.

1-Mettre dans l'ordre les rubriques:
Dans l'espace privée, numeroter les rubriques dans l'ordre choisi, ex:1. espace Cas Libre
 
Ouvrir dossier inc rubrique.html, qui est sur le serveur  (squelettes_ dist) avec un éditeur de texte basic
reperer la boucle :
 <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
 et  sur la ligne de commande suivante et  y inséré le code : |supprimer numero

<li>                        
<a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80}|supprimer_numero)] </a>

Enregistrer changement et remettre fichier dans squellettes , recalculer la page.
Dans inc rubrique, on peut enlever l'intitulé rubrique sur le site. 
Donc ouvrir le fichier, repérer son emplacement et supprimer la commande entre les balises<h2>  
<div class="menu rubriques">
	<h2><:rubriques:></h2> 
 enregistrer et remettre le fichier sur le serveur
le titre rubrique disparait sur le site;

2-Pour changer l'apparence du menu rubrique, c'est à dire mettre le cadre dans une couleur  background( couleur de fond) black, et le grossir: border:2
Reperer dans habillage CSS:
/* Rubriques */
.rubriques ol { border: 0; }
.rubriques ul li { background: black; border: 2; }

 Dans habillage CSS, background du site:,reperé:
/* ------------------------------------------
/* Disposition a l'ecran des blocs principaux
/* ------------------------------------------ */

body { /*si on met background ici ca change le background de tout le site*/ margin: 0; padding: 0; text-align: center; }

3- Pour que chaque rubrique puisse être gérée indépendemment:
Il suffit de créer de nouvelles fiches inc-rubriques.html pour chaque rubrique.
Par exemple ma rubrique CAS Libres est la rubrique n°4 (NB: c'est bien son numéro SPIP qui nous intéresse pas celui qu'on lui a attribué!)
On crée : inc-rubriques-4.html dans ce document on copie-colle ce qu'il y a dans inc-rubriques.html (c'est notre base commune à toutes les rubriques).
On met le nouveau doc dans squelettes.
Come ça on peut mettre par exemple un fond d'écran propre à CAS Libres
Nous on l'a fait pour toutes les rubriques émission + pour la rubrique Agenda Féministe (cf 7).

4-Changer la taille de la police et la couleur des liens sur le site : ex cas libre, agenda et le titre RADIORAGEUSES. ils apparaissent maintenant en rose. 
Dans fichier habillage.CSS 
a= lien de base
focus= on sait pas ce que c'est
hover= quand on passe la sourie sur le lien
active  quand on clic
Répérer dans habillage css:

/* Couleurs des liens
---------------------------------------------- */
a { color: #FF00FF; text-decoration: none;font-weight: bold; }
a:focus { color: #A233A2; text-decoration: underline; font-weight: bold; } 
a:hover { color: aqua; text-decoration: underline; font-weight: bold; }
a:active { color: #A233A2; text-decoration: underline; font-weight: bold; }
NB: bold pour faire apparaitre en gras
pour changer la couleur, inserer soit un code , soit le nom s'il est reconnaissable.
pour trouver les codes et tester les changements voir site ;w3schools , en anglais tutoriel en ligne avec feuille d'essai

5-Créer une "boîte" en guise de colonne de gauche sur la page d'accueil (pour contenir notre liste de mots-clés "thèmes") :

1/ Dans habillage CSS, on a créer l'id
#motscles {width:10%;
padding:20px;
border:5px solid #FF00FF;
margin:25px; float: left; background:black; color:#FF00FF; }  

2/ Pour que ca marche au niveau de l'affichage on a du changer dans habillage.CSS:
- des éléments de l'affichage de la page:
#page { position: relative; width: 100%; margin: 0 auto; text-align: left;}
pour que ce qu'il n'y ait des marges blanches sur le coté qui bouffent de la place et servent à rien.
- des éléments de l'affichage du texte central:
#conteneur { clear: both; float: left; width: 70%; overflow: hidden; margin-left:70px; }
est devenu:
#conteneur { clear: right; float: left; width: 70%; overflow: hidden; margin-left:70px; }
Mais en vrai on n'est plus sures qu'on l'est fait la...
"Clear", ca veut dire qu'aucun élément ne peut se mettre sur le coté indiqué (du coup il se met en dessous a droite par exemple...) 

 3/ Dans  sommaire.html, on a donc appelé la <div id="motscles"> dans laquelle on a mis:

<BOUCLE_mots_tous(MOTS){tous}{par titre}> <ul class="motscles">
<a href="#URL_MOT" [title="(#TITRE|textebrut|entites_html)"] >#TITRE </a> </ul>
</BOUCLE_mots_tous>

4/ NB : Pour que les mots ne soient pas à la suite mais seulement un par ligne, on a demandé à l'ordi de  faire une liste d'où le <ul class="motscles"> .(ul c'est pour Unordered List).

6-Faire en sorte que seulement les mots clés choisis comme thèmes principaux apparaissent dans la "boîte" (=colonne de gauche sur la page d'accueil)
Dans sommaire.html, on a changé  notre boucle_mots au sein du du <div id="motscles"> pour ne plus avoir une boucle qui appelle tous les mots clés mais plusieurs boucles qui appelle chacune un mot clé en particulier (on se sert là encore du numéro attribué à chaque mot clé par SPIP)

Ex :
<div id="motscles">
<BOUCLE_mots_26(MOTS){id_mot="26"}{par titre}> <ul class="motscles">
<a href="#URL_MOT" [title="(#TITRE|textebrut|entites_html)"] >#TITRE </a> </ul>
</BOUCLE_mots_26>
<BOUCLE_mots_27(MOTS){id_mot="27"}{par titre}> <ul class="motscles">
<a href="#URL_MOT" [title="(#TITRE|textebrut|entites_html)"] >#TITRE </a> </ul>
</BOUCLE_mots_27>
<BOUCLE_mots_28(MOTS){id_mot="28"}{par titre}> <ul class="motscles">
<a href="#URL_MOT" [title="(#TITRE|textebrut|entites_html)"] >#TITRE </a> </ul>
</BOUCLE_mots_28>
</div>

Maintenant dans la boîte ce ne sont pas tous les mots clés qui apparaissent mais seulement les mots clés n°26,27 et 28.

7-Insérer un agenda dans la rubrique "agenda féministe"
Télécharger le plugin "agendax" et l'insérer dans le dosier "plugin" via filezilla. Activer le plugin dans l'espace privé du site. 
Maintenant il faut dire où on le met. Comme on le veut juste dans la rubrique Agenda Féministe on crée une nouvelle page sur le modèle de inc-rubrique mais qu'on nomme inc-rubrique-13 ("13" c'est le numero SPIP de la rubrique Agenda Féministe).  et on y ajoute à la fin 
<div id="agendax"></div>

8-N'afficher que les 5 derniers articles publiés
Dans sommaire.html, repérer la boucle "articles_récents"  et ajouter l'acolade {0,5} pour lui dire qu'on ne veut que les 5 derniers articles. (Pagination 5 ça veut dire qu'il n'y a que 5 articles dans une page et si on lui précise pas {0,5} il fait d'autres pages d'accueil pour les autres articles récents)
ça donne :

<BOUCLE_articles_recents(ARTICLES) {par date}{inverse}{0,5} {pagination 5}> <li class="hentry">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{150,100})]
<h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
<small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small> 
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
</li>
</BOUCLE_articles_recents>
</ul>

	9. pages articles : bien aligner les colonnes

pour que « les bloc « mots cles » et « emission du meme collectif » arrivent a droite de l'article et pas en dessous.
Il etait en {flaot : left} (dans le css) ce qui fait que il s'alignait bien a gauche.
Mais dans le html, (article.html) les bloc etait disposé : d'abords le contenu de l'article puis celui dees blocs « nos extras » et il flottait a gauche mais apres l'article.
On a donc remonté nos extras avant l'article dans le html pour qu'il s'aligne a gauche de l'article. Ça fonctionne dans la mise en page, mais c'est moyen si on regarde la page article sans mise en page car logiquement l'article devrait apparaître en premier, puis les autres trucs (comme les liens , les colonnes, etc) et la comme dans le html ces colonnes viennent avant, quand on regarde la page sans mise en page, ça apparaît d'abord les colonnes puis seeulement apres l'article.
Alors si on trouve un autre truc, c'est mieux !

10.	afficher des titres auc colonnes !

Plutot qu'il y ait « rubriques » ou « dans la meme rubrique » ou « article », on a changé dans la page html les titre de ces truc pour que ça apparaisse :
rubrique  → collectif d'emission
dans la meme rubrique → emissions du meme collectif
article → emission
et ajouter en haut de la colonne de mots clefs  le noms : « mots clés »

11.	afficher plus d'article sur la page sommaire et qu'ils soient tous accessible dans l'ordre de parution (en cliquant sur les chiffres en bas des pages!)

dans la boucle article recents due la page sommaire.html enlever l'acolade {0,5} et mettre {pagination 8} et comme ça y'a un peu plus d'articles qui apparaissent et on peut avoir acces a toute la chronologie ! (je me suis dite que c'etait pratique dans un sens et avec seulement 5 articles qui apparaissent, je trouvais qu'ils disparaissait trop vite... alors avec 8, ça change moins vite!)

12.	afficher une image a la place du titre
on a changé la page inc-entete.html
on a enlevé le logo et puis on a mis pour que le titre soit invisible dans un <span> pour qu'il soit invisible on a mis une classe invisible.
Donc le titre aparait comme ça a l'interieur du lien : 
<span class="invisible"> #NOM_SITE_SPIP</span>

et du coup le lien en entier qui fait l'entete de la page c'est ça : 
<a rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>" class="accueil">
	<span class="invisible"> #NOM_SITE_SPIP</span>
</a> 

au final, le inc-entet-e en entier c'est ça : 

<div id="entete">
	<h1>
		<a rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>" 				class="accueil">
			<span class="invisible"> #NOM_SITE_SPIP</span>
		</a> 
	</h1>
#MENU_LANG
</div>

et pour que ça marche on a changé le css et on a integré l'image dans le css
#entete a { width: 2000px ; padding-top: 1.60em; margin-left: 15%;
background: url(images/logo2.jpg) no-repeat; height: 320px;  }

pour que ce siot a peu pres centré on a changé le margin left. Et puis hop un background avec la reference de l'image (il va chercher le logo du site)
si jamais on veut changer de bandeau et mettre un bandeau qui fait toue la largeur de la page ce qui est pas encore le cas, il faudra enlever la margin-left !
On a mis de pas repeter l'image. Sinon, ça la met en boucle tant qu'il y a de la place (et c'est donc tres moche !
Et on a regler a la taille qu'on veut.
Voilà, comme ça il y a un bandeau. Si on regarde la page sans mise en page, il y a quand meme le titre de la page qui aparait... ce qui est vraiment  bien !!!

13.	on a tenté de changer les boucles qui permettent de faire la colonne de mots cles, maisce fut un e hec. En tout cas cette partie du squelette est vraiment pas bonne (ça ce fait pas d'aligner une dixaine de boucles) on a tenté des trucs sans que ça marche c'est pour ça qu'il y a un fichier test de boucles dans le dossiers squelettes.  Voilà.