Squelette pour Spip 1.9+

Squelettes Spip « Davduf.net | Hiver 2007 »

Par David Dufresne, 31 janvier 2007 | 19256 Lectures

Page sommaire
Page sommaire

A l’origine, il y avait Hemingway, un template pour l’outil de publication WordPress . Libre de droit et terriblement sobre1.

Alors, en février 2006, ce template est devenue adaptation-maison pour Spip. Et cette adaptation est devenue squelette.

Au départ, ces squelettes devaient servir à un site en commun avec BooZ, développeur Spip, roi de http://leradiophone.net.

C’était il y a un an. Et puis, la vie a fait que, non, on n’a pas lancé le site de spipcast qu’on se jurait de faire mais le travail ne fut pas (totalement) perdu. Les squelettes sont restés2 ; et Booz a développé tout plein de supers plug-ings audio pour Spip.

Page article
Page article

Puis, en novembre 2006, j’ai repris ces squelettes pour le site d’une association de quartier de la Seine St Denis. Site Qui est actuellement en travaux.

Enfin, début 2007, je les ai encore modifiés pour qu’ils deviennent bon an mal an ce qu’ils sont.

Les voici donc, bruts de décoffrage.3

Il doit rester ici ou là des bouts de code tout à fait personnels (i.e : liés à davduf.net). Je vais m’efforcer de les enlever au fur et à mesure que vous les indiquerez dans le forum ci-dessous ,-)

Pour information, ces squelettes sont compatibles Spip 1.9+. ils acceptent tous les plugs ins possibles. Et font un usage intensif de :

Voilà.
Amusez vous bien.

1Comme l’auteur de ce template le demande, figure sa licence dans le fichier zip

2On en trouve une trace sur http://doc.spip.org/

3Depuis octobre 2007, grâce à Méjean, les squelettes ont été largement nettoyés et optimisés. Vous les trouverez çi-dessous sous le nom de Squelettes Davduf 2.0. N’hésitez pas à nous faire part de vos retours/remarques. Ils sont livrés avec une police et un logo vierge pour la frise du haut

4Comme il est expliqué sur le site de spip, vous devez ajouter vos propres polices dans un dossier ecrire/polices ; sinon s’affichera la police livrée par défaut avec Spip : dustismo.tiff

Un bon endroit pour trouver des polices : dafont.com

Ensuite, vous devrez mettre le nom exact de vos polices (en respectant les maj/miniscules) dans vos squelettes (en clair dans article.html, sommaire.html, breve.html). La puissance de spip vous permet de parametrer ensuite vos titres (taille, force, couleur)

ABONNEZ VOUS AU BULLETIN ALÉATOIRE SOUS PLI DISCRET

Messages

  • supers squelettes avec le contenu en pied de page « comme ca le fait bien »... bravo !

    Voir en ligne : meme blog

  • Au fait ? Au risque de passer pour un c*n, le lien de téléchargement est où ???

  • Oulalaha... Tu as raison, le fichier n’apparait pas. je règle ça dans la journée. Mille excuses

  • Plutôt joli mais sur un navigateur en 800 pixels de large (tu sais, Davduf, à l’ancienne ;-)), les titres de sommaire se chevauchent les uns les autres...

    • Aie.. Il faut que je regarde ça. Est ce que quelqu’un aurait une copie d’écran ? En fait, les titres sont « fabriqués » par un filtre Spip d’images typographiques. Peut etre devrais je « resserer » la longueur (en pixal/images) des titres ?

      Merci encore

  • Resserrer la largeur en pixels, pourquoi pas (dans mon cas il suffirait sûrement d’une soixantaine de pixels en moins). Mais il n’y a pas de remède miracle.

  • bonjour,

    ce squelette est somptueux... magnifique... Je vous le vole ! J’aimerais juste savoir comment on place le bandeau d’images en haut de page... Rien n’apparait sur mon site, bien qu’un logo soit affecté au site ds configuration !

    merci d’avance Arno

    • Merci à toi, Arno ,-)

      Pour le bandeau d’images, je n’ai pas mis... le mien. Celui des stations services désaffectées.

      Pour en avoir un, il suffit de le placer dans le fichier :

      inclusions/haut_page.html

      A bientot

  • Encore moi

    je dois être affreusement idiot, ou avoir oublié quelque chose... mais le titre du blog n’apparaît non plus....

    Help !

    (merci)

    • Regarde dans inclusions/haut_page.html

      Logiquement, le nom de ton site apparait automatiquement, du moment que tu l’as renseigné dans ta page ecrire (admin).

      Merci

  • Bonjour, j’aime vraiment ce squelette, et j’ai bien envie de le voler moi aussi ;-) J’ai le même problème qu’Arno avec le titre du blog et je n’arrive pas à m’en sortir : il s’affiche bien dans l’en-tête de la fenêtre des navigateurs que j’ai testés (Firefox et Safari pour Mac), mais pas sur le site :-(

    J’ai un autre problème avec l’affichage des titres d’articles : l’image typographique (c’est comme ça que ça s’appelle ?!?) ne s’affiche pas comme sur ton site. Mais genre comme avec une police de substitution (si je dis bien comme y faut ...) Les liens que tu fournis indiquent que GD2 et Freetype doivent être installés sur le serveur. Je ne suis pas sûr de comprendre ce que ça signifie. Mon hébergeur est free.fr... Ca pourrait être là la source du problème ?

    J’ai encore une autre question (je sais, je m’incruste ;-), comment paramétrer les rubriques qui vont s’afficher dans le « ventre » de la page sommaire et le nombre d’articles affichés ? Sur ton site par exemple, tu affiches « a la une » et « présidentielle 2007 », mais sur ma « transposition » ne s’affichent que des articles issus de ma rubrique n°4 et aucun autre...

    Dernière requête (je sais, je suis définitivement chiant), où intervenir pour afficher les images correspondant aux articles dans ce qui est repris sur la page de sommaire ? Est-ce que je suis clair ? Je ne me rends pas bien compte... Je reste très débutant avec SPIP ;-)

    Merci de me consacrer au moins le temps de la lecture, et bravo encore pour ce squelette vraiment très classe ;-)

    • Bonjour Narvic,

      Pour le titre, vérfier dans inclusions/

      haut_page.html

      ligne 21. Tout se joue la.

      Images typographiques

      Comme il est expliqué sur le site de spip, vous devez ajouter vos propres polices dans un dossier ecrire/polices ; sinon s’affichera la police livrée par défaut avec Spip : dustismo.tiff

      Un bon endroit pour trouver des polices : dafont.com

      Ensuite, vous devrez mettre le nom exact de vos polices (en respectant les maj/miniscules) dans vos squelettes (en clair dans article.html, sommaire.html, breve.html). La puissance de spip vous permet de parametrer ensuite vos titres (taille, force, couleur)

      Quels articles afficher ?

      Là... c’est à toi de voir, de modifier les boucles, de les adapter à tes besoins ?

      Les images des articles de la page sommaire ?

      Ce sont tout simplement les logos de tes pages et/ou de tes rubriques. Ceci se gère article par article, rubrique par rubrique.

  • rectification : au sujet du 3e emmerdement, finalement ce sont les derniers articles publiés qui s’affichent, quelle que soit la rubrique. Mais justement, j’aimerais choisir...  ;-)

  • merci beaucoup ;-) je me remets à la tâche...

  • Salut, je poursuis mon installation ;-)

    Deux bricoles à te signaler :

    Dans breve.html : tu as laissé le code des annonces Google ;-)

    Dans haut_page : le souci signalé d’affichage du nom du site vient de la ligne 21. Il faudrait (#NOM_SITE_SPIP) au lieu de (#NOM_SITE)

    Pour répondre à quelqu’un plus haut : l’affichage du logo du site à la place du nom du site n’est pas prévu dans le code de ce squelette ;-(

    Pour finir, j’ai un souci avec le lien auquel renvoi le nom du site : au lieu de l’adresse du site renseignée « en admin », il renvoie à une adresse que je ne comprends pas (et qui ne fonctionne pas) : il va chercher (je ne sais pas où) l’adresse réelle de la page d’accueil et il la fait suivre entre parenthèses de l’adresse indiquée « en admin ». Ca donne un truc comme ça : http://davduf.free.fr(http://www.davduf.net).

    A part ça les images typographiques pour les titres, ça marche du tonnerre, et c’est super-classe ;-)))

    Je poursuis mon bricolage ;-) Et merci encore. narvic

    • merci bien pour tes commentaires.

      Ceux ci m’aideront à faire une meillere mouture bientôt. J’attends encore quelques feedback.

      Merci et amuse toi bien

  • Salut, c’est re-moi ;-)

    Autre petit bug à signaler,

    dans login.html : inclure haut_page.html

    au lieu de : haut_page.php3

    Je continue à bricoler ;-)

  • est ce que quelqun pourrait me dire ce que donne ce squelette sous Explorer PC ? J’ai l’impression que la page sommaire déconne...

  • Bonjour,

    Superbe squelette ! J’achète !

    J’ai toutefois quelques soucis :

    1. Je pense que tu n’as pas complètement nettoyé le squellette j’ai des soucis avec les plugins itunes et flash_gordon (?) que je n’ai pas installés mais semblent être déclarés dans ton squelette.

    2. J’ai trouvé également des liens en dure http://www.davduf.net/... (dans le fichier breve.html par ex.)

    3. Je n’arrive pas a ajouter d’image dans le fichier ../inclusions/haut_page.html : Si j’ajoute img src=« ../../images/logo.jpg »/

    L’image ne s’affiche pas ! Je suis obliger de mettre l’url de mon site « en dur ». D’ailleurs, les images des listes du « ventre » ne semblent pas non plus s’afficher sous Firefox

    • Oui, je sais, il faut que je m’occupe de ça. Je le ferai trés vite. merci du retour, ça me permettra de corriger tout ça, au plus vite.

      n’hésite pas

    • Pour les puces des catégories, dernières réactions, etc. le répertoire /images/boutons n’est pas dans le package zip.

      Pour le titre dans haut_page.html, je ne vois pas. Le titre ne s’affiche pas pourtant il y a bien

      < h2 class="description">[< a href="(#URL_SITE_SPIP)" title="<:accueil_site :>« class= »Style1">(#NOM_SITE)< / a>]< / h2>

    • J’ai inséré le code suivant : < h2 class="description">< a href="#URL_SITE_SPIP" title="#NOM_SITE_SPIP" class="Style1">#NOM_SITE_SPIP< / a>< / h2> pour que le titre du site soit visible et le lien fonctionnel.

      (pensez à supprimez les espaces entre les <> !)

  • dans les inclusions ventre, j’ai corrigé et disposé les div qui permettent de créer 3 colonnes ainsi :

    < div class="block first"> < /div>

    < div class="block"> < /div>

    < div class="block"> < /div>

    J’ai mis le menu « navigation » et les boucles (rubriques, brève, etc.) à l’intérieur de ces balises.

    Cela permet ainsi de changer plus facilement les éléments (menu,rubriques, brève, etc.) d’une colonne à une autre.

    En effet la déclaration d’une boucle débute parfois AVANT une balise div dans ton squelette.

  • Je me suis aperçu que Davduf.net n’utilisait pas de feuille de style pour l’impression bien que celle-ci soit déclarée dans le fichier inc_head.html.

    Pour l’impression je masque #header, #secondary et #ancillary à l’aide de la fonction « display : none » en l’ajoutant, puis en dupliquent et renomment la feuille de style habillage.css (en impression.css).

    Cependant, j’ai encore quelques soucis : 1. les images typographiques du titre s’impriment en noir 2. le texte du chapeau sort des marges d’impression

    Bonne journée

    Voir en ligne : Blog.cardabelle.net (en test)

    • Bonjour !

      Merci INFINIMENT de tout ce feedback. J’envisage de mettre à jour les squelettes dès que possible... Et toutes vos remarques m’aident énormément.

      Merci encore !

      Et à trés vite ,-)

    • J’ai modifié quelques boucles, notamment j’ai ajouté une boucle pour les derniers commentaires.

      J’ai corrigé le lien RSS du pied de page (qui ne fonctionnait pas) et ajouté un lien RSS pour les dernières brèves.

      J’ai encore quelques soucis avec un filtre « itunes » non défini qui sort de je ne sais où et sous IE (7) l’article de droite (de la page d’accueil) s’affiche sous les 2 de gauche.

      Je tiens à ta disposition les squelettes modifiés.

      Cordialement,

      Méjean

      Voir en ligne : Blog.cardabelle.net (en test)

    • Hello l’ami !

      Merci encore pour tes remarques. C’est bien volontiers que je regarderai tes squelettes ,-)

      Quelles sont les boucles que tu as ajoutées, à part celles sur les derniers commentaires ?

      Le filtre iTunes remonte à un vieux plug in qui n’existe plus. Mais j’avoue, et je ne sais pas pourquoi, si on enlève le filtre, ça ne marche plus.

      Pour ce qui est de IE et de la page d’acceuil... Je m’en suis rendu compte tout récemment et, là encore, impossible de trouver la parade...

      Pour le reste, mille mercis à toi.

      Pourrais tu m’envoyer les squelettes complets modifiés à davduf AT davduf.net ?

      Merci d’avance !

    • Voilà, j’ai réglé le problème des images typographiques qui s’impriment dans un rectangle noir. Un peu pénible pour qui veut archiver les articles sous format papier (ou même en pdf).

      Il suffit d’ajouter le filtre |image_aplatirgif,ffffff ou |image_aplatirjpg,ffffff fourni par Spip depuis la version 1.9.x

      J’ai fais également quelques autres correction, je te ferai un nouveau zip.

      Bien cordialement

      Note : écrire |image_aplatir accolade gif,ffffff accolade (cf. ci-dessus en italique)

      Voir en ligne : blog.cardabelle.net

    • Formidable !

      J’attends ton zip... quand tu pourras ,-) Je pense retravailler sérieusement sur le squelette cet été...

      Tu seras grandement crédité ,-)

      Merci encore !

  • Bonjour, merci pour ce squelette que je vais utiliser en partie ( au moins la partie forum) sur mon prochain site.

    Ma question est moins lié au squelette qu’à un probléme que je comprend pas et que vous avez peut être déjà rencontré vu que vous utilisez les images typographiques.

    En test en local sous Mamp sur Mac, je n’est aucun probléme ( la police est bien une ttf pc bien sur), par contre en ligne sur serveur 1&1, la typo est destructurée, les fûts s’affine de maniére difforme et les lettres danses les unes par rapport aux autres. Je ne comprend pas d’où peut venir ce comportement. c’est bien GD2 qui est utilisé.

    merci d’avance

    Voir en ligne : dinobib.com

  • au risque de paraitre tres con, où est le lien pour avoir ce squelette ? :o

  • merci beaucoup :D j espere juste ne pas etre « trop » passer pour un con :) Merci encore Dav :)

  • Salut Davduf, je suis enfin venu à bout de mon « vol » du squelette dafduf.net. Après quelques adaptations des boucles à ma sauce (sans rien changer de fondamental à l’ensemble qui me plaisait vraiment beaucoup comme il était), le résultat est désormais en ligne. Et il te doit tout ;-) Donc, merci encore...

    Voir en ligne : novovision

  • Pardon, erreur sur l’adresse du site. La bonne adresse est :

    Voir en ligne : novovision

  • Hé bien, narvic, c’est superbe ! Bravo !

    A bientot, donc !

  • Je me joins à tout le monde pour vous féciliter pour ce magnifique squelette, emprunt de sobriété et d’esthétisme... Je l’ai donc adopté pour mon futur site, cela va sans dire ! Je débute en PHP et je n’ai découvert SPIP qu’il y a moins d’un mois, alors veuillez m’excuser par avance si ma question est un peu basique... Le code du squelettre est plein de liens .php3 qui ne renvoient à aucun fichier existant dans l’archive ? On peut les supprimer ? Aussi en visitant le site de Marvic, j’ai remarqué une très jolie présentation des mots-clés. Je pense qu’il s’agit du plugin « nuage » ? Quelqu’un pourrait-il m’expliquer (pas à pas) comment faire la même chose ? J’ai pourtant essayé de suivre les instructions données pour « nuage », mais je n’y arrive pas...

    Merci, bonne continuation, et longue vie à votre site.

  • Après quelques hésitations, j’ai décidé d’utiliser ce squelette pour la construction d’un webzine interactif. Je suis en train de modifier deux ou trois trucs. j’espère que ca ne posera pas de problème.

    Voir en ligne : voici l’adresse temporaire :

  • Voici les squelettes d’un site basé sur Davduf.net |Hiver 2007. C’est un travail en cours.

    Le code est nettoyé dans à peu près tous les fichiers et il n’y a plus qu’une seule feuille de styles.

    Mais ! Mais quelques fonctionnalités sont complètement supprimées ou modifiées, entre autres :

    • page d’accueil en une seule colonne, sans le filtre |typo sur les titres ; sur les autres pages, la colonne est à droite plutôt qu’à gauche (on peut modifier cela assez facilement dans la feuille de styles) ;
    • pas de son pour le moment, sauf le player mp3 en page d’article (players et playlists en cours d’intégration, ça ne marchait pas du tout chez moi) ;
    • pas de brèves ;
    • pas de squelette « Nouveautés » (resume.html) ;
    • plugin nuage pour les mots-clés (à installer par aillleurs) ;
    • galerie d’images en page d’accueil et rubriques ;
    • les menus de bas de page (« ventre ») sont organisés différemment (autres contenus + adaptation à la rubrique en cours) ;
    • etc.

    Dans ma todo’s list, j’ai :

    • intégration du plugin agenda ;
    • je cherche un/des player/s audio/vidéo avec playlists, qui supporte/nt plusieurs formats/codecs, et qui soit libre bien sûr (si quelqu’un a une idée ?) ;
    • internationalisation des squelettes et multilinguisme ;
    • etc.

    Pour voir le résultat actuel : http://www.quartier-europeen.eu

    Les squelettes sont livrés tels quels, il faut se plonger dedans pour adapter aux contenus de votre site (ex. numéros de rubriques, mots-clés...). Ils fonctionnent actuellement avec Spip 1.9.2c [ 10268 ] et le plugin nuage version 1.2. Ils ne sont pas testés sous Internet Explorer, ni aucun navigateur Mac ; retours et corrections bienvenus.

    Voir en ligne : Le .zip à télécharger

    • Merci Aurélie ! C’est parfait !

      Que ceux qui utilisent ton squelette n’hésitent pas à laisser leurs impressions ici ,-)

  • Hej,

    Un petit mail pour vous remercier d’avoir mis à disposition votre squelette que j’ai bidouillé, trituré, torturé pour en faire ceci :

    http://www.culture-en-limousin.fr/

    Merci encore

    @+

    Voir en ligne : http://www.culture-en-limousin.fr

  • Bonjour,

    J’apprécie vivement le design de votre squelette Spip que j’ai adopté pour mes pages web ! Malheureusement, je rencontre un problème dans les documents joints aux articles. Qu’ils soient au format PDF, Powerpoint ou zip, ils n’apparaissent tout simplement pas :-(

    Pourriez-vous éclairer ma lanterne ?

    Avec mes cordiales salutations,

    Hervé

    Voir en ligne : Topobox

    • Hervé,

      Tout se passe dans le fichier article.html

      Entre la ligne 164 et la 192.

      A la ligne 164, il faut simplement enlever « <—" A la 192, il faut enlever "—> »

      Ces signes servent à « débrancher » les fonctions. En les enlevant, on redonne à Spip ses droits ,-)

      Est ce clair ?

    • Aïe, ce n’est malheureusement pas si clair :-( J’ai édité le fichier squelettes/article.html, selon vos recommandations, mais la boucle documents joints me paraît liée à un lecteur de fichiers mp3, si bien que mes fichiers joints pdf ppt zip n’apparaissent pas. Mes connaissances sur les boucles SPIP sont maigres : pourriez-vous me donner un coup de main pour résoudre ce problème ?

      Voir en ligne : Exomatic

    • envoyez moi le ficher en question par mail. On va y arriver

    • bravo pour ce squelette.

      que c’est beau.

      Voir en ligne : bravo, encore

  • Oups, en revenant fureter sur cet article, je me rends compte que je n’ai jamais remercié son auteur. J’utilise ton squelette — à peine modifié — depuis quelques mois pour un petit lieu de rencontre autour de la construction de ma maison.
    Empilons des arbres

    Voilà, je répare l’oubli.
    Merci encore pour ce squelette fort sobre et efficace !

    Vincent

    • bonjour,

      concernant la taille des photos dans les articles, elles sont réduites en affichage à 520 pix de large.

      d’après ce que j’ai vu.

      si je modifie cet élément :

      #TEXTE|image_reduire520,0

      en le passant en

      #TEXTE|image_reduire800,0

      , je devrais autoriser l’affichage d’images en 800 pix de large.

      après un premier essai, j’ai scratché toute la mise en page..

      merci d’avance.

  • Salut Davduf,

    Merci pour tes squelettes que j’ai repris pour le site d’un café concert

    Cependant j’ai un problème quand je crée une playliste de mp3. Mes mp3 sont ouvert avec Quicktime et non avec le lecteur multimedia du plugin du même nom.

    Si quelqu’un peut me mettre sur une piste !

  • Bonjour, migré ce matin sur SPIP 2. Le squelette a semble-t-il pas trop « couiné » !
    Pour info à qui pourrait être concerné : Il faut tout de même mettre à jour squelettes/modeles/img.html à partir de prive/modeles/img.html (sans doute idem pour docs.html)

    Le reste semble toujours marcher...

    Petite question à Davduf : as-tu déjà utilisé le plugin xspf dans tes squelettes ? j’ai des soucis pour faire fonctionner le modèle rotator, et je me demande si ça peut provenir du squelette (j’imagine que non...)

    Gracias,
    Vincent

spip-o-mania

Squelette Printemps Eté 2004

En route !