The Morning After

Squelettes prêts à l’emploi, pour site de type weblog. The Morning After est un squelette adapté d’un thème Wordpress partagé sous licence MIT.

Attention : ce squelette, créé en 2008, n’est plus maintenu par ses auteurs. Il peut ne pas fonctionner.

Introduction

Le thème d’origine est téléchargeable sur Google code. Son auteur est Arun Kale [1].

Il se base sur le framework CSS Blueprint ce qui assure un bon niveau de compatibilité entre les navigateurs. Le doctype est XHTML 1.0 Transitional.

La licence du thème d’origine est MIT [2] Mise à jour :

L’adaptation a été réalisée pour SPIP 2.0 et SPIP 3.0. Quelques légères adaptations devraient le rendre compatible avec les versions antérieures.

Un site de démonstration est disponible ici : Squelette The Morning After.

Caractéristiques

Le paquet comprends les squelettes suivants :

-  sommaire
-  rubrique
-  article
-  auteur
-  mot
-  plan
-  recherche
-  archives (tous les billets du site avec pagination)

Pour l’essentiel, les boucles présentes dans les squelettes sont reprises de celles de la dist. L’article propose donc par exemple l’affichage des documents joints, du portfolio, etc.

La page d’accueil comporte :

-  le dernier article
-  un article sélectionné par mot-clé
-  les dernières brèves
-  la liste des derniers articles
-  un encart publicitaire optionnel
-  un nuage de mots clé (nécéssite le plugin Nuage)
-  les derniers commentaires

Le dernier article est affiché au format 470px × 175px. Les images plus grandes seront mises à ce format. L’effet est donc optimal si on utilise de grandes images horizontales pour illustrer les posts.

Le multilinguisme n’est pas géré mais le squelette peut être utilisé en français ou en anglais, les deux fichiers de langue étant fournis.

Les plugins

Les squelettes The Morning After pour SPIP sont compatibles avec plusieurs plugins.

Les balises nécessaires à leur utilisation sont présentes dans les squelettes. Ceux-ci peuvent toutefois être utilisé sans activer le moindre plugin grâce à l’utilisation de la nouvelle balise #PLUGIN de SPIP 2.0.

Les plugins utilisables sont les suivants :

-  Crayons : édition rapide depuis les pages publi­ques du site.
-  Nuage : afficher les mots-clés en faisant varier la taille de la police (page d’accueil, dans la seconde colonne). Aucun groupe de mot clé n’a été défini.
-  Social tags : per­met d’ajou­ter des icô­nes de par­tage de liens vers les sites tels que Digg, Facebook, Delicious.... (page article).
-  CFG (SPIP 2.0) : Permet de configurer le squelette (la « baseline » pour la version stable et le style graphique du site (version de dev. à venir) ).

Je préconise par ailleurs l’utilisation des plugins les plus utiles
habituels
.

Installation et configuration

L’installation consiste simplement à installer le plugin du squelette « The Morning After » (ou déposer le répertoire squelettes à la racine du site par FTP).

Le squelette sera alors immédiatement actif.

Pour en profiter pleinement, vous devez toutefois activer brèves et mots clés dans la configuration de SPIP, ainsi qu’une méthode de fabrication des vignettes dans les fonctions avancées.

-  Article sélectionné : créer un groupe de mots-clés au nom indifférent et ajoutez-y un mot clé intitulé « featured ».
-  Nuage de tags : ajoutez et activez le plugin « Nuage » (disponible dans la liste SPIP-Contrib dans l’espace privé). Pour exclure le mot « featured », par vous devrez modifier le squelette sommaire.html [3].
-  Publicité : décommentez la ligne <INCLURE{fond=inc-ad_home}> sur sommaire.html pour l’afficher. Par défaut, il s’agit du logo de spip.net et d’un lien vers ce site.

Personnalisation

La personnalisation implique de savoir préparer une image pour le web. Trois images sont nécessaires pour personnaliser le site :

-  squelettes/images/bg/home_banner.png pour la page d’accueil
-  squelettes/images/bg/archive_banner.png pour les rubriques et la page archives
-  squelettes/images/bg/single_banner.png pour les articles.

Vous pouvez aussi utiliser la même image partout avec trois noms différents.

Le logo du site SPIP importé par l’onglet Configuration de l’espace privé s’affichera aux dimensions maximales de 535x90px.

Pour personnaliser la publicité (format 250 X 250 px), modifiez le fichier inc-ad_home.html

Enfin, vous pouvez ajouter une feuille de style perso.css surcharger la feuille de style du site et ajouter par exemple des couleurs.

Les évolutions possibles du squelette

Le squelette est disponible sur SPIP-zone. Vous pouvez donc participer à son évolution : http://zone.spip.org/trac/spip-zone... et/ou svn ://zone.spip.org/spip-zone/_squelettes_/the_morning_after

Cette version 1 est une adaptation la plus fidèle possible du thème Wordpress d’origine. Dans ce contexte les améliorations suivantes peuvent être apportées [4] :

-  pouvoir utiliser le plugin CFG (lequel deviendra alors sans doute nécessaire) ;
-  configuration du groupe de mot clé à afficher dans Nuage (avec CFG)
-  ajout d’un champs de saisie d’une accroche (baseline) pour afficher sous le nom du site (actuellement : reprend #DESCRIPTION ;
-  activation et personnalisation de la publicité par le backoffice.

Les évolutions possibles sont les suivantes pour une version 2 :

-  ajout d’une blogroll (liste de sites référencés) ;
-  utilisation des microformats dans le code (X)HTML ; (ok pour auteurs)
-  création de variantes de pages (pour l’instant seule la page auteur a une variante)(nécessite le plugin « compositions »)
-  Modification de l’apparence graphique du site (couleurs, typographie et images de fond)(via le plugin CFG )
-  ajout du formulaire de contact auteur ;
-  affichage de l’article si la rubrique n’en compte qu’un seul.(ok, mais nécessite le plugin « compositions »)

N’hésitez pas à indiquer dans les commentaires si vous utilisez ces squelettes et les améliorations éventuelles qui pourraient être utiles.

Notes

[1Mise à jour : depuis l’adaptation sous SPIP, l’auteur a changé l’emplacement de téléchargement du thème qui est désormais http://themasterplan.in/tma. La licence de la nouvelle version du thème est différente également.

[2Selon Wikipedia : cette licence « est une licence de logiciel libre et Open Source. Elle donne à toute personne recevant le logiciel le droit illimité de l’utiliser, le copier, le modifier, le fusionner, le publier, le distribuer, le vendre et de changer sa licence. La seule obligation est de mettre le nom des auteurs avec la notice de copyright.

Elle est très proche de la nouvelle licence BSD, seule la dernière clause diffère. Elle est compatible avec la GNU General Public License. »

Le jeu de squelette comporte le fichier README d’origine avec une copie de la licence. L’auteur demande de conserver la mention de copyright dans le footer, au moins sous forme de commentaire. Un lien vers son site et vers le site spip.net sont aussi présents dans le footer.

[3Pour préciser par exemple le gourpe de mots clés utilisés pour vos tags avec la syntaxe [(#MODELE{nuage}{id=4})] si vos tags sont dans la rubrique 4.

[4les évolutions rayées sont disponibles dans le paquet « en travaux »

Discussion

120 discussions

  • Bonsoir

    J’ai un soucis sur les notes de bas de page dans un texte qui renvoie vers la page d’accueil ; je crois que cela viens du inc-head <base href="#URL_SITE_SPIP/" /> mais je suis pas sur...

    Avez vous rencontrer ce problème ?

    merci d’avance

    Répondre à ce message

  • 1
    Jean-Marc

    Bonjour et meilleurs voeux pour 2010,

    je souhaiterai que le texte du « chapeau » des différents articles apparaissent en gras à la lecture des articles.
    Quelle est la procédure à suivre ?
    Merci.
    Jean-Marc

    • Bonjour à tous,

      est-ce que les icônes de vos documents joints à un article s’affichent ? Rien ne s’affiche pour ma part (Voir cette page).

      Dans la partie privée, les icônes sont visibles mais les spécifications de hauteur et de largeur sont à valeur 0.

      Comment rectifier cela dans la mesure où l’absence d’icônes diminue significativement la visibilité des documents en question.

      C’est dans ’inc-documents’ que ça doit se passer, j’imagine...

    Répondre à ce message

  • 1

    bonjour,

    merci pour ce squelette, j’aimerai modifier le titre des différents blocs et j’ai beau chercher je trouve pas.

    par exemple je voudrai faire apparaitre derniers articles à la place de billets recents etc...

    comment faire ?

    et merci encore de votre precieuse aide

    • Bonsoir,
      aller dans le dossier « lang » et ouvrir le ficher « fr » et apporter les modifs souhaitées.
      Jean-Marc

    Répondre à ce message

  • 3

    Salut à tous, merci pour cette superbe adaptation !
    J’ai un petit probleme par contre je n’arrive pas à afficher un article dans le cadre « sélection »... J’ai bien suivi le procédé ?... Et j’aimerais aussi savoir comment afficher plus d’articles dans la section « derniers billets » Ca serait plus cool... quelques difficultés car je viens de wordpress mais je m’adapte tres bien :)
    merci.

    • Bonjour à tous,

      j’aimerais utiliser le plugin ’Boutons texte’ pour agrandir du texte ou le passer en pleine page mais rien ne s’affiche. J’ai tenté de la configurer avec CFG mais rien n’y fait. Quelqu’un a été confronté au problème ?

    • bonjour,

      ai meme probléme, mais moi je n’y suis tjs pas arrivé.
      J’ai vu que vous aviez la solution...pourriez vous m’expliquer comment cela fonctionne !!!

      merci encore

    • Bonjour,

      c’est une fausse solution en vérité. J’ai remplacé #INTRODUCTION par #TEXTE => du coup ça affiche tout, mais ça ne me convient que parce que les textes sont par essence des textes courts, ce sont des brèves. Si quelqu’un a mieux, je suis preneur !

    Répondre à ce message

  • 6
    Jean-Marc

    Bonsoir,
    comment faire apparaitre l’encart publicitaire « SPIP » et changer l’image de ce dernier.
    Merci
    Jean-Marc

    • salut, dans le fichier sommaire.html, tu copies ces deux lignes de code à l’endroi que tu souhaites

      <!——>

      pour changer l’image et le lien tu édites le fichier inc-ad_home et tu modifie image et lien, puis dans le dossier images tu y depose ta nouvelle photo. Normalement cela fonctionne

      http://www.tkdlongages.fr

      moi je l’ai mise en haut à droite

    • désolé, j’ai beugué...
      et t’oublies pas d’y mettre les crochets avant et aprés et cela doit fonctionner

      INCLUREfond=inc-ad_home

    • Jean-Marc

      Bonsoir,
      je souhaite mettre le pavé publicitaire SPIP dans la deuxième colonne entre les derniers billets et le browse.
      Peux-tu me rappeler la procédure.
      Merci
      Jean-Marc

    • Bonjour,

      un truc agaçant : les liens que l’on définit dans le corps du texte, que ce soit dans les brèves ou les articles, ne sont pas actifs sur la page d’accueil alors qu’ils le sont sur la page article.html ou sur la page breve.html, comment résoudre cette petite contrariété ? Merci.

    • Je crois qu’il s’agit du comportement par défaut de la balise #INTRODUCTION : une alternative serait de la remplacer par #CHAPO ou #DESCRIPTIF dans sommaire.html.

      À ce que j’en ai compris, comme #INTRODUCTION coupe arbitrairement à 600 caractères le contenu (par défaut) la balise ne peut garantir l’intégrité d’un lien. Le filtre |couper doit a priori se comporter de la même manière.

      Doc une autre balise sans filtre devrait permettre un fonctionnement des liens. Ensuite naturellement il faut une certaine modération dans la quantité de texte saisie dans les champs correspondant.

    • Bonjour,

      je ne savais effectivement pas que #INTRODUCTION ne permettait pas cela. Ni #CHAPO, ni #DESCRIPTIF ne permettent d’afficher tout ou partie du corps du texte. Reste #TEXTE avec un couper ?? mais la balise avec ce critère réagit comme avec #INTRODUCTION -> pas de lien dans le texte. Comme ce sont des brèves, je me contenterai de la balise #TEXTE mais ce ne serait pas satisfaisant sinon...

    Répondre à ce message

  • 1
    Aurélien

    Bonjour,

    Je suis actuellement en train d’adapter mon site (www.fortboyard.net) avec The Morning After Spip.

    J’ai un soucis, en effet lorsqu’un commentaire est posté sur un article, il y a un soucis avec le cache. En effet, lorsque le visiteur valide son commentaire, il est redirigé non pas vers la page article mais vers la page d’accueil. Et lorsqu’on clique sur « lire la suite » de l’article c’est l’adresse de l’article qui est dans la barre d’adresse mais c’est la page d’accueil qui s’affiche. J’avoue que j’ai du mal à comprendre d’autant que si on vide le cache la page d’article s’affiche à nouveau.

    Y a-t-il un moyen de vider le cache de la page après chaque commentaire posté ?

    Le problème a-t-il été résolu dans le paquet « en travaux » ?

    Merci d’avance,

    Aurélien

    • Aurélien

      Fausse alterte, j’avais mal configuré le htaccess... Ca marche !

      Si un modo veut bien supprimer mon précédent message, merci ;-)

    Répondre à ce message

  • 9

    Tout d’abord un grand bravo et grand merci pour ce squelette vraiment superbe.

    Je suis complètement débutant sous SPIP et j’ai un problème de positionnement d’images dans les articles. J’aimerais pouvoir placer simplement mes images « à la ligne » au centre de l’article sans « qu’elles soient en float ». La balise img n|center ne fonctionne pas.

    Que faire SVP ?

    • Merci de la remontée d’info, Olrik.
      Il fallait ajouter la ligne :
      p img{float:none;}
      dans le fichier style.css. C’était un conflit de règles css entre celles de spip et celle du « framework » css blueprint utilisé par le squelette).

      C’est bien entendu corrigé dans la version svn.

    • Merci pour la modification, l’image ne « float » plus, mais il y a toujours un problème au niveau du centrage ;-( J’ai beau bidouillé au niveau de .spip_documents_center rien n’y fait…

    • Problème résolue, il m’a suffit d’un text-align : center ; et le tour est joué.

      Youpi !

    • Hello Olrik,

      « chez-moi-ça-marche » sans text-align:center, mais je n’ai testé que sous Firefox 3.0.13 et Konqueror, sous Linux (pas de windows sous la main en ce moment).

      Pourrais tu préciser le navigateur utilisé (Internet Explorer, non ? :) ) ainsi que la règle CSS complète que tu as utilisé pour corriger : à quels élément appliques tu le text-align:center; ?

      c’est .spip_documents_center{text-align:center;} ?

      En tout cas, merci.

      Note aux lecteurs :
      Soyez le plus précis possible (système d’exploitation, navigateur internet, version de spip, ...) si vous remontez un souci. Si votre site est en ligne, laissez aussi un lien vers une page « exemple ».

    • J’ai bien appliqué
      text-align:center;
      à spip_documents_center mais il est possible que j’ai modifié d’autres choses (je n’y connais pas grand chose et je bidouille ;-)
      Je travaille sous Mac OS X avec Safari. J’ai néanmoins constaté un autre problème dans l’alignement du titre des documents.
      Pour l’instant, mon site n’est pas en ligne…
      Merci en tout cas à votre sympathique communauté…

    • Bonjour,

      Pourrais-tu stp expliciter cette histoire d’alignement d’image et/ou de texte ?
      J’ai également des difficultés à aligner le texte sous l’image, voir un exemple sur mon site : http://www.gusz.fr/guspip/spip.php?article7.
      J’utilise safari sous mac os x. Mais j’ai testé sous windows avec firefox c’est pareil. Dans l’espace privé, mon image est en « left » (si je fais « center », tout est décalé vers le bas avec une grande partie vide au-dessus...) et mon texte est en-dessous avec 2 sauts de ligne. Merci.

      Bien cordialement,

      Yves

    • Pas de réponse... Ma question est sans doute futile, voir mal formulée.
      Je refais donc une tentative : dans mon article, je souhaiterais 1. placer une image alignée à gauche 2. Placer du texte en-dessous. Or si l’image n’est pas au moins égale à 500 pixels en largeur, le texte se place à sa droite. Merci pour une éventuelle réponse.
      Yves

    • En fait ça n’a pas de rapport direct avec ce squelette mais il s’agit du comportement par défaut des images défini par la feuille e style : il s’agit de permettre l’insertion d’images dans le texte.

      Pour éviter ceci vous pouvez tenter d’ajouter un <br class="nettoyeur"> ou sinon <br style="clear:both;"> juste après l’image. C’est du quick and dirty mais ça devrait fonctionner.

    • La 2e solution fonctionne parfaitement et donc me va. Merci.
      Cordialement, Yves.

    Répondre à ce message

  • 3

    Bonjour,

    Je dispose d’un site Spip 2.09 installé sur un serveur SME.
    http://www.gusz.fr/guspip/
    Séduit par votre squelette, je l’ai placé dans un répertoire squelettes à la racine de mon site. Or depuis, le site n’est plus que partiellement (pas d’habillage ni images ni liens)) visible depuis l’extérieur (nickel en local). D’où ma question : y a-t-il des droits particuliers à attribuer aux répertoires et fichiers de votre squelette ?
    Merci.

    Cordialement,

    Yves

    • Bonjour,Non pas de contrainte particulière en terme de droits d’écriture. Avez-vous bien vidé le cache du site ?

      Le problème semble être ailleurs : la source de la page ne donne pas de lien vers une feuille de style.

      Quelle est l’arborescence de squelettes/ ? Les fichiers sont-ils bien à la racine de ce répertoire ? (et non pas dans un sous-répertoire).

    • Il doit s’agit d’un problème par rapport à l’adresse du sous répertoire.

      Le css est visible à l’adresse : http://www.gusz.fr/guspip/squelettes/style.css mais dans votre code on a seulement href=« squelettes/style.css »

      Avez-vous bien déclaré http://www.gusz.fr/guspip/ dans la configuration du site ?

    • Il s’agissait effectivement de l’oubli (!) de déclaration du « www » dans la configuration du site. A présent tout fonctionne.
      Merci pour cette réponse rapide et encore bravo pour le squelette.
      Yves

    Répondre à ce message

  • 1

    Bonjour à tous,

    C’est à ni rien comprendre, impossible de faire fonctionner Thickbox v2 sur mon site. Auriez-vous une idée du pourquoi du comment ?

    Help :-)

    Bon week-end,
    Lo.

    Répondre à ce message

  • Et voilà le rendu avec #LOGO_RUBRIQUE

    Merci pour ces quelques lignes de code. J’avais envie de les copier/coller ici pour que tout le monde en profite tant que le paquet « en travaux » n’est pas disponible mais peut-être n’est-ce pas la bonne procédure spipienne et puis il faut laisser à César ce qui appartient à César.

    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