Personnaliser squelette scolaspip

De Wiki Dane (ex wikitice)
Aller à : navigation, rechercher

Changer l'affichage des articles "À la une" (mot-clé Sélection)

Cette modification permet de remplacer l'affichage classique des articles rattachés au mot-clé Sélection par un affichage dynamique sous forme de slide, comme par exemple sur le site http://www.clg-daguerre-cormeilles.ac-versailles.fr

Scolaspip as.jpg

Les étapes de mise en place

1. Installer le plugin Anything Slider

http://contrib.spip.net/AnythingSlider-version-2-x-x

2. Créer avec un client FTP à la racine du site dans /squelettes/inclure/ un fichier selection_accueil.html avec le contenu ci-dessous

[(#REM) Articles Selectionnes du site ]

<B_slider>
<div class="slider-conteneur liste article">
  <h2 class="h2"><:scolaspip:articles_selection:></h2>
  <ul class="slider-anythingslider liste-items" id="slider_spip" style="width:390px"
          data-slider='{
                 css:["#CHEMIN{lib/anythingslider/css/theme-simple.css}"],
                 buildStartStop: false,
                 buildNavigation: true,
                 autoPlay  : true,
                 pauseOnHover : true,
                 buildArrows  : false, 
		 hashTags : false,
	         delay: 5000
           }'>
        <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}{mots.titre=Sélection}>
   <li class="panel">
	<div>
		<br />
			<h3 class="h3 entry-title contenu_panel"><a href="#URL_ARTICLE" rel="bookmark">[(#LOGO_ARTICLE_RUBRIQUE|left||image_reduire{100,50})]#TITRE</a></h3>
			<br />
			<div class="#EDIT{intro} introduction contenu_panel">[(#INTRODUCTION|couper{250})]</div>
			<br /><a href="#URL_ARTICLE"><b>Lire la suite...</b></a>
	</div>
	</li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

3. Dans l'espace privé de SPIP (Squelettes\ScolaSPIP\Thèmes et couleurs), ajouter les lignes suivantes dans la feuille CSS :

body #slider_spip {
height: 200px ;
        background-color : #C4C4C4 ;
        margin: 10px ;
        margin-top: 0px ;
}

.contenu_panel {
       width: 370px ;
}


4. Éventuellement personnaliser l'apparence du plugin Anything Slider

C'est dans le fichier créé à l'étape 2 que vous pouvez personnaliser des paramètres (affichage des flèches, choix du thème, lecture automatique...) du plugin Anything Slider. Pour vous aider, consultez la documentation du site officiel : http://css-tricks.com/examples/AnythingSlider/#&panel1-3 et quelques exemples : http://css-tricks.com/examples/AnythingSlider/demos.html#&panel1-1&panel2-1&panel3-1

                 css:["#CHEMIN{lib/anythingslider/css/theme-simple.css}"],
                 buildStartStop: false,
                 buildNavigation: true,
                 autoPlay  : true,
                 pauseOnHover : true,
                 buildArrows  : false, 
		 hashTags : false