squelettes IENSP standard pour SPIP 2.1

samedi 19 février 2011, par Stéphane Kus

Enregistrer au format PDF article en PDF  


Présentation

- Nom du Squelette : "IENSP"
- Version du squelette : 4.3
- Auteur : Stéphane Kus
- Licence : GPL
- Compatibilite SPIP : compatible SPIP > 2.0
- Visualiser
- Développement sur SPIP-Zone depuis la version 4.3

Principales fonctionalités et spécificités

Un squelette simple avec une barre de navigation et un menu déroulant tout en CSS, un annuaire des sites web référencés, un agenda (plugin Agenda 2) ainsi qu’un portfolio qui utilise le plugin Thickbox. Nécessite également les plugins article PDF et Version Imprimable. Tous les plugins ci-dessus sont à installer via l’interface privé-> Configuration -> Gestion des plugins.

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 donneront envie de plonger dans le CSS afin de créer un style propre à vos sites.

- La version 4.0 a adapté les squelettes à SPIP 2.0
- La version 4.1 corrige un bug avec le plugin Thickbox et intègre le plugin Accès Restreint 3
- La version 4.2 corrige un bug d’affichage de l’agenda avec IE, intègre les plugins Article PDF et Imprimer Article, élargi l’affichage de la page.
- La version 4.3 adapte les squelettes pour SPIP 2.1

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 .

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
- black : couleur des bordures, du fond de l’entête du menu
- #cfcfcf : couleur de fond des blocs
- #f26522 : couleurs du titre du site, des liens et des textes de formulaires

images à modifier :
- coinrond.gif et coin.gif (arrondis du menu)
- degrade.gif (fond)
- pixtrans.png (fond transparent du menu déroulant)
- fondbarrehaut.png (fond de la barre de navigation)
- fondbarrehautsurvol.png (fond des liens survolés de la barre de navigation)
- fondbarre.png (fond du pied de page)

Téléchargement

Zip - 174.1 ko
A télécharger sur Spip-zone : IENSP standard v4.3
Zip - 307.7 ko
A télécharger sur Spip-zone : IENSP standard v4.3 avec ImageFlow+Highslide

Répondre à cet article

24 Messages

  • squelettes IENSP standard pour SPIP 2.0

    12 décembre 2008 08:02, par Danièle LV

    Bonjour,

    J’utilise votre squelette standard depuis quelques temps avec les plugins Agenda, Thickbox et Accès Restreint pour la version de SPIP 1.9.2.

    Je viens de mettre à jour la version SPIP 2.0 et votre squelette standard v 4.00 pour SPIP 2.0. (Tout cela en local pour vérifier si cela fonctionne bien avant de faire la mise à jour en réel)

    Mais je vois qu’il n’y a pas le plugin Accès restreint comme vous l’indiquez ci-dessus.

    Avez vous l’intention d’inclure Accès restreint ?

    DLV

    repondre message

    • squelettes IENSP standard pour SPIP 2.0 29 décembre 2008 12:21, par Stéphane Kus

      Je viens de publier la version 4.1 qui intègre le plugin accès restreint 3 pour SPIP 2

      repondre message

      • squelettes IENSP standard pour SPIP 2.0 29 décembre 2008 13:28, par Danièle LV

        Merci pour cette réponse je vais le télécharger.

        Danièle LV

        repondre message

        • squelettes IENSP standard pour SPIP 2.0 29 décembre 2008 20:06, par Danièle LV

          Bonjour,

          Tout va très bien quant au squelette IENSP pour la version de SPIP2 et les plugins insérés, mais le plugin accès restreint ne fonctionne pas.

          Je suis allée sur le site SPIP Contrib pour poser un message sur le plugin, mais il parait qu’il marche sans problème (moi j’arrive à créer une zone acces restreint, mais je ne peux pas ajouter des visiteurs) . C’est dommage car je pouvais le faire fonctionner sans problème avec la version 1.9.2.

          Est ce que vous utilisez ce plugin ? est ce qu’il marche chez vous ?

          Autre question : Comment utiliser le squelette albumphoto ?

          Merci de votre réponse

          Danièle

          repondre message

  • IENSP standard pour SPIP 2.0 : modif page d’acceuil

    30 décembre 2008 15:52, par amande

    bonjour tout le monde,

    j aurais besoin d’un petit coup de pouce pour insérer une photo dans ma page d’acceuil,
    quelqu’un aurait il une idée ?

    repondre message

  • squelettes IENSP standard pour SPIP 2.0

    2 janvier 2009 19:17, par amande

    hello, bonne année Stephane !

    j aime beaucoup ton squelette pour sa simplicité et ses couleurs ;

    tu peux juste regarder mon site asiaisa.fr pour convenir du caractere adaptable de ton travail

    seulement g un pti soucis avec habillage.css
    car je ne parvient pas a changer la typo en italic ...

    as tu deja constaté ca ?

    repondre message

    • squelettes IENSP standard pour SPIP 2.0 2 janvier 2009 21:10, par Stéphane Kus

      Salut,
      meilleurs voeux également !

      Pour ton pb d’italique, peux-tu préciser ? Est-ce que tu veux un de l’italique sur un élément générique de SPIP (intro de tous les articles ou sous_titres) ou est-ce que tu n’arrives pas à mettre en italique un mot ou une phrase d’un article ?

      @ + Stéphane

      repondre message

      • mettre nenu navigation en italic 20 janvier 2009 17:08, par amande

        bonjour stéphane,

        plus précisément, je cherche à mettre en italic le menu de navigation de la page d’acceuil

        dans habillage des menus de navigation, dans font-weight, g mis italic et ca ne produit aucun effet,

        sais tu pourquoi ?

        amande.

        repondre message

        • mettre nenu navigation en italic 20 janvier 2009 18:24, par Stéphane Kus

          Bonjour,

          la propriété CSS pour l’italique n’est pas font-weight mais font-style.

          Il faut donc que tu rajoutes dans la feuille de style habillage.css la ligne :

          div#menu {--font-style: italic;}

          @+

          repondre message

          • mettre nenu navigation en italic 20 janvier 2009 18:27, par Stéphane Kus

            il ne faut pas de tiret avant font-style. C’est une erreur de frappe. Voici le bon code :

            div#menu {font-style: italic;}

            Stéphane

            repondre message

            • mettre nenu navigation en italic 26 janvier 2009 16:21, par amande

              merci bcp stephane,

              g enfin mon menu en italic !

              le css est long je trouve a maitriser,

              je cherche egalement a mettre un photo en fond d ecran,

              voici ma tentative :

              body

              behavior : url("csshover.htc") ; /* WinIE behavior call */

              background-image : url (asiaisa.fr/spip2/spip.php ?article12) ;

              background repeat : no repeat ;

              margin : 1.5em ;

              text-align : center ;

              font-size : 1em ;

              color : #333 ;

              cette photo se trouve donc sur mon site meme (asiaisa.fr),

              mais pour l instant le fond reste blanc...

              saurais tu pourquoi ?

              amande.

              repondre message

              • mettre nenu navigation en italic 26 janvier 2009 19:11, par Stéphane Kus

                Bonsoir,
                Voici le code qu’il faut que tu mettes pour la balise body dans habillage.css

                body {
                        behavior: url("csshover.htc"); /* WinIE behavior call */
                        background: url(http://asiaisa.fr/spip2/IMG/jpg/Inde.jpg) no-repeat;
                        margin: 1.5em;
                        text-align: center;
                        font-size: 1em;
                        color: #333;
                }

                attention à ne pas oublier les accolades, les tirets et les points virgules ! Pour ce qui est du CSS, je te conseille un petit bouquin qui s’appelle "Aide-mémoire CSS2" de patrick Beuzit au éditions OEM/Eyrolles (10 euros). C’est un dictionnaire de toutes les propriétés CSS avec leur syntaxe à avoir toujours sous la main.

                @ bientôt
                Stéphane

                repondre message

                • fond d ecran chelou ... 27 janvier 2009 07:54, par amande

                  merci pour la doc, c exactement ce qu il me faut !

                  pour ce qui est du fond d ecran, g copie/collé ton code et il est toujours blanc... avec un tout petit carré en haut de page... c normal ?

                  tu pourrais jeter un petit coup d oeil s il te plait a cette adresse : asiaisa.fr,

                  je te remercie, amande.

                  repondre message

                  • pb résolu merci stephane 27 janvier 2009 12:03, par amande

                    en fait la photo a mis du tps pour s installer, merci encore,

                    par contre g changé la couleur de fond de page mais elle ne prend pas l arrondie de ton menu de navigation, sais tu pourquoi ?

                    repondre message

  • comment agrandir le contre encart please ?

    10 février 2009 19:00, par amande

    bonjour stephane,
    je souhaite modifier ton squellette pour ma page d’acceuil,

    c’est à dire que j’essais de faire entrer son contenu dans la hauteur de l’écran
    et donc j’ai enlever les articles récents et le pied de page,

    par contre je n’arrive pas a alonger le contre encart jusqu’à sous le diaporama photo,

    peut tu m’aiguiser pour remodifier correctement ton code ?

    merci d’avance, amand.

    repondre message

  • squelettes IENSP standard pour SPIP 2.0

    5 janvier 2010 18:57, par claude legrand

    Bonjour, et meilleurs voeux !

    J’ai déjà posé la question il y a un an, mais j’ai hélas oublié, et oublié de prendre en note... Et comme je viens de mettre en place la version 4.2, j’ai perdu les modifs faites alors...

    Où et comment faire (IENSP standard, v4.2) pour passer de 10 à xx articles récents en page d’accueil ? De même pour augmenter le nombre d’articles présentés en bas de page dans la zone "Dans la même rubrique".

    Merci beaucoup d’être aussi disponible pour les béotiens du Spip !

    Cordialement

    Claude

    repondre message

    • squelettes IENSP standard pour SPIP 2.0 6 janvier 2010 16:30, par Stéphane Kus

      Salut,

      il faut ouvrir le fichier squelettes/sommaire.html et changer à la ligne 46 {pagination} par {pagination XX} où XX est le nb d’éléments à afficher.

      Pour la page article, il faut ouvrir squelettes/article.html et remplacer à la ligne 92 <BOUCLE_articles_rubrique(ARTICLES) {id_rubrique} {par date}{inverse} {0,10}> par <BOUCLE_articles_rubrique(ARTICLES) {id_rubrique} {par date}{inverse} {0,XX}> où XX est le nb d’articles que tu souhaites voir s’afficher.

      cordialement,
      Stéphane

      repondre message

  • squelettes IENSP standard pour SPIP 2.1

    1er mars 2011 16:49, par rachid72

    Bonjour,

    J’utilise votre squelette standard pour la version de SPIP 2.

    J’ai une question : j’arrive pas avoir la partie "Nouveautés sur le Web" sue ma page de démarrage. (je suis nouveau sur spip).
    voila le site : http://clg-marcel-pagnol-vernouillet.tice.ac-orleans-tours.fr/php5/spip/
    es que je peut avoir les Nouveautés sur le Web sur la droite de ma page.
    merci de votre aide.

    repondre message

  • squelettes IENSP standard pour SPIP 2.1

    3 mars 2011 08:31, par rachid72

    bonjour ;

    pour les "Nouveautés sur le Web" c’est bon .
    j’ai une autre question je veut mettre "Derniers articles" sur la droite de ma page comme les breves.
    voila le site : http://clg-marcel-pagnol-vernouillet.tice.ac-orleans-tours.fr/php5/spip/
    merci pour votre aide c’est un bon travail.

    repondre message

    • squelettes IENSP standard pour SPIP 2.1 3 mars 2011 13:24, par Stéphane Kus

      Pour déplacer les derniers articles, il faut prendre tout le bloc

      dans le fichier sommaire.html situé dans le contre-encart :
      <B_articles>

              <div class="breves">

              #ANCRE_PAGINATION

              <h2 class="menu-titre"><:derniers_articles:></h2>

              <ul>

              <BOUCLE_articles(ARTICLES) {par date} {inverse} {doublons} {pagination 5 #GET{nbre_art_somm}} {lang}>

                      <li[ class="(#COMPTEUR_BOUCLE|alterner{'un','deux'})"]>

                      </h2>[<em> - (#DATE|affdate_jourcourt)</em>]

                      [<a href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE||image_reduire{#GET{largeurlogo},#GET{hauteurlogo}})](#TITRE|supprimer_numero)</a>]

                     

                      [:(#INTRODUCTION|couper{100})]<h2>

                      <div class="suite">

                              <a href="#URL_ARTICLE"><:lire_suite:></a>

                      </div>

                      </li>

              </BOUCLE_articles>

              [<li class="pagination menupaginationbas">(#PAGINATION{page_precedent_suivant})</li>]

              </ul>

              </div>

      </B_articles>

      et le placer au bon endroit dans le bloc encart en lui attribuant la classe css "breves" par exemple après le bloc du calendrier.

      Stéphane

      repondre message