SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Squelettes complets > Squelettes « éditoriaux » > IENSP > Archives IENSP

Squelette "IENSP" v1.1

lundi 19 mars 2007, par stephane. Dernier ajout mercredi 16 mai 2007


Ajoute au squelette par défaut (la dist) une barre de navigation et un menu déroulant ainsi qu’un portfolio .


Présentation

- Nom du Squelette : "IENSP"
- Version du squelette : 1.1
- Auteur : Stéphane Kus
- Licence : GPL
- Compatibilite SPIP : compatible SPIP > 1.9.2
- Sites exemples : le site de la circonscription de Saint-Priest, le site REP’Connection en version vert pâle
- 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.

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)
- #336699 (couleur des bordures, des liens, de fond des menus et des barres de navigation)
- #FFCC66 (couleur du texte du menu et des barres de navigation et de fond des menus déroulants)

Dernière chose à faire : modifier les images images/coin.gif et images/coinrond.gif pour les accorder avec les couleurs de votre habillage.css

Quelques sites qui utilisent les squelettes IENSP

- Le site de Solidaires Rhône
- Aquamac
- Puls’Art Le Mans
- Le Site des Elus Etudiants Rochelais et de la Vice-Présidente Etudiante
- Mac & Guitare
- Le site officiel de Max Foggéa
- http://pascaljuhel.com
- http://www.carolineballet.com
- http://www.armelle-chesnel.com
- http://www.stepk.com
- http://fred-chapellier.com
- http://www.heuvelinne.com
- http://www.lorenzosanchez.com
- http://www.danielrouyer.com
- http://www.psychanalyste-en-colere.com
- http://www.fho-madison.com
- http://www.robertlerivrain.com

Mais encore

Donnez-moi votre avis (par mail ou via le forum de cet article) et aidez-moi à optimiser ce squelette pour toute plateforme.

Et pour finir, voici une petite image de la page d’accueil :

Documents joints


Répondre à cet article

  • Une bannière flash...

    8 mai 2007 21:54, par armelle

    Bonjour et merci beaucoup pour ton squelette... cela faisait des semaines que j’étais à la recherche d’un qui alliait simplicité et un portfolio sympa !

    Par contre, j’ai une petite question. Est-ce possible de placer une bannière en swf... ? car j’ai vu qu’il n’était pas possible de le faire par la voie classique (logo du site).

    Par avance merci !

    Voir en ligne : le vitrail

    Répondre à ce message

    • Une bannière flash... 9 mai 2007 12:45, par Stéphane

      Pour mettre ta bannière en flash, il suffit de remplacer l’appel au logo du site dans le fichier squelettes/inc-entete.html par l’inclusion de ta bannière que tu auras auparavant déposé sur ton serveur...

      Répondre à ce message

      • Une bannière flash... 29 mai 2007 16:27, par me-mail

        Escuse-moi mais je ne suis pas très douée... que dois-je supprimer pour taper mon lien... ?

        [(#REM) Afficher le logo ou le titre du site ]

        [(#LOGO_SITE_SPIP||?

        [(#LOGO_SITE_SPIP ||image_reduire770,200 |inserer_attributalt,[(#NOM_SITE_SPIP|textebrut)] |inserer_attributtitle,[(#NOM_SITE_SPIP|textebrut)] )]

        Répondre à ce message

        • Une bannière flash... 29 mai 2007 18:30, par Stéphane

          Il faut remplacer :

          [(#REM) Afficher le logo ou le titre du site ]

          <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

          [(#REM) Afficher le logo ou le titre du site ]

          <a rel="start" href="#URL_SITE_SPIP/">
          <emb src="chemin de ta bannière flash" />
          </a>

          Répondre à ce message

    Retour au début des forums

  • Squelette "IENSP" v1.1

    8 juin 2007 15:15, par Zigo

    Bonjour,

    Merci pour ce squelette très sympa, heureusement que y’a des gens comme vous pour nous aider..... Novice en spip voudrais mettre une image dans le bandeau en haut de la page d’accueil et je ne sais pas comment faire ! Dans quelle partie du squelette il faut aller et comment écrire le chemin de l’image !! Pouvez vous m’aider ???? Merci d’avance

    Répondre à ce message

    Retour au début des forums

  • Edito et ordre des rubrique

    29 mai 2007 15:42, par mel

    Tout d’abord merci beaucoup pour ce squelette mais je suis une novice et je dois te poser 2questions...

    1) j’ai supprimé la liste des articles récents en page d’acceuil et j’aimerais la remplacer par un édito qui resterait toujours le meme, j’ai vu sur d’autre site que c’était possible mais je n’y arrive pas...

    2) je voudrais mettre les rubriques dans un ordre précis car elles apparaisent en ordre alphabétique... comment faire... ?

    Je te remercie par avance

    Répondre à ce message

    • Edito et ordre des rubrique 29 mai 2007 18:39, par Stéphane

      Pour ce qui est de l’édito, il apparaît si tu renseignes une description du site dans l’espace privé -> configuration

      Pour l’ordre, il faut rajouter des numéros aux rubriques pour les ordonner dans l’ordre que tu veux : "XX. nom de la rubrique", puis il faut dans les squelettes mettre un critère de tri par numéro : par num titre et un filtre pour la balise de titre qui supprime ce numéro "supprimer_numero".

      Voilà le code que ça donne pour le fichier inc-rubriques.html qui affiche le menu déroulant :

      [(#REM)
              Barre de navigation, ouverte sur la hierarchie courante

              On fait un plan, et, quand on avance vers une rubrique,
              on l'affiche si son parent est expose ou est la racine du site. ]

      <B_rubriques>
      <div id="menu">
              <ul class="level1">
              <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
                      <li class="submenu">
                              <a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero|couper{80})]</a>

                              <B_sous_rubriques>
                              <ul class="level2">
                                      <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
                                              <li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero|couper{25})]</a>
                                              </li>
                              </BOUCLE_sous_rubriques>
                              </ul>
                              </B_sous_rubriques>

                      </li>
              </BOUCLE_rubriques>

              </ul>
      </div>
      </B_rubriques>

      @+

      Répondre à ce message

      • ordre des rubrique 30 mai 2007 10:08, par me-mail

        et bien tt dabord merci beaucoup... mais j’ai essayé plusieurs fois et les numéros des rubriques apparaissent toujours... vois tu d’où peut venir le problème... ?

        Voir en ligne : vitrail

        Répondre à ce message

    Retour au début des forums

  • Squelette "IENSP" v1.1

    24 mai 2007 11:06, par Zigo

    Bonjour, merci pour ce beau squelette !!! Je débute avec spip et je ne sais pas du tout comment faire pour appliquer un bandeau en haut de la page d’accueil !!! Pouvez vous m’expliquer ????

    Répondre à ce message

    Retour au début des forums

  • Derniers commentaires

    16 mai 2007 00:08, par emmacadas

    bonsoir, je découvre ce squelette que je trouve très sympa, simple et convivial, mais pourquoi sur mon site qui tourne déjà depuis quelques semaines n’apparaissent pas les derniers messages de forum ? il me semble que sur d’autres sites sous IENSP, on voit bien le cadre de forum dès la page d’accueil. D’autre part, comment faire pour remplacer le petit point d’interrogation bleu par une petite icône matérialisant la page d’accueil ? Merci d’avance pour vos réponses

    Voir en ligne : mon site

    Répondre à ce message

    • Derniers commentaires 16 mai 2007 13:14, par Stéphane

      Bonjour Pour les derniers messages du forum, il faut rajouter ce bloc dans le code de "squelettes/sommaire.html" juste après </B_breves> :

      [(#REM) Liens des forums ]
                                      <B_forums_liens>
                                      <div class="forums">
                                              <h2 class="menu-titre"><:derniers_commentaires:></h2>
                                              <p><:messages_recents:></p>

                                              <ul>
                                                      <BOUCLE_forums_liens(FORUMS) {plat} {par date}{inverse} {0,8}>
                                                      <li>[(#DATE|affdate_court) &ndash; ]<a href="#URL_FORUM">#TITRE</a></li>
                                                      </BOUCLE_forums_liens>
                                              </ul>
                                      </div>
                                      </B_forums_liens>

      Pour le le ?, il doit te manquer l’image /squelettes/images/home.png

      Stéphane

      Répondre à ce message

      • icone d’accueil et fond de cadre 21 mai 2007 23:43, par emmacadas

        bonsoir, merci pour ces premieres infos, effectivement le bloc des forums apparaît, par contre son fond est transparent contrairement aux deux autres cadres (brèves et sites). Une info là-dessus ? d’autre part, j’ai bien l’icone home.png dans le dossier images, mais je ne sais pas comment l’activer. Merci pour vos réponses E.C

        Voir en ligne : mon site

        Répondre à ce message

        • icone d’accueil et fond de cadre 22 mai 2007 07:31, par Stéphane

          J’ai trouvé le problème : le dossier images a pour chemin sur ton site squelettes/IENSP%202.0/images/. Il te faut remplacer dans les fichiers le chemin normal squelettes/images/home.png par squelettes/IENSP%202.0/images/home.png. Pareil pour le logo IENSP du pied de page et le logo de Firefox.

          Apparemment tu as trouvé la solution pour le cadre des forums.

          Stephane

          Répondre à ce message

          • icone d’accueil , suite 27 mai 2007 23:02, par emmacadas

            désolée, je me sens un peu bête, mais dans quels fichiers dois-je modifier le chemin ? dans la feuille d’habillage, je ne trouve rien qui ressemble à home.png ... Navrée de mon incompétence crasse ... et merci d’avance !

            Voir en ligne : http://phileophys.com

            Répondre à ce message

            • icone d’accueil , suite 28 mai 2007 15:09, par Stéphane

              Y’a pas à être désolé ! On est tous passé par là ! Il faut modifier les fichiers suivants dans le dossier squelettes :

              - article.html
              - auteur.html
              - forum.html
              - plan.html
              - rubrique.html
              - sommaire.html

              Dans ces fichiers cherche le bloc "[(#REM) Fil d’Ariane ]" et remplace "squelettes/images/home.png" par "squelettes/IENSP%202.0/images/home.png"

              Enfin dans le fichier inc-pied.html remplace "squelettes/images/" par "squelettes/IENSP%202.0/images/"

              @+ Stéphane

              Répondre à ce message

    Retour au début des forums

  • Probleme de CSS avec IE...

    12 mai 2007 11:26, par Fernan37

    Merci pour cet habillage... il est sobre et efficace. J’ai apporté des modifications aux squelettes afin de l’adapter à mon site : www.cisa-asso.fr , tu peux l’ajouter dans la liste des sites sous IENSP si tu le souhaite. Il est vrai que la manipulation du CSS n’est pas facile, j’ai été ennuyé par IE6 avec les float, j’ai pu résoudre une bonne partie mais en revanche je n’ai toujours pas trouvé de solution pour les menus déroulant, le survol des menus ( pas de hover) et la différences de positionnement du formulaire de recherche et de marge de la barre inc-entete.html. As-tu des solutions ou des explications sur ce point ?

    De plus as-tu un site avec le portfolio en ligne afin que je comprenne comment ça marche ?

    Répondre à ce message

    Retour au début des forums

  • Squelette "IENSP" Questions : date accueil texte

    20 avril 2007 16:04, par ananda

    Bonjour, Tout d’abord : félicitation pour ce squelette bien sympa ! Je suis débutant dans les domaines Spip, Mysql, Php etc... J’ai malgré tout réussi en 3 jours à installer Spip et votre squelette, et ça marche ! J’ai beaucoup apprécié la réalisation de http://www.robertlerivrain.com, je m’en suis inspiré mais j’ai ...3 questions. 1 Comment faut-il faire (comme chez lui) pour supprimer la date et l’auteur de l’article ? 2 Comment faire pour que l’accueil ne reçoive pas les nouveaux articles etc.. et reste vierge (pour l’instant) ? 3 Comment faire "justifier" le texte dans la rédaction d’un article ? Merci d’avance Ananda http://www.dyotis.org

    Répondre à ce message

    Retour au début des forums

0 | 25 | 50



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net