Introduction aux squelettes SPIP «RÉCIT

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2»
Note importante : Pour l’installation de SPIP et des squelettes RÉCIT-FP Partenaires v1.3.2, veuillez vous référer au fichier INSTALL.txt. Pour y accéder : RÉCITFP_Partenaires_v1-3-2.zip / Documentation / INSTALL.txt
Structure commune à toutes les pages du squelette
Les sections (colgauche, pied, entête) sont inclues dans chacune des
pages principales de SPIP (article, sommaire, rubrique etc).
Exemple de code de la page sommaire.html qui appelle le fichier
colgauche :
<!-- // Début de la colonne gauche // -->
<div id="colgauche">
<INCLURE(colgauche.php3){lang}>
</div>
<!-- // Fin de la colonne gauche // -->
En utilisant cette forme d’inclusion, lorsque nous modifions le contenu
de colgauche, (exemple, en changeant la boucle SPIP qui fait afficher
les rubriques) la modification s’applique sur toutes les pages SPIP
(sommaire, article etc.) qui incluent colgauche.
Notez que tout ce qui concerne le style de l’affichage (couleur, positionnement, taille etc.) est géré dans deux fichiers .css :
style_perso.css -> Feuille de styles simplifiée et annotée qui permet de repérer rapidement les principaux paramètres à modifier pour une personnalisation de base. Pour plus
d’information, consulter la section suivante : Personnalisation de base du squelette SPIP «RÉCIT-FP Partenaires v1.3.2»
style.css -> Feuille de styles principale qui comprend 90% des informations de style de ces squelettes.
Personnalisation de base
Élément
Modification
Logo de
Changer le logo
l’organisme
Positionner le logo
Fichier (s) concerné (s)
Action à porter
VotreDossierSPIP\squelettes\css\images\logo-site.gif
Sauvegarder votre image sous le nom logo-site.gif et télécharger cette
dernière à l’endroit approprié.
VotreDossierSPIP\squelettes\css\style_perso.css
Repérer et modifier ce code :
/*========================================
LOGO DE L'ORGANISME
========================================*/
h1 a, h1 a:link, h1 a:visited, h1 a:active, h1 a:hover {
background-image: url(images/logo-site.gif) ; /* Emplacement de l'image
*/
height: 48px; /* Hauteur de l'image */
top: 25px; /* Position du haut */
left: 35px; /* Position de la gauche */
Nom de
Modifier le nom
l’organisme
VotreDossierSPIP\squelettes\local_fr.php3
Repérer et modifier ce code :
// T
'titre_site' => 'Le nom de <strong>votre organisme</strong>',
Positionner le nom
VotreDossierSPIP\squelettes\css\style_perso.css
Repérer et modifier ce code :
/*========================================
POSITION DU TITRE DE L'ORGANISME
========================================*/
padding-left: 70px; /* Position de la gauche */
padding-top: 25px; /* Position du haut */
Bandeau
Menu de
gauche
Changer le
bandeau
VotreDossierSPIP\squelettes\css\images\ entete -bandeau.gif
Modifier la couleur
du rollover du texte
du menu
VotreDossierSPIP\squelettes\css\style_perso.css
Sauvegarder votre image sous le nom entete -bandeau.gif et télécharger cette
dernière à l’endroit approprié
Repérer et modifier ce code :
/* ========================================
MENU VERTICAL
======================================== */
.menuGauche li a:hover {
color: #193485; /* Couleur du lien en survol */
background-color: #FFFFFF; /* Couleur de fond en survol */
border-color: #BFBFBF; /* Couleur de la bordure */
Titres
d’article et
de rubrique
Modifier la couleur
du fond de la case
de titre
VotreDossierSPIP\squelettes\css\style_perso.css
Repérer et modifier ce code :
/*========================================
TITRES DE PAGE
========================================*/
#colcentre h3, /* Titre des nouveautés sur la page d'accueil */
#contenu h2 /* Titre de la page d'un article */ {
color: #FFFFFF; /* couleur du titre */
background-color: # 193485; /* couleur du fond */
}
Rubrique
Modifier le titre des
boîtes
•
•
•
Ressources
publiées
par votre
organisme
VotreDossierSPIP\squelettes\local_fr.php3
Repérer et modifier ce code :
'sousrubrique_recitfp' => 'Ressources publi&eacute;es par votre
organisme ',
Ressources
externes
------------------------------------------------------
Ressources
externes
syndiquées
---------------------------------------------------------------
'liens' => 'Ressources externes'
'articles_syndic' => 'Ressources externes syndiqu&eacute;es',
Modifier la couleur
des titres de boîtes
VotreDossierSPIP\squelettes\css\style.css
Repérer et modifier ce code :
/* Titre h3 sous-rubrique et article*/
#boite-srubrique-rubrique h3,
#boite-articles-rubrique h3 {
color: #193485;
font-size: 13px;
margin-left: 10px;
}
/* Titre h3 rubrique liens*/
#boite-liens-rubrique h3 { color: #027F02; font-size: 13px; margin-left: 10px;}
/* Titre h3 rubrique liens syndiqués*/
#boite-syndic-rubrique h3 {color: #FFC200; font-size: 13px; margin-left: 10px;
position: relative;}
Modifier la couleur
des contours des
boites
VotreDossierSPIP\squelettes\css\style.css
Repérer et modifier ce code :
/* Bordure boite de rubriques et d'articles */
#boite-srubrique-rubrique {
border: 1px solid #193485;
}
/* Bordure boîte liens*/
#boite-liens-rubrique {
border: 1px solid #027F02;
}
/* Bordure boîte liens syndiqués */
#boite-syndic-rubrique {
border: 1px solid #FFC200;
}
Changer les puces
VotreDossierSPIP\squelettes\css\images\
Sauvegarder votre image sous le nom approprié et la télécharger
Bas de
page
Modifier le texte
«Ce site fait partie
du projet»
VotreDossierSPIP\squelettes\local_fr.php3
Changer la
signature du
RÉCIT-FP
VotreDossierSPIP\squelettes\css\images\pied-logo-recit.gif
Repérer et modifier ce code :
'site_recitfp' => 'Ce site fait partie du projet « Sites partenaires FP »
d&eacute;velopp&eacute; par : ',
Supprimer ou remplacer cette image par une de votre choix