Jeu de squelettes « EXIBIT »

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

Squelettes Exibit 2.0.1

Discussion

12 discussions

  • 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

    Répondre à ce message

  • 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

  • Lionel NICOLAS

    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

  • 1
    florent

    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

    • 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

  • 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

  • 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

  • 2

    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 ?

    • 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)

    • 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

  • 2

    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

  • 3

    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

    • Oui, et tu as aussi le même bug que moi concernant l’affichage des articles :
      http://www.tarenne-architecte.com/spip/spip.php?article3

    • Je suis allé consulté les liens mentionnés mais n’ai pas vu de soucis, est-ce résolu ?

    • Pardon oui le probleme a été résolu sur la page de compositions, le probleme venait du fait que les parametres de ce plugin de marchaient pas. Maintenant avec la nouvelle version de compositions tout fonctionne à nouveau (pour mon site en tout cas). Merci beaucoup !

    Répondre à ce message

  • Denis M

    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

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