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 > Squelettes Renley, EVA, @Brest, Epona et autres

Squelettes en php

Squelettes Renley, EVA, @Brest, Epona et autres

FTP : installation et usage

Ceci est un début d’article que je complèterai au fur et à mesure de mes découvertes.

 Installer un SPIP sur 1and1 (1&1)

voir plus loin


 Racine du site

Il est souvent demandé de mettre quelque chose à la racine du site. Mais où la trouver ?

On utilise un FTP (pour moi c’est FileZilla) (pour d’autres c’est FTP Expert).

On regarde dans le « site distant »

La racine, c’est là où on trouve :

CACHE
dist
ecrire
formulaires
IMG
(etc)

 Squelettes

Avertissement : tout ceci a bien fonctionné tant que j’étais en php3.
Maintenant que j’ai changé de version de spip, et que je suis en php, il faut adapter !

Un Squelette SPIP c’est l’ensemble des fichiers .html

Dans les versions SPIP antérieures à 1.9 chaque fichier .html est mis en mouvement par un fichier .php3

Par exemple :
article.html est mis en mouvement par article.php3
breve.html est mis en mouvement par breve.php3

Un fichier .php3 commence toujours par ..........<?php
et se termine par .............?>

De très bonnes indications ici : http://www.spip-party.net/page.php3?fond=article&id_article=102

A partir de la version SPIP 1.9 le squelette c’est seulement l’ensemble des fichiers article.html, sommaire.html, plan.html etc.

Mais comment savoir les fichiers utilisés ? il suffit d’écrire ..... &var_mode=debug à la fin de l’adresse.

Par exemple, la présente page a pour adresse :
http://www.journal-la-mee.fr/spip.php?article5007

mais si on met : http://www.journal-la-mee.fr/spip.php?article5007&var_mode=debug
on trouve que les squelettes utilisés sont : squelettes/article.html, dist/modeles/lesauteurs.html, dist/modeles/article_traductions.html, etc, etc.

Debug ? voir plus loin

  Importer un squelette existant : Renley

On trouve le squelette de Renley ici.

J’ai eu du mal, mais à force d’essayer « des choses », j’ai trouvé cette façon de faire :

1) télécharger un squelette voir ici

2) l’enregistrer sur le disque dur et le dé-zipper

3) Alors j’ai regardé ce qu’il y avait dedans.
J’y ai vu trois sous-dossiers :
– squelettes-renley
– IMAGES
– STYLES

J’ai envoyé, avec FileZilla, les dossiers séparément sur le site distant, à la racine, et j’ai renommé « squelettes-renley » en « squelettes » (avec un s)

Cela m’a donné un message d’erreur

Warning : main(inc-public.php3) : failed to open stream : No such file or directory in homepages/11/d149162454/htdocs/spip-1-8-2-b/spip/squelettes/inc_balises_met
a.php3 on line 6

Transformer php3 en php

Je me suis doutée qu’il y avait un problème avec le php3 : tous mes fichiers de départ sont en php (et pas en .php3 car je n’ai pas réussi à charger du php3 sur 1&1).

Il m’a fallu reprendre tous les fichiers .php3 de Renley, (il y en a une dizaine), les ouvrir et modifier à l’intérieur, pour y mettre :
include (« inc-public.php ») ;
au lieu de include (« inc-public.php3 ») ;

(on modifie à l’intérieur, mais pas le nom du fichier).

Cette simple modification, faite à l’intérieur des fichiers .php3 fait que ça fonctionne.

Si on avait un hébergeur qui accepte le php3 dès le début, ce serait sans doute plus facile !

 .htaccess

D’après les conseils qui m’ont été donnés sur les forums SPIP, il semble qu’il est plus facile de modifier le .htaccess. Mais je n’ai pas essayé. Voir quelques indications plus loin

 php ou php3 ?

De bonnes indications ici, en particulier sur MAC


 Modifier le design - couleur de fond

Ce que je dis ci-dessous concerne le squelette de Renley, le seul que j’ai essayé.

Il faut aller dans squelettes/styles et modifier le fichier style.css

Pour modifier la couleur de fond, il faut modifier le background de

#body
#page
#en-tête
#menu
#barre_latérale
#pied_de_page

On peut mettre :
– soit une couleur, par exemple
background : #FF6600 ; (ici couleur orange)

– soit une texture, par exemple
background : url(« http://www.grsites.com/archive/textures/view/source=archive/id=229/ ») ;

Il faut ensuite, dans le même fichier style.css changer la couleur de fond des articles. On cherche donc beaucoup plus bas, dans la partie typographie :
On trouve texte (et deux accolades)
On ajoute la couleur, ça donne par exemple
texte (accolade)background : #FFF197 ; (accolade)

Ne pas oublier le # avant la couleur, et le ; en bout de ligne

Quand tout est prêt, expédier style.css , par FTP, dans le site distant, dans squelettes/styles, et regarder ce que ça donne ... pour pouvoir corriger !

On peut voir ce que cela donne en utilisant Firebug voir plus loin


EVA SPIP / UN AUTRE SQUELETTE SYMPA.

voir aussi

Ce qui est bien :
1) EVA contient les fichiers de SPIP, donc en installant Eva-web_v2-1, on installe aussi SPIP
_2) L’article sur internet est très bien détaillé.

Ce qui n’est pas bien .... c’est que c’est du php3 et que ça ne va pas sur 1and1. J’ai essayé de modifier htaccess.txt mais je n’ai pas réussi.


Squelette de @-Brest

Finalement, étant sur 1and1 qui n’accepte pas le php3, j’ai tout viré : SPIP, Renley, Eva, qui se trouvaient sur le site distant.

Puis j’ai réinstallé SPIP en php, et j’ai configuré.

Puis je suis allée chercher le squelette de Brest, en php.

Je l’ai téléchargé et dé-zippé. En l’ouvrant j’ai trouvé dedans :
– squelette
– readme (fichier qui explique bien les choses)

J’ai ouvert « squelette » et j’ai trouvé dedans :
css
interface
actualités.html
actualités.php
etc.

C’est donc ces fichiers que j’ai expédiés par FTP sur le site distant, à la racine. Quand c’est fait (assez rapide), on trouve alors à la racine :

CACHE
css
dist
ecrire
formulaire
IMG
interface
actualités.html
actualités.php
etc.

Il reste à faire (quelque chose de semblable à ceci) :
http://s14183945.onlinehome.fr/spip/ecrire
pour trouver le modèle correspondant au squelette de Brest. Il reste à le mettre à son goût avec les indications données dans le fichier « readme »

C’est finalement TRES SIMPLE

 Modifier l’en-tête de la page

Il faut aller chercher le fichier inc_header.html

1) ouvrir ce fichier
2) faire : affichage / code source de la page
3) faire : fichier/copier ce code source
4) ouvrir un « bloc-note » (notepad ou autre chose)(1) et faire fichier/coller
5) modifier comme on veut.

Moi ça me donne ceci :

<div id="banner">
<br />
<br />
<table width="900" cellspacing="0" cellpadding="0" border="0" align="center">
      <tr>
           <td><img src="interface/bandeau-mee.png"></td>
       </tr>
</table>


</div>

<div id="menuheader">
<a href="actualites.php">Actualit&eacute;s</a> |
<a href="article.php?id_article=1">Accueil</a> |
<a href="article.php?id_article=2">Qui sommes-nous ?</a> |
<a href="article.php?id_article=3">Ecrire à La Mée </a>|        
<a href="article.php?id_article=4">Plan du site</a> |
       
</div>

Explications :(header en anglais ça veut dire : tête)

a) j’ai mis br / br / au début car je voulais descendre le bandeau, qu’il ne soit pas trop collé en haut de page

b) Entre table> et /table> j’ai fait un tableau d’une ligne, une colonne, sans bordure, centré, où j’ai mis l’image que j’ai fabriquée : « bandeau-mee.png »
[cette image il ne faut pas oublier de l’expédier dans le site distant, dans le dossier interface]

c) J’ai indiqué ce que je voulais, par exemple : l’accueil à l’article 1 :
a href=« article.php ?id_article=1 »>Accueil

on aurait pu le mettre aussi à la rubrique 2 :
a href=« rubrique.php ?id_rubrique=1 »>Accueil

d) j’ai enregistré le tout sous le nom inc_header1.txt

e) j’ai envoyé inc_header1.txt, sur le site distant, à la racine.
j’ai supprimé le inc_header.html existant (ou du moins je l’ai renommé #inc_header.html pour ne pas le perdre au cas où)
et j’ai renommé inc_header1.txt avec le nom : inc_header.html

Et voilà, ça marche. C’est TRES simple.

 Pied de page

Il faut modifier le fichier inc_footer.html
de la même façon que ci-dessus.

Pour moi voici ce que j’ai mis :

<div id="footer">
<a href="plan.php">Plan du site</a> |
<a href="article.php?id_article=2">Qui sommes-nous ?</a> |
<a href="article.php?id_article=3">Contact</a>
</div>
 

Squelette Epona

Bien lancée, j’ai voulu installer un autre squelette. Ca devient de plus en plus facile quand on en a fait plusieurs, différents.

Pour ne pas perdre le squelette @Brest, qui me plaît bien, j’ai installé EPONA dans un autre SPIP. C’est-à-dire que :
– sur le site distant, j’ai renommé SPIP en SPIP1
– sur le site distant, j’ai installé un nouveau SPIP que j’ai appelé SPIP2. Il reste à appeler :
http://s14183945.onlinehome.fr/SPIP2/ecrire
et à configurer ce nouveau SPIP. Comme ci-dessus. Facile.

Je suis allée chercher le squelette EPONA, toujours en php, je l’ai trouvé ici

J’ai téléchargé, dézippé et cela m’a donné un dossier intitulé : epona-sq30-php . J’ai ouvert ce fichier et j’ai trouvé deux dossiers :
– 1) ecrire (avec dedans : epona_conf.php et mes_options.php)
– 2) squelettes (avec dedans un dossier « epona »)

Alors j’ai expédié :
– 1) les deux fichiers epona_conf.php et mes_options.php dans « ecrire » du site SPIP2
– 2) le dossier squelettes à la racine du site SPIP2.

on trouve alors, à la racine de SPIP2 :

CACHE
dist
ecrire
formulaires
IMG
oo
squelettes
agenda.php
article.php .... etc

On appelle alors :
http://s14183945.onlinehome.fr/SPIP2/ecrire/epona_conf.php

et il est proposé « configurateur Epona v3 ». J’ai choisi : aller à la page d’accueil. Je ferai le reste une autre fois.

A gauche je vois un logo « Epona » et une adresse.

Sur mon ordinateur, je reviens dans le squelette d’Epona, je l’ouvre, je trouve encore Epona, j’ouvre à nouveau et je trouve « logo.jpg ». Je supprime ce fichier et je mets mon logo à moi, (sour le noom logo.jpg) en ne dépassant pas les dimensions initiales c’est-à-dire 165 pixels sur 151 pixels.

Puis je vais chercher le fichier inc-logo.html.
je le renomme #inc-logo.html pour me le conserver (au cas où)
je l’ouvre
j’affiche le code source
J’y vois ceci :

<!-- Logo et infos Centre -->
<a href="sommaire.php"><img src="#DOSSIER_SQUELETTE/logo.jpg" title="<:accueil_site:>" alt="logo" border=0></a>

<div class="info"> Mon titre<br>Mon nom<br>Adresse<br> Telephone 01 32 50 12 97 <br> <br> </div>

Il n’y a plus qu’à changer : titre, nom, adresse, téléphone

puis : enregistrer sous .... inc-logo.txt
et renommer : inc-logo.html

Il n’y a plus qu’à expédier le nouveau logo.jpg, et le nouveau inc-logo.html, sur le site distant SPIP2, dans squelettes/epona.

Et voilà ! A suivre.

On trouve des indications intéressantes ici :
– http://www.spip-contrib.net/Squelette-Epona-version-3
– [http://spip-epona.org/spip.php?article5]


 C’est quoi les CHMOD (droits d’accès)

chmod .... c’est l’abréviation de « change mode » C’est ce qui autorise la lecture, l’écriture et l’exécution des dossiers et fichiers, c’est ce qui les sécurise aussi ;

Voir d’excellentes explications ici :

Pour changer les chmod d’un fichier il faut faire un clic   droit, et cliquer sur « attributs du fichier » ou « permissions du fichier ». Il est alors facile de changer les chmod en tapant le nombre désiré dans le petit cadre blanc qui se trouve au milieu, en bas.

  • le répertoire racine « public_html » ou « www » doit avoir un chmod 750.
  • les répertoires dans le répertoire-ravine doivent avoir au maximum le chmod 755.
  • les fichiers dans le répertoire-racine doivent avoir au maximum le chmod 644.
JPEG - 56.6 ko

Quand un script indique « mettez tel répertoire en chmod 777 », ne le faites pas, plusieurs personnes se sont fait avoir.

  • 777 = tout le monde peut y accéder,
  • 755 : vous mais pas les autres.

Lire une documentation chez l’hébergeur Archive-host


  Modifier les squelettes

D’après les conseils qui m’ont été donnés, il vaut mieux conserver les fichiers .html à la racine (quitte à les renommer articleORI.html, rechercheORI.html, etc, ORI comme original) et mettre les fichiers transformés dans le dossier squelettes.

Il faut renommer celui qui est dans /squelettes et ne faudra pas oublier de l’appeler dans les squelettes.. Mais comment faire ? D’après les explications de jean-Christophe V. il faut faire comme ça :

Par exemple, pour un fichier style_spip modifié :

  1. le style_spip.css qui est dans le dossier squelettes, le renommer : style_spip_BP.css (ou autre chose !)
  2. Ecrire ensuite la phrase :
    <link rel="stylesheet" href="#DOSSIER_SQUELETTE/style_spip_BP.css" rel="stylesheet"
    type="text/css">
  3. mettre cette phrase entre et

    dans tous les squelettes où l’on veut utiliser cette feuille de style. Par exemple dans les fichiers article.html, auteur.html, breve.html, forum.html, login.html, mot.html, plan.html, recherche.html, resume.html, rubrique.html, site.html, sommaire.html.

  1. quand ces fichiers sont modifiés, les renvoyer dans le site distant, dans la partie squelettes

(ne pas oublier de neutraliser la ligne existante qui est :

<!-- Ceci est la feuille de style par defaut pour les types internes a SPIP -->
<link rel="stylesheet" href="spip_style.css" type="text/css" />

Pour la neutraliser, il suffit de la « commenter » c’est à dire d’écrire <!-- avant la phrase et --> après la phrase.

Autre avantage du système : on peut envisager des squelettes avec certains styles pour les liens, les cadres ... et d’autres squelettes avec d’autres styles pour les liens , les cadres ... il suffit d’avoir deux ou plus feuilles de style.


 Des squelettes spéciaux

On peut faire un squelette spécial pour la rubrique 1, il suffit pour cela de modifier article.html et d’appeler article-1.html le fichier transformé. Envoyer alors article1.html dans « squelettes » (sans effacer article.html) et alors, tous les articles de la rubrique 1 auront la même présentation.

On peut faire un autre squelette spécial pour la rubrique 2, il suffit pour cela de modifier article.html et d’appeler article-2.html le fichier transformé (et faire comme ci-dessus).

Et comme ça pour les rubriques qu’on veut.


Le squelette a fait des petits en couleur

Si cette page vous a aidé : écrivez-moi


 Sarka spip

Très bien ce squelette
car très logique. Voir explications pages suivantes


NOTES:

(1) Un très bon bloc-notes gratuit : PSPad