SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 353 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > EXIBIT > Jeu de squelettes « EXIBIT »

Jeu de squelettes « EXIBIT »

26 mars 2009 – par Benoît Vrins – 21 commentaires

15 votes

Mise à jour 08/01/2010 : version 2.0.1

  • debug du squelette « article.html »

Démo visible ici : http://spip.exibit.be

1. Présentation

Les « Squelettes Exibit » ont été spécialement développés comme une base stable, à la structure sémantique et respectueuse des standards pour démarrer un travail de customisation graphique et de mise en page. Ils possèdent de nombreux atouts de base laissant aux auteurs SPIP une grande souplesse dans la mise en page de leurs contenus.

Les « Squelettes Exibit » (license MIT) disposent d’un jeu de CSS qui permet aux webdesigners de développer un habillage laissant libre champ à leur créativité (pour autant qu’on maitrise le CSS). Il est donc surtout à destination des webdesigners soucieux de développer un habillage sur mesure pour leur projet mais en utilisant une base XHTML-CSS stable et valide.

Les « Squelettes Exibit » sont adaptés à de petits et moyens sites pour associations, petites entreprises. Si le site grossit ou si des plugins SPIP doivent être ajoutés par la suite, ils peuvent facilement évoluer.

Ces squelettes SPIP possèdent les caractéristiques suivantes :

  • valides XHTML 1.0 Transitional
  • librairie Javascript « FANCYBOX » permettant l’ouverture de contenu dans des fenêtres (la galerie photos fonctionne avec cette librairie) qui se base elle-même sur Jquery, natif dans les dernières versions de SPIP
  • mise en page des rubriques par mots-clés
  • galerie photos avec création automatique d’onglets et visionneuse
  • Squelettes fonctionnels
    • 404 (page d’erreur en cas de contenu non trouvé)
    • article : visite du site par article
    • rubrique : visite du site par rubrique (menu)
    • recherche : page de résultats de la recherche
    • plan : plan du site
    • sommaire : page d’accueil du site
    • toutes les zones de la pages sont stockées dans un sous-répertoire « include » (menu à 3 niveaux, pied, entête, ...)
  • Une CSS générale et des CSS particulières pour les navigateurs capricieux :
    • Internet Explorer 7
    • Internet Explorer 6

2. Configuration

2.1. MISE EN PAGE AVEC LE PLUGIN « COMPOSITION »

Depuis la version 2.0. les différentes mises en page sont gérées gràce au plugin « composition ». Cela signifie principalement que les différentes mises en page de rubriques et articles sont cette fois isolées dans un sous-répertoire de « squelettes » appelé... « compositions ». On y retrouve donc l’ensemble des mises en page à savoir :

  • affichage des articles en deux colonnes (les articles qui vont dans la colonne de droite doivent être taggé par un mot-clé)
  • affichage par numéro d’articles du titre + introduction + lien ’lire plus’" (si on utilise le chapeau, il remplace l’introduction automatique de SPIP)
  • « affichage par date de publication + introduction + date + lien ’lire plus’ »
  • « affichage par numéro d’articles des articles en entier+ affichage des onglets des images contenues dans l’article avec lien vers visionneuse FancyBox » (galerie photos)
  • « affichage des article en menu déroulant » (JQuery UI)
  • « affichage des articles en onglet » (JQuery UI)
  • affichage en mode blog", les articles s’affichent par ordre chronologique de publication + nombres de commentaires associés à l’article.

Par défaut les articles s’affichent en entier l’un en dessous de l’autre par numéro d’article.

Pour configurer ce système, voici la procédure :

Il faut donc en premier lieu télécharger le plugin Composition

Plus besoin désormais comme dans les précédentes versions d’associer des mots-clés aux rubriques, on gagne du temps !

Il suffit dans SPIP de sélectionner la composition depuis le menu qui apparait dans la colonne de gauche dans l’apercçu SPIP d’une rubrique ou article.
Il est donc très aisé de créer de nouvelles compositions au besoin.

Exception : pour la mise en page sur deux colonnes, il faut quand même créer un groupe de mot-clés intitulé par exemple « mise en page articles » dans lequel vous créer un mot-clé appelé « colonne de droite » (dans le squelette, le n° de mot-clé défini est le « 5 »). La procédure est donc

  1. Associer la composition « 2 colonnes » à la rubrique,
  2. Associer le mot-clé « colonne de droite » aux articles qui doivent figurer dans la colonne de droite (par défaut il sont dans la colonne de gauche ou colonne principale)

2.2. Le mode « galerie photos »

Si ce n’est pas encore fait dans la console de configuration de « SPIP », vous devez activer dans « fonctions avancées » une des méthodes de fabrication des vignettes (GD2 recommandée, à voir avec l’hébergement)
le création des vignettes fonctionne avec un masque PNG placé à la racine du répertoire principal « masque.png ». Vous pouvez en modifier la taille via un logiciel d’édition image au besoin

La visionneuse fonctionne avec la librairie Javascript « Fancybox » basée sur JQUERY (natif sur la version 2 de SPIP, il faut donc bien placer la balise #INSERT_HEAD entre les balises « head », OK dans les squelettes Exibit). Vous pouvez éditer les styles graphiques de celle-ci dans le répertoire « css »

Pensez à donner un titre à vos images ainsi qu’une description, il apparaitront dans la visionneuse

Dans les rubriques qui fonctionnent avec la composition « galerie photo », ils n’est pas nécessaire de positionner les images importées dans les articles au moyen des balises SPIP «  ». Si vous en avez malgré tout besoin, sachez que la boucle gère les doublons et que l’image n’apparaitra pas deux fois.

2.3. Mise en page par onglet et en menu déroulant

Celles-ci se font grâce à la librairie JQuery UI. Les articles se classent en onglet par numéro de titre. A noter que dans le répertoire « javascript », il y a un fichier appelé « application.js » qui gère les configuration particulières des différentes librairies javascript installées. Au moyen de la documentation officielle, il vous est donc possible d’ajouter des options d’affichage comme par exemple la rapidité d’ouverture des fenêtres Fancybox, l’effet de transition au changement d’onglet, etc.

2.4. CSS

  • La CSS mise à dispo est ultra basique. Les zones de mises en pages principales sont entourées d’une bordure grise afin que vous puissiez clairement visualiser celles-ci.
  • L’objectif est bien entendu que les graphistes puissent développer sur cette base un CSS enrichie laissant libre champ à leur créativité
  • Les images nécessaires à l’habillage du site seront idéalement stockés dans le répertoire « images »

2.5. DIVERS

  • Le lien « mentions légales » (obligatoires dans de nombreux pays) dans le pied de page est à activer (vers l’article que vous créerez)
  • Des styles dans la CSS sont prévus pour certains plugins comme par exemple « Forms & Tables »
  • Fonctionne avec SPIP 1.9.2 (la galerie photo non vérifiée) et SPIP 2.0

3. Aperçu

Vous pouvez consulter le site démo : http://spip.exibit.be
Reste à vous appliquer dans la CSS ;-)

4. Archives à télécharger

update : 29/07/2009

Zip - 187.8 ko
Squelettes Exibit 2.0.1

Dernière modification de cette page le 8 janvier 2011

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 4 octobre 2011 à 23:06, par jendive En réponse à : Jeu de squelettes « EXIBIT »

    Bonjour à tous
    mon premier problème avec ce très bon squelette que j’ai choisi est celui ci :
    En localhost je travaille - et quand je clic sur « monsite ».il apparait ceci :
    erreur....squelettes/sommaire.html (voir image).
    Que dois je comprendre ? que dois je faire ?
    je précise que je débute dans la création d’un site mais que je gère l’administration sur un autre site.
    merci de m’aider. j’ai lu beaucoup mais quelque chose m’échappe.
    jendive

    GIF - 34.7 ko

    Répondre à ce message

  • Le 3 octobre 2011 à 18:21, par Matthias En réponse à : Jeu de squelettes « EXIBIT »

    Bonjour,

    tout d’abord un grand bravo pour ce boulot. Il permet de faire de très belle choses en ayant des connaissances limitées en langage spip et en jouant simplement sur la CSS.

    En essayant de manipuler le squelette, je crois avoir décelé un petit bug. Il semblerait que les menus déroulants (dans les choix de composition) ne fonctionnent pas complétement bien sous IE alors que sous Firefox tout est nickel.

    Peut être avez vous une parade pour remédier à ce petit problème ?

    En tout les cas encore bravo et merci de l’éventuelle réponse.

    Répondre à ce message

  • Le 2 octobre 2011 à 18:45, par Lionel NICOLAS En réponse à : Jeu de squelettes « EXIBIT »

    Bonjour, votre squelette me plait beaucoup du coup j’ai essayé de l’installer avec les dernieres versions de compositions, spip-bonux et cfg mais compositions ne me propose aucune compositions pour mes rubriques.

    Dans la config cfg de compositions le repertoire est « compositions/ » et j’ai coché les trois options en dessous « Sélection des squelettes » « Masquer le formulaire » et « Tout verrouiller »

    Est ce que quelque chose m’a échappé ?
    A bientôt !

    Répondre à ce message

  • Le 2 mars 2011 à 17:19, par florent En réponse à : Jeu de squelettes « EXIBIT »

    Bonsoir,

    Je n’arrive pas à installer le squelette exibit alors qu’il me plaît beaucoup, quelqu’un peut-il m’aider ?

    Merci par avance

    • Le 12 septembre 2011 à 03:43, par Meg2sun En réponse à : Jeu de squelettes « EXIBIT »

      Il vous suffit de télécharger le répertoire zippé ci-dessus, de le dézipper, de le renommer « squelettes » et de l’installer comme répertoire racine de votre site SPIP (c’est l’info de bas qui manque un peu dans la description !).

      N’oubliez pas de charger avant dans un répertoire plugins que vous aurez préalablement créé le plugins Composition.

    Répondre à ce message

  • Le 13 juillet 2011 à 12:19, par PatG En réponse à : Jeu de squelettes « EXIBIT »

    Bonjour,
    Il a l’air très bien ce squelette.
    J’ai une erreur avec composition « Intro+lire plus » : « Aucun squelette compositions/article-court.html n’est disponible... »

    Je vais continuer mes tests ...

    Répondre à ce message

  • Le 29 avril 2011 à 21:51, par André En réponse à : Jeu de squelettes « EXIBIT »

    Bonjour,

    Je viens d’installer ce squelette que je trouve vraiment trés bien, mais maintenant je ne sais pas comment, depuis mon site, me connecter à l’espace privé.
    Quelqu’un sait comment on y arrive ?

    Merci !

    AA

    Répondre à ce message

  • Le 2 mars 2010 à 19:07, par titou En réponse à : Jeu de squelettes « EXIBIT »

    Bonjour,
    Nouveau avec spip, je viens de terminé mon site avec votre squelette mais je n’arrive pas a mettre le logo de mon site. En effet, lorsque j’enregistre une image dans « logo de ce site » dans configuration il ne se passe rien. Comment faire ?

    • Le 7 mars 2010 à 11:53, par Benoît Vrins En réponse à : Jeu de squelettes « EXIBIT »

      Effectivement, le squelette ne prend pas en compte le logo de site. C’est un choix de « designer », je trouve plus propre d’afficher sémantiquement dans l’HTML le titre du site et non l’image (meilleur pour le référencement et mieux pour les navigateurs non-graphiques). Il est ensuite possible d’associer à la balise H1 un style CSS faisant apparaitre l’image en fond (background-image)

    • Le 24 février 2011 à 14:20, par sonia En réponse à : Jeu de squelettes « EXIBIT »

      Bonjour,
      et merci pour ce joli squelette !

      Complètement novice en spip, html ou css j’essaye de bidouiller en local pour le moment mais c’est pas évident...
      J’ai plusieurs questions :

      -  Pour remplacer le bandeau par une image je dois aller dans header c’est bien ça ? Est-ce que vous pouvez me donner la ligne de code exacte ? J’ai essayé plusieurs endroits entre les balises H1 et plusieurs codes mais le résultat n’était pas terrible...

      -  J’aimerais aussi mettre une image en fond d’article, c’est possible ?

      -  Est-ce qu’on peut justifier le texte ?

      -  Et pour rajouter la possibilité de passer en anglais ?

      Merci pour votre aide

    Répondre à ce message

  • Le 2 janvier 2011 à 20:05, par Frip En réponse à : Jeu de squelettes « EXIBIT »

    Hey ^^

    Félicitations pour ton travail, vraiment du bon boulot.
    Par contre, je rencontre un petit problème, lorsque j’essaye d’afficher un article directement (ex : .../spip.php ?article1 via le plan du site), aucun contenu de l’article ne s’affiche.
    J’ai le header, le chemin de fer, le footer, et c’est tout.

    As-tu une idée d’où cela provient ?

    Merci d’avance :)

    Répondre à ce message

  • Le 3 janvier 2011 à 15:53, par Armelle En réponse à : Jeu de squelettes « EXIBIT »

    Bonjour,
    Et bravo pour ce superbe squelette !

    Je tente en ce moment de l’utiliser, et je rencontre un problème au niveau de l’affichage des rubriques avec composition : Lorsque j’active une composition, l’affichage bug complètement :

    -  Pour la même page d’acceuil, avec l’adresse « spip.php » et « spip.php ?rubrique1 » :
    http://www.tarenne-architecte.com/spip/
    http://www.tarenne-architecte.com/spip/spip.php?rubrique1

    -  Pour 2 catégories différentes, avec ou sans compositions :
    http://www.tarenne-architecte.com/spip/spip.php?rubrique7
    http://www.tarenne-architecte.com/spip/spip.php?rubrique8

    La encore composition fait buger...

    Y a-t-il une explication à ce problème ?

    Merci beaucoup

    Répondre à ce message

  • Le 24 mai 2009 à 21:45, par Denis M En réponse à : Comment faire un site en 2 versions de langues ?

    Bonjour.
    Félicitations pour ce jeu de squelettes. Étant encore un peu novice de SPIP, j’aimerais savoir comment faire en sorte que mon site soit en 2 versions de langues :
    -  La navigation et les articles apparaissant dans une seule langue à la fois.
    -  Que le visiteur puisse en tout temps choisir la langue globale en cliquant sur un petit menu déroulant.

    Merci de votre aide !

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 20 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • Configurer Sparkpost

    25 avril – 14 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

  • Utilisez le framework Foundation dans vos squelettes !

    13 août 2013 – 58 commentaires

    Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement ! Ce plugin ajoute le framework Foundation sur l’espace (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 65 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

Ça spipe par là