Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Squelette Sarka-Spip : bandeau, bande et blocs

Squelette Sarka-Spip : bandeau, bande et blocs

J’ai essayé le squelette Sarka-spip : quel plaisir ! Une grande logique, une grande simplicité. Voici mes découvertes au fur et à mesure

1) télécharger spip 1.9.2d à la racine du site distant, c’est-à-dire dans le dossier www. Le lancer avec spip_loader.php

2) installer aussi Sarka-spip 1.9.2d, à la racine du site - Adresse : http://sarka-spip.net/

On trouve plein d’explications ici :
http://www.spip-contrib.net/Sarka-SPIP-1-9-1-nouveautes

Evidemment il faut installer des versions plus récentes quand elles paraissent.

Voici mes découvertes à moi

 Le bandeau de titre

On trouve le bandeau de titre ici : -www/squelettes/inclusions/bandeau.html

a) on peut changer sa couleur, en modifiant le fichier style.css que l’on trouve ici : www/squelettes/styles

Méthode

Utiliser un logiciel FTP par exemple Filezilla

– a) sur le site distant, dans squelettes/styles, renommer style.css en - style-ORI.css, pour le sauvegarder
– b) par FTP, envoyer style-ORI.css vers l’ordinateur, puis ouvrir ce fichier.
Chercher 6262A4 (qui est la couleur bleue du site de base) et mettre une autre couleur.
– c) Enregistrer sous le nom : style-1.css
– d) Envoyer le fichier style-1.css vers le site distant
– e) renommer style-1.css en ...... style.css

b) mettre un dessin dans le bandeau

Il se met à la place de LOGO_SITE_SPIP.

Pour cela , passer dans l’espace privé du site, et cliquer sur « configuration ». On voit alors à gauche le petit outil « Logo du site » qui permet de télécharger le logo du site.

Attention, ce logo fait environ 300 px de large (et toute la hauteur qu’on veut). Si on veut mettre un logo plus large (500 px c’est bien), il faut encore aller toucher le fichier style.css

Aux alentours de la ligne 295 on trouve

a.bandeau .spip_logos {
	float: left;
	border: 0px; }

Il faut alors mettre , à la place, ceci :

a.bandeau .spip_logos { float: left; border: 0px; width:500px; }

c) on peut modifier le texte figurant dans le bandeau

par exemple en mettant l’adresse du site

 Autre bandeau

On peut aussi renoncer au bandeau ci-dessus et en faire un à sa guise. Pour cela il faut aller modifier le fichier squelettes/sommaire.html

On y voit ceci :

[(#REM) <!-- ============== ZONE BANDEAU ============= --> ]
<INCLURE{fond=bandeau}>

On peut mettre ceci :

[(#REM) <!-- ============= ZONE BANDEAU=============== --> ]
      <div style="background:#FF999E">
<img src="http://www.journal-la-mee.fr/bandeau-semaine.jpg">
        </div>
 <!--<INCLURE{fond=bandeau}>-->

Comme ça cela introduit le « bandeau-semaine » sur un fond de couleur #FF999E et cela supprime le fond-bandeau.

 Bande-chemin

Il s’agit de l’étroite bande de couleur située sous le bandeau, et qui sert pour une navigation rapide.

On trouve la bande-chemin de titre ici : www/squelettes/inclusions/bande-chemin.html

On peut y mettre les rubriques de façon permanente.
Par exemple, au lieu d’avoir :

<div id="bande-chemin" class="bande-chemin">
       <a href="#URL_SITE_SPIP"><:accueil_site:></a>
        <BOUCLE_rubrique(RUBRIQUES){id_rubrique}> ..... etc

on peut mettre les lignes correspondant aux rubriques 1 et 2 :

<div id="bande-chemin" class="bande-chemin">
        <a href="#URL_SITE_SPIP"><:accueil_site:></a>
        |<a href="http://monsite/spip.php?rubrique1">Rubrique 1</a>
        |<a href="http://monsite/spip.php?rubrique2">Rubrique 2</a>

        <BOUCLE_rubrique(RUBRIQUES){id_rubrique}>  ... etc

 Blocs de droite

Il y a deux blocs de droite dans www/squelettes/inclusions

– a) bloc-droite-all-news.html ......... qui n’apparaît que lorsqu’il y a des brèves
– b) bloc-droite-secteur-news.html .............qui n’apparaît que lorsqu’il y a des sites référencés dans les rubriques.

Modifier bloc-droite-all-news.html

1 - On peut supprimer le titre général, en désactivant la ligne 10, c’est-à-dire celle-ci :
<a class="en-tete" href="#URL_PAGE{breve}"><:breves:></a>

en fait il ne faut pas l’effacer, il faut seulement écrire ceci :

<!--
<a class="en-tete" href="#URL_PAGE{breve}"><:breves:></a>
-->

2 - On peut aussi supprimer la date en désactivant la ligne 13, c’est-à-dire en mettant ceci

<!--<div class="date">
[(#DATE|nom_jour)] [(#DATE|jour)] [(#DATE|nom_mois)]
</div>-->

 Image de fond

On peut mettre une image de fond, comme ici : http://www.csgf-energies-nouvelles.fr/

Comment faire :

1) trouver une image de fond, de dimension 1000 px de large et 600 px de haut (environ). Disons qu’elle peut s’appeler « pays-fond » (ou autre chose)

2) envoyer la photo à la racine par FTP. Vérifier son adresse.
Ici, pour moi : http://www.lisez-moi.info/pays-fond.jpg

4) ouvrir le fichier squelettes/habillage.css et remplacer

body
background : #FFFFFF ; ...........etc

par :

body {
        background: transparent url(http://www.lisez-moi.info/pays-fond.jpg) no-repeat fixed ;

Cela met l’image .... « fixed »

5) descendre plus bas et mettre

.derniers-articles
background : transparent ;............etc

6) enregistrer le nouveau fichier habillage.css et envoyer par FTP en principe ça fonctionne.

 Présentations différentes

Si l’on souhaite avoir un design différent pour le sommaire et pour les articles, on peut modifier les fichiers : style.css, header.html, sommaire.html et article.html Voici une idée

1) Créer un fichier style-article.css et un fichier style-sommaire.css

2) A partir de header.html créer un fichier header-article.html où il y aura, à la ligne 7 : <link rel="stylesheet" href="#CHEMIN{style_article.css}" type="text/css">

3) De même à partir de header.html créer un fichier header-sommaire.html où il y aura, à la ligne 7 : <link rel="stylesheet" href="#CHEMIN{style_sommaire.css}" type="text/css">

4) Modifier sommaire.html en mettant, à la ligne 38 (juste avant <body ) :         <INCLURE{fond=header-sommaire}>

5) Modifier de même article.html en mettant, à la ligne 38 (juste avant <body ) :         <INCLURE{fond=header-article}>