Squelette IENSP v2

Version 2.2 du 05/11/2007

Publié le : 15 mai 2007 – Dernière modification le 21 décembre 2021 – par StephK – 94 commentaires

1
2
3
4
5
1 vote

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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

33 discussions

  • Doc Mac

    J’ai lancé un test grandeur nature avec des collaborateurs aux USA, il ne m’aura fallu que rectifier mon fond de site pour le rendre totalement compatible avec l’iPhone.

    J’en est profité pour faire tester plusieurs de mes sites, taux de réussite 100%

    Répondre à ce message

  • Doc Mac

    Depuis hier, j’ai lancé sur le Web le site de la photographe Marie VDB.

    Vous pouvez aller y faire un tour, et voir que ce squelette se prête également à un site pour photographe.

    Une petite aide pour ce qui se posent la question du « look » à adopter en vue de créer un site...

    Pensez toujours à l’harmonie des couleurs ; de grands effets ne servent à rien, faites vous simplement plaisir en choisissant les principale couleurs qui équiperont votre futur site

    Répondre à ce message

  • 4
    stef

    bonjour à tous

    je suis le super débutant spip
    voila mon soucis
    j’ai mis mon dossier squelettes à la racine de mon site, mais il ne le prend pas en compte
    j’ai certainement fait une erreur mais laquelle ??

    merci pour votre aide

    • Doc Mac

      Bonjour, si SPIP est correctement installé, il suffit en effet de placer le dossier « squelettes » à la racine.

      Il arrive souvent que le navigateur utilisé ne vide pas le cache correctement, ce qui fait qu’on a l’impression que le squelette n’est pas actif.

      Le mieux pour s’en assurer est de quitter (menu fichier du navigateur + quitter) et de relancer le navigateur.

      En principe, à ce moment le squelette devrait être visible.

    • rien a faire
      j’ai bien mis le squelettes a la racine et vidé les caches
      j’ai également relancé le navigateur mais tjr rien
      il y juste squelette qui apparait dans le bas de page..

    • Stéphane

      il faudrait que tu donnes l’adresse de ton site, pour qu’on y voit plus clair ;-)

    • stef

      merci j’ai résolu mon pb
      a+ certainement lol

    Répondre à ce message

  • 3

    J’ai installé le squelette dans un site qui tourne avec un squelette Minigris. Aprtès avoir vidé le cache et relancé le site ma page d’accueil est apparue avec le nouvel habillage. Mais lorsque j’ai commencé à naviguer je n’ai pu retrouver les articles. Un message d’erreur 404 est apparu avec le commentaire suivant : « erreur de compilation ». Comment restaurer correctement la base sans perdre les données.

    • Stéphane Kus

      Normalement, il ne devrait y avoir aucun problème avec la BDD en changeant de squelettes, mais attention, IENSP nécessite spip 1.9.2. Si tu as une version précédente, il faudrait faire une mise à jour...

      Stéphane

    • J’ai fait la mise à jour vers 1.9.2 et tout fonctionne. Une question : y a-t-il un moyen d’afficher les sous rubriques en fonction d’un ordre chronologique (l’ordre des mois ) et non en fonction de l’ordre alphabétique ?
      Pour voir le site :

    • Stéphane Kus

      tu trouveras toutes les infos pour ordonner les rubriques dans le forum de la version 1.1 .

      @+ Steph

    Répondre à ce message

  • Vous trouverez à cette adresse une galerie de sites sous IENSP qui vous donneront une idée de l’utilisation finale de ce squelette.

    Répondre à ce message

  • Lancement la nuit dernière du site de l’épicerie Fine Buissonnière qui tourne sous IENSP NEWS.

    Ce site devrait grossir peu à peu. Pour le moment il permet de communiquer sur cette épicerie située au Mans et offre une page contact permettant de trouver facilement le lieu.

    Répondre à ce message

  • 3
    Margotte

    Oups, j’ai oublié de demander quelque chose !!

    Je n’arrive pas à modifier la couleur du bas de mon site ( là où c’est marqué RSS...) dans l’habillage du site !!!
    Où faut t’il aller ??
    Merci encore
    Cordialement

    • doc Mac

      Hello, dans le css voir à pied de page comme sur cet exemple :

      /* Pied de page */
      #pied small font-size : 0.77em ;
      #pied img vertical-align : middle ;
      #pied
      width : 100% ;
      clear : both ;
      background-color : #000000 ;
      height : 1.3em ;
      text-align : center ;
      margin-top : 4em ;
      border : none ;

      Doc Mac

    • Margotte

      Ca marche !! Merci beaucoup pour votre aide

    • Pas de quoi, je suis allé sur votre site, vous pouvez également modifier dans le dossier image (coin.gif et coinrond.gif) pour les avoir dans la même couleur verte que le menu de gauche.

      Doc Mac

    Répondre à ce message

  • 1
    Margotte

    Bonjour,
    Une petite question, comment je dois faire pour intégrer une animation flash sur la page d’accueil ( à la place des derniers articles publiè) ???
    Merci

    • Stéphane

      Pour insérer une animation flash à la place des derniers articles, il te faut remplacer le contenu du <div class="contre-encart"> par le code suivant (sans oublier de changer la largeur et la hauteur et le chemin de ton anim flash) :

      <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ID="bandeau" WIDTH="747" HEIGHT="115" ALIGN="">
<PARAM NAME=movie VALUE="bandeau.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=salign VALUE=LT>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="chemin-de-ton-fichier.swf" quality=high salign=LT bgcolor=#FF0000 swLiveConnect=FALSE WIDTH="largeur-de-ton-fichier-en-pixels" HEIGHT="hauteur-de-ton-fichier-en-pixels" NAME="bandeau" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

      @+ Steph

    Répondre à ce message

  • docmac

    les fichiers modifiés sont :

    -  Article.html
    -  inc-entete.html
    -  inc-pied.html
    -  sommaire.html

    Pour fabriquer un fond comme sur les sites d’exemple :

    Il faut remplacer la ligne « Background » dans habillage.css par :

    background : url("http://www.monsite.com/fond.gif") repeat-x fixed top left ;

    Puis créer une image en Gif de taille 15X1500 pixels et la mettre à la racine du site.

    IENSP-NEWS sera mis à jour au fur et à mesure des évolutions de IENSP.

    Cette variante est destinée aux sites de news en ligne et offre une grande souplesse d’utilisation.

    Doc Mac

    PS : un grand merci à Stéphane :)

    Répondre à ce message

  • 2
    jjal

    Bonjour,
    Je découvre Spip et teste en local pour remplacer à terme un site d’école afin d’ouvrir la publication à plusieurs rédacteurs et me suis arrêté à ce squellette.
    Deux questions de débutant :
    Je vois dans le squelette une page photoalbum mais ne sais pas l’utiliser. Faut-il paramétrer des mots clés et comment ?
    Peut on avoir un affichage de l’agenda sur le site public ou est il réservé aux rédacteurs pour la partie privée ?
    Merci d’avance pour l’aide qui pourrait m’être apportée et bravo pour votre travail.
    Jacques

    • Stéphane

      Bonjour, merci pour les remarques.

      En ce qui concerne l’album photo, rien à paramétrer : quand on joint des images (en tant que document joint) à un article, des vignettes s’affichent en bas de l’article et quand on les clique, ça ouvrre une fenêtre Pop-Up avec le diaporama de toutes les images.

      En ce qui concerne l’agenda, il n’est pas encore intégré dans l’espace public, mais tu peux utiliser celui de l’espace privé pour les rédacteurs.

      Tu peux aller voir le site de l’école signoret pour voir toutes les fonctionnalités.

      Stéphane

    • ok, merci bien.
      Jacques

    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