Squelette IENSP v2

Version 2.2 du 05/11/2007

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Squelettes avec une barre de navigation et un menu déroulant ainsi qu’un portfolio.

Présentation

-  Nom du Squelette : « IENSP »
-  Version du squelette : 2.2
-  Auteur : Stéphane Kus
-  Licence : GPL
-  Compatibilite SPIP : compatible SPIP > 1.9.2
-  Sites exemples : site du collège Colette de Saint-Priest, le site REP Saint-Priest Bel-Air
-  Principales fonctionalités et spécificités :

Un squelette simple qui rajoute au squelette par défaut une barre de navigation et un menu déroulant tout en CSS, ainsi qu’un portfolio qui ouvre les images dans une fenêtre pop-up avec des boutons de navigation d’une photo à l’autre. A part quelque déplacement de <div> et le rajout de l’album, seuls les fichiers habillage.css et spip_style.css ont été modifiés.

Le but pour moi a été de mettre en pratique mon travail sur les CSS, et donc de faire une mise en page qui ne modifie quasiment pas les squelettes par défaut de SPIP à part le fichier habillage.css. J’espère que ces squelettes vous donnerons envie de plonger dans le CSS afin de créer un style propre à vos sites.

-  La version 2.0 améliore le rendu avec Firefox (utilisation de la propriété CSS3 border-radius pour arrondir les angles des blocs), amélioration de l’esthétique du portfolio, ajout d’un bloc « derniers sites référencés » en page d’accueil, ajout d’un fichier annuaire.html qui donne la liste de tous les sites référencés, ajout d’un dégradé autour de la page.

-  La version 2.1 rajoute un 3e niveau au menu déroulant

-  La version 2.2 corrige un bug du menu déroulant avec des titres qui débordaient parfois du cadre et intègre un calendrier dans la page d’accueil (nécessite l’installation des plugins Widget calendar et Agenda dans le répertoire « plugins » à la racine de votre site et leur activation dans l’espace privé).

Il est à noter que IENSP utilise maintenant le filtre « supprimer_numero » qui vous permet d’ordonner vos rubriques en leur ajoutant un numéro qui sera invisible dans l’espace public. Pour faire apparaître les rubrique dans l’ordre que vous souhaitez il suffit de les nommer de la manière suivante :

  • 01. marubrique
  • 02. marubrique

Attention : vous devez obligatoire mettre un espace après le point pour que ça fonctionne.

Testé sur ces navigateurs

Testé ?PlateformeNavigateurVersion
oui windows Internet explorer 6 et 7 (le menu déroulant ne marche pas avec IE6
oui windows Firefox .
oui Mac Safari .
oui Mac Firefox .
oui Mac Opera .
oui Unix/Linux Firefox .

Un petit aperçu :

Personnaliser le squelette

Vous pouvez aisèment personnaliser ces squelettes en changeant les couleurs dans le fichier habillage.css, il suffit de faire un rechercher/remplacer sur ces couleurs :
-  #FFFFFF : couleur de fond de la page
-  #0031dc : couleur des bordures, des liens, du fond de l’entête du menu et du pied de page
-  #99bcf5 : couleur des liens du menu et des barres, du titre du site et de fond des blocs

images à modifier :
-  coinrond.gif et coin.gif (arrondis du menu)
-  degrade.gif (fond)
-  fondbarre.png (fond des barres de navigation et du pied de page)

Téléchargement

Télécharger IENSP v2.2

Discussion

33 discussions

  • 2

    Bonjour,
    avec Spip 1.9.2b, j’utilise le squelette IENSP (modifié un peu à contre-coeur à la demande de la personne pour qui je refais le site de sa galerie ; j’aime bien le décrochage du menu ... mais bon, ce n’était pas partagé, désolée) ; j’ai rajouté aussi une brève défilante sur la page d’accueil. Après les tests en local et sur un site test hébergé sur OVH , tout était OK. J’ai installé hier le site chez son hébergeur (hosteur.com) : l’installation de spip v. 1.9.2b n’a pas posé de problèmes, le déménagement de la base OVH sur hosteur non plus ...mais :
    1) la brève ne défile plus
    2) dans la page photoalbum le bouton « index » n’est plus actif
    3) je me suis aussi aperçue, que dans le code source, les balises meta qui reprennent les descriptifs « article » et « site », ne récupèrent plus ces informations.
    Visiblement un paramètre n’est pas passé ou Hosteur n’a pas activé une fonctionnalité (puisque ça marche sur OVH) ; j’ai bien sûr téléphoné à hosteur ...qui n’a pas su me répondre ni m’aider . Merci pour votre aide si vous pouvez.
    le site chez OVH où ça fonctionne : www.ticefle.net
    le site chez Hosteur qui pose problème : www.galeriesaint-roch.fr, dans l’immédiat pour 1) et 2) j’ai mis le code concerné en commentaire, et pour 3) j’ai écrit en dur dans inc-entete.

    • Doc Mac

      Bonjour, j’ai déjà eu un problème similaire que j’ai résolu de la manière suivante :

      Effacement de la base et re création de A à Z, ce qui n’est pas très compliqué pour un petit site du moment que l’on a en réserve, les textes et photos du site et une copie propre du squelette.

      En fait, un certain nombre de taggs sont interprété de diverses manières suivant les servers.

      Lorsque l’on transporte une base d’un hébergeur à un autre, deux solutions s’offrent à vous si ça ne marche pas.

      Soit vous remettez les mains dans l’ensemble des fichiers Spip pour trouver le coupable, soit vous repartez à zero, ce qui de loin est la solution la plus sûre.

    • Merci de votre réponse ; je vais réfléchir à la solution : reprendre tout à zéro n’est pas trop compliqué et effectivement pas forcément le plus long.

    Répondre à ce message

  • 4
    Rolgliss

    Bonjour

    j’ai installé votre squelette que je trouve excellent et qui répond à mes attentes

    Mon site

    Cependant, serait il possible de faire en sorte d’avoir le chapeau visible sur les pages ??
    Auriez vous la possibilité de mettre en place un plugin pour des partenaires éventuel ??

    aussi, le plugin calendrier ne fonctionne pas ??

    Je vous remercie pour tout ce que vous faite.

    a très bientôt

    Rolgliss

    • Rolgliss

      aussi je profite pour vous demander s’il est possible de metrte en place des liens qui s’ouvre dans un autre fenetre

      sous html il est possible de mettre « target=new » hors sous spip cela ne semble pas prévu !!

    • Rolgliss

      Merci pour ta réponse

      mais cela ne fonctionne pas lorsqu’il y a un redirection.

      Aussi, pourrais tu répondre a mes premières questions ?? STP

      Merci encore pour tes réponses

    • Pour la première question posée je laisserai Stéphane répondre.

      Pour ce qui est de ton problème de redirection peux tu être plus précis s’il te plaît ?

      S’agit’il d’une redirection d’un article vers un autre ?

      Merci

    Répondre à ce message

  • Doc Mac

    A force de faire des sites pour artistes, ceux d’entre vous qui suivent ce qui ce passe dans cette rubrique ne seront pas surpris de constater ce lancement de site.

    En effet une de mes activités étant la photographie spécialisé dans le portrait d’artistes, il était naturel que tôt ou tard ce site soit en ligne.

    Pour visiter mon site, cliquez sur ce lien

    Répondre à ce message

  • 3

    Bonjour,

    j’ai suivi tes conseils pour mettre les rubriques dans l’ordre souhaité mais il y a un souci. En effet les chiffres apparaissent dans le fil d’Ariane et dans les titre.
    J’ai bien essayé d’inclure une balise |supprimer num| mais rien n’y fait.
    Pourrais-tu me venir en aide...

    Merci, Mel

    • Stéphane

      apparemment tu as bien fait la manip pour les fichiers inc-rubrique.html et article.html mais tu as oublié le fichier rubrique.html

      @+

    • Stéphane

      Pour ordonner des rubriques, il faut rajouter un filtre dans le fichier squelettes/inc-rubriques.html. Il faut remplacer [(#TITRE|couper{80})] par [(#TITRE|supprimer_numero|couper{80})] dans la boucle rubriques.

      Ensuite il faut rajouter des numéros dans l’espace privé dans le nom de chaque rubrique avec cette forme :

      01. rubrique

      02. autre rubrique

      03. autre autre rubrique

      attention ne pas oublier l’espace entre le point et le vrai nom de la rubrique !

      @+ Stephane

    • merci beaucoup !

    Répondre à ce message

  • 6

    bonjour

    je souhaite remplacer mon bandeau classique par un bandeau flash

    est ce possible et si oui quelle est la procédure

    merci d’avance

    • J’ai exactement le même problème, moi aussi j’aimerais remplacer mon bandeau classique par un flash.
      Si vous avez une solution, ce serait super...
      Merci d’avance.

    • Doc Mac

      Un peu de patience :) c’est actuellement les vacances, je pense que Stéphane donnera son point de vue sur le sujet à son retour.

    • Stéphane

      Salut
      Pour remplacer le bandeau par une animation flash, il faut modifier le fichier inc-entete.html :
      Il faut remplacer :

      <a rel="start" href="#URL_SITE_SPIP/">
      [(#LOGO_SITE_SPIP||?{
      
      	[(#LOGO_SITE_SPIP
      		||image_reduire{770,200}
      		|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)]}
      		|inserer_attribut{title,[(#NOM_SITE_SPIP|textebrut)]}
      		)]
      
      	,
      
      	<span id="nom_site_spip">#NOM_SITE_SPIP</span>
      })]</a>

      par

      <object type="application/x-shockwave-flash" data="chemin-de l'animation flash.swf" width="500" height="400">
        <param name="movie" value="chemin-de l'animation flash.swff" />
        <!-- Notre image -->
        <img src="image de remplacement" alt="image de remplacement" width="500" height="400" alt="" />
      </object>

      @+

    • Merci pour la rapidité de la réponse Stephane.

      Je suis vraiment novice donc je m’excuse par avance si mes questions peuvent paraître ridicules... Mais je suis bien motivé pour progresser !!!
      J’utilise le module sarka spip 2.0, le fihier inc-entete.html à modifier est bien celui qui se trouve ds le fichier dist à la racine du site ? (il n’y en a pas dans le dossier \plugins\sarkaspip_2...)

      Je ne sais pas si ça peut avoir une importance, mais j’utilise un serveur local avec easyphp.

      J’ai essayé en remplaçant les deux zones « chemin-de l’animation flash.swf » dans le code que tu nous as donné, mais ça ne fonctionne pas.
      J’ai laissé tel quel les deux zones « image de remplacement » (à quoi correspondent-elles : l’image génrée en cas de « survol » de la première image ?).

      Merci d’avance.

      Yann

    • Stéphane

      Attention, le dossier dist/ est le dossier des squelettes par défaut de SPIP. Pour Sarkaspip, je ne le connais pas suffisamment pour te dire quel est le fichier à modifier.

      En ce qui concerne l’image de remplacement, c’est facultatif, elle s’affiche pour les internautes qui n’ont pas le plugin flash.
      @+

    • Bonsoir,

      Merci pour la rapidité de la réponse, je vais plancher un peu sur le problème et si je trouve une solution je vous tiens au courant.

      Bonne soirée.

    Répondre à ce message

  • 2

    Je voudrais installer un calendrier dans le quelette modifié de iensp2.
    site cahier de texte : voir monsite ici
    Pourrez-tu m’indiquer la marche à suivre. J’ai intallé le plugin « mini calendrier » recupéré sur spip contrib, mais il ne s’affiche pas. Je ne sais pas quoi faire.
    Merci pour ton aide.

    Jacques.

    • Bonjour, j’ai fait quelques essais pour tenter de trouver une solution à te proposer, mais sans succès.

      Je pense qu’il va falloir attendre que Stéphane passe par là pour tenter d’avoir une solution :)

    • Stéphane

      Je pense intégrer le calendrier dans la version 3 qui est encore dans les cartons... A suivre

      @+

    Répondre à ce message

  • Doc Mac

    Bonjour à tous, voici un nouveau site que j’ai lancé à l’instant sous IENSP news V2.

    Si vous aimez la guitare, allez y faire un tour :)

    adresse du site :

    http://www.sebastienvachez.com

    bonne visite à tous.

    D.M

    Répondre à ce message

  • 1

    Bonjour,

    j’aimerais savoir comment choisir l’ordre des rubriques dans mon menu, pour qu’elles ne soient plus en ordre alphabétique...
    merci d’avance pour votre aide

    Répondre à ce message

  • Nous avons mis en ligne (bien que non finalisé pour le moment) le site de Stéphane Arrondeau.

    Ce site tourne sous IENSP news et est compatible iPhone.

    Vous y trouverez très bientôt des tas de références concernant le vitrail contemporain.

    Répondre à ce message

  • 2

    bonjour je débute sur spip et essaie de développer mon site

    j’arrive à charger le squelettes
    mais comment faire pour qu’il fonctionne de la même manière avec internet explorer et mozilla ?
    avec mozilla il prend en compte les arrondi et la largeur du cadre, mais pas avec IE ?

    merci de votre aide

    • Stéphane

      Les squelettes fonctionnent parfaitement avec mozilla qui respecte les normes CSS. IE 7 a amélioré les choses, mais avec IE 6 c’est pas génial ! Les coins arrondis sont faits avec la propriété CSS border-radius qui appartient à la future norme CSS 3 et n’est pour l’instant implémentée que dans mozilla.

      Le but ayant été pour moi de créer une mise en page qui utilise uniquement les feuilles de style CSS, le résultat dépend donc de la prise en charge du CSS par le navigateur : Firefox ou IE 7 recommandé donc, même si le site reste lisible avec IE 6.

      @+

    • bjr
      merci pour ces précisions claire
      a+

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom