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.

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"

Portfolio

Dernière modification de cette page le 24 octobre 2017

Discussion

120 discussions

  • Jacques

    Bonjour,

    Est-il possible d’afficher plus de deux commentaires en réponse à un article avec ce squelette ? J’ai essayé de faire le tour des squelettes et des fichiers !
    Puis je avoir une aide/réponse pour ceci ?

    Jacques

    notamment sur cet article :

    Villages de ville

    Répondre à ce message

  • 3

    2 petites modifs que j ai du faire, a vous de voir si cela vous interesse de les integrer dans le squelette TMA :

    1- le textarea apparaissent par defaut miniscules, j ai donc ajoute dans la feuille de style style.css :
    .spip_cadre width : 90% ; height : auto ;

    pour que par defaut le textarea prenne 90% de la largeur de son bloc, et aie la hauteur necessaire a l affichage du texte qu il contient ( ce qui donne ca ) au lieu d un minuscule textarea relativement illisible.

    2 la page article n etait pas du tout valide a cause d un probleme de body contenu dans le head

    j ai donc modifie la page article.html en deplacant le

    il se trouvai initialement apres le
    je l ai deplace pour le mettre entre le

    • Oups pardon le copier coller est mal passe . . . et je ne peux plus modifier mon post ci dessus, donc je reprend ;)

      J ai remplace :

      <INCLURE{fond=inc-head}>
              <INCLURE{fond=inc-entete}>
              </head>

      par :

      <INCLURE{fond=inc-head}>
              </head>
              <INCLURE{fond=inc-entete}>

      et j en profite pour rajouter un dernier detail, qui n est pas une erreur de validation mais provoque un warning sur le validateur w3c :

      Line 60, Column 14: reference to non-existent ID "recherche"
      
      	<label for="recherche" class="none">Rechercher&nbsp;:</label>

      dernier detail pour avoir une page article 100% valide ;)

      bon maintenant je attaque a la page rubrique ;)

    • Hello neofutur,

      La majorité des soucis que tu évoques sont corrigés dans la version en développement. Merci de les avoir pointées quand même (le warning m’avait échappé).

      En fait, actuellement, la version en développement (via svn, sur la zone) est très utilisable. Je travaille actuellement sur les formulaires cfg de personnalisation (pas très vite... subversion est cassé chez moi pour l’instant...).

    • neofutur

      bon je passe sur la version de dev pour un nouveau site ( http://newhosting.in ), et je reviens !

    Répondre à ce message

  • neofutur

    bonjour,

    je continue a utiliser ce squelette sur de plus en plus de sites, et je me disai que ca serai bien d avoir une gestion optionnelle du multilinguisme . . . .

    voila rien d urgent, juste une idee a rajouter dans les « evolutions possibles »

    Répondre à ce message

  • 1

    Bonjour

    Bravo pour l’adaptation spip de ce beau thème !

    J’essaie de faire apparaître le bloc publicité mais sans résultat !
    J’ai bien décommenté la ligne indiquée dans le fichier sommaire pourtant.....

    Où aurai-je fait une erreur ?
    Merci

    • Jean-Marc

      Bonjour,
      je débute sous SPIP : SPIP 2.0.9 avec The Morning After (version en travaux). Tout fonctionne à merveille.

      Cependant je souhaite intégrer un pavé supplémentaire sur la première page en haut de la première colonne ( au dessus du pavé « dernier article » ).

      qui peut m’aider ?

      MERCI

      Jean-Marc

    Répondre à ce message

  • Bonjour,
    Je ne comprends pas quels fichiers faut-il mettre dans le dossier squelettes pour activer ce squelette.
    Quand je dézippe l’archive j’ai un dossier mac os et un autre themasterplan_tma_v1.4.
    Merci par avance

    Répondre à ce message

  • Bonjour,

    J’ai un message d’erreur lorsque je réponds à un article -> Visualiser et je ne peux aller plus loin.

    Message :

    Fatal error: Call to undefined function: cs_glossaire() in /.../squelettes-dist/formulaires/forum.php(275) : eval()'d code on line 1

    Spip 2.09

    Merci

    Répondre à ce message

  • 3
    Philippe

    Par défaut la classe .on ne fonctionne pas sur ce squelette.

    J’ai cherché pendant un bon moment et finalement j’ai trouvé la solution, il faut rajouter un petit bout de css
    #side_categories .on { font-weight: bold; color: red; text-decoration: none; } /* liens exposes */
    et passer le paramètre d’environnement dans les squelettes rubriques, articles etc.. (genre env ou id_rubrique, id_article)

    • Excusez-moi... mais je n’ai pas compris comment faire cette partie :

      et passer le paramètre d’environnement dans les squelettes rubriques, articles etc.. (genre env ou id_rubrique, id_article)

      Pouvez-vous me dire ?

      Merci

    • Par exemple pour la page article
      <INCLURE{fond=inc-sidebar}{id_rubrique}{id_article}>

      Pour la page rubrique
      <INCLURE{fond=inc-sidebar}{env}

      Philippe

    • Super !!!

      Merci, ça marche...

    Répondre à ce message

  • Bonjour, merci et bravo pour ce squelette...

    J’ai un problème avec les brèves qui s’affichent avec inc-asides.html

    Lorsque dans le texte il y a des énumérations avec des tirets, dans la page sommaire, à chaque tiret un nouveau décalage apparaîtà la ligne suivante. Les puces ne sont pas en début de ligne.

    Tout va bien dans la page breve.html

    Pouvez-vous m’aider ?

    Merci

    Répondre à ce message

  • 1
    Philippe

    Petit souci de validation sur la page article au niveau du « chapo », il y a une balise <p> qui est rajoutée (<strong><p>The Morning After est un squelette)
    Point trouvé de solution pour l’enlever.

    A voir ici

    • Philippe

      Il faut en fait modifier le code pour le #CHAPO [<div class="#EDIT{chapo} chapo"><p><strong>(#CHAPO|PtoBR|image_reduire{500,0})</strong></p></div>]

      Placer la balise p à l’extérieur, et demander à Spip de ne pas rajouter de p avec le |PtoBR

      Passant plus de temps avec Typo3, je n’avais pas pas trop suivi les évolutions de SPIP

    Répondre à ce message

  • Bonjour (ou bonsoir),
    J’ai un petit soucis, sous the morning after, les articles de la même rubrique s’affiche sous les commentaires, je commence a avoir pas mal d’articles, la liste s’agrandit donc et je n’apprécie pas de trop. J’aimerai donc passer cette liste sous 2 colonnes, je sais qu’il y a des solutions déjà indiquées un peu partout, j’ai tenté mais je n’ai pas réussi ! Quelqu’un peut il me proposer une soluce « clef en main » ?

    Merci beaucoup !
    Ch@rles (www.amiens80.fr)

    Répondre à ce message

Ajouter un commentaire

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

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