Zpresse

L’idée c’est de faire un thème minimaliste et sobre que l’on pourrait ensuite personnaliser facilement.

Donc trois colonnes, trois couleurs (ou deux tons plus une couleur, plutôt), gris, noir, rouge. Des filets, pour l’instant, d’une part parce que j’aime bien le design presse, de l’autre parce que ça donne des repères pour estimer les blancs et voir si ça respire.

Le premier div (le div au background noir) est nommé barre-nav et il est prévu pour fonctionner avec le plugin Menus.

Les dimensions du body et de tous les éléments de la structure sont exprimées en ems, et le font-size en pourcentage. Si vous changez ce pourcentage, toute la présentation change. J’ai essayé plusieurs pourcentages et ça fonctionne bien (sur Firefox, Opéra, Safari sur Mac) à partir de 72%. Parfois à certains pourcentages on peut noter un problème d’alignement du pied, mais on le corrige rapidement en augmentant (ou l’inverse) le pourcentage par paliers de 1 %.

A partir de la Revision 36537 j’ai commencé à expérimenter avec @font-face qui permet d’utiliser ses propres polices pour l’affichage (ces polices étant chargées dans le serveur. Mais ce n’est pas pour l’instant fonctionnel en Internet Explorer (une fois le choix des polices arrêté je ferai le nécessaire).

La Revision 36537 a un double background pour la balise html : une image supérieure et une en bas de page avec une position:fixed.

Notez aussi que Zpresse est en développement malgré le fait qu’il s’auto déclare comme stable (ce n’est que en faisant cela qu’il s’affiche en tant que thème). Si vous avez des commentaires, suggestions ou bien critiques, surtout n’hésitez pas.

Démonstration

Discussion

19 discussions

  • bonsoir

    pas sûr de comprendre la config nécessaire pour z-presse
    je vois dans plugin.xml qu’il faut spip en version 2 ou 3 et Z en version au moins 1.2

    dans mon install spipr, est-ce que z-core 2.4 est compatible ?

    en tout cas, z-presse,bien qu’installé, n’apparait pas dans la liste des thèmes dans zen-garden ...

    j’ai constaté qu’un thème n’apparait dans zen-garden que quand il est « stable », c’est le cas dez-presse ...

    merci d’avance

    pam

    Répondre à ce message

  • 3
    marieb_web

    Bonjour

    Je ne comprends pas du tout comment je pourrai mettre des menus dans les barres de droite et de gauche autre que celles par défaut, est-il possible de les configurer ?
    merci :-)
    cordialement

    • Il faut commencer par comprendre la logique de Z.

      http://www.spip-contrib.net/Le-Squelette-Zpip-dist

      Où il est dit que

      head/ qui contient les squelettes de la section

      personnalisée pour chaque page, lorsque c’est nécessaire, qui s’ajoute à un commun situé dans inclure/

      contenu/ dans lesquels seront mis tous les squelettes produisant le contenu principal de chaque page

      extra/ dans lesquels seront mis tous les squelettes produisant les informations extra contextuelles pour chaque page

      navigation/ dans lesquels seront mis tous les squelettes produisant les informations de navigation propres à chaque page

      A +

    • marie_web

      bonjour merci pour votre réponse

      effectivement pas évident évident de passer d’un cms à un autre mais bon j’ai bricolé un truc avec le plugin « menus » et en modifiant le fichier body

      ça marche ;-)

      par contre je ne trouve nulle part pour supprimer « accueil du site » du fil d’ariane dans le template.
      une idée ?
      merci
      cordialement

    • Same as before. Ce n’est pas le template qui le fournit, il faut modifier ça soit dans Z, soit dans squelettes_dist. De mémoire, je ne suis pas sur ma machine mais au beau milieu des cartons, pinceaux, et autres lessives St Marrrrrrrc ‡-]

    Répondre à ce message

  • Tout simplement bravo pour ce travail !

    Répondre à ce message

  • 1

    Bonjour (et bravo pour ce thème vraiment classe),

    Je cherche à faire une modif dans l’organisation des pages, en gros je voudrais que ma page article.html n’ait que 2 colonnes (fusionner les colonnes contenu et extra, seulement sur cette page). Est-ce possible ? Faut-il prévoir un fichier body.html alternatif ?

    Merci.

    • J’ai trouvé en tâtonnant : il faut effectivement créer un body alternatif, de même qu’une structure alternative et les appeler à la construction de la page article.html

      A+

    Répondre à ce message

  • J’ai installé ce thème et je suis tombé sous le charme : simple, beau et fonctionnel.
    J’ai deux petites remarques à intégrer si possible dans la version téléchargeable.
    -  L’interlignage dans les titres (en page d’accueil) est trop petit il faudrait aérer un tout petit peu.
    -  Proposer une largeur de 960 pixels par défaut ou mettre dans le CSS une petite ligne de commentaire pour aider les utilisateurs à fixer simplement leur largeur. C’est un plus d’avoir utilisé des largeurs en % et proposer une largeur à la carte permettrait de tirer profit de tout ça.
    J’attends les remarques de Luis et des internautes, et je le répète c’est du bon travail.

    Répondre à ce message

  • 19

    Il semblerait que le fichier body.html doit être renommé en body-layout.html.
    Maintenant il s’affiche mieux mais ce n’est pas ça encore. Je me demande si la création des menus après activation du plugin Menus va arranger les DIV (pour l’instant j’ai qu’une seule colonne).. à suivre.
    Merci en tout cas pour ce beau travail !

    • tu as une ancienne version de Zpip, c’est pour ça. Le nommage en vigueur est maintenant body.html

    • Bonjour ajo

      Non, je ne crois pas c’est bien body.html. Est-ce que vous avez votre zpip à jour ? D’après ce que vous dites (1 seule colonne) je ne vois que ça. Avez-vous réchargé le zpresse d’aujourd’hui ? J’ai fait beacoup de changements depuis hier.

    • ok, c’est fait, ça marche ..mieux ! ha !
      merci, merci, merci !

    • Le petis silence (« ..mieux ») c’est parce que quand j’utilise Zpresse (avec les autres thèmes, beaucoup moins jolis soit dit en passant, cela m’arrive aussi) j’ai ce message d’erreur :

      1 Aucun squelette ’modeles/lesauteurs.html’ n’est disponible...
      2 Erreur de compilation
      3 Aucun squelette ’modeles/article_traductions.html’ n’est disponible...
      4 Erreur de compilation
      5 Aucun squelette ’formulaires/administration.html’ n’est disponible...

      Cela ne m’arrive pas avec le squelette par défaut de Spip.
      Excusez, je croyais pouvoir comprendre mais il faut bien avouer que je vois pas d’où ça vient. Les traces que j’ai trouvé dans de forums ne m’aident pas nom plus. Des pistes ??
      (ah ! j’ai installé les dernières versions de TOUT : plugins et Spip !)

    • Tu n’a pas supprimé squelettes-dist par hasard ?

    • speciale

      Ajo :
      Pouvez-vous me dire quelle version de SPIP et quels plugins vous utilisez ? Ainsi que les arborescences des dossiers spip, zpip ? Comme ça je pourrais essayer de reproduire le problème.

      Hasta mañana ;)

    • Bonjour et merci !
      > Oui, squelette-dist je l’ai renommé ’000’
      > J’utilise les toutes dernières versions de Crayons, Menus, Slogan, Spip Bonus, Zpip et Zengarden. Spip 2.0.10. J’ai tout installé comme décrit ici :
      http://www.spip-contrib.net/Installer-Zpip-pas-a-pas
      Donc l’arborescence est identique.
      J’ai des messages d’erreur parfois différents. A chaque fois j’efface le cache, bien sûr.

      1 Aucun squelette ’modeles/lesauteurs.html’ n’est disponible...
      2 Erreur de compilation
      3 No hay ningún esqueleto ’modeles/lesauteurs.html’ disponible...
      4 Error de compilación
      5 No hay ningún esqueleto ’modeles/lesauteurs.html’ disponible...

      Un autre symptôme (?), après quelques rafraîchissements de la page le message de erreur disparaît et la page s’affiche correctement sauf que les noms des auteurs n’apparaissent pas sur les articles.
      voici mon bac à sable :
      http://www.artecomochurros.com/blogs/potencialdeaccion/
      Gracias, hasta luego.

    • Il ne faut pas renommer ni supprimer squelettes-dist qui contient un certain nombre de modèles et formulaires nécessaire.

      On aurait pu tout redéfinir dans Zpip-dist, mais j’ai toujours des réticences à dupliquer un même code, ce qui entraine mécaniquement l’effort de maintenance.

      Rétabli le nom du dossier et tout devrait rentrer dans l’ordre.

    • Ché ajo, van teniendo buena pinta los churros. Sigo en francés.
      Comme te l’on dit Cédric et Maïeul, c’est au niveau de squelettes-dist que le problème réside : comme preuve, le petit logo de SPIP en bas de page n’est pas trouvé. Je me permettrais aussi de te donner un conseil : passe en 2.1.

      http://www.spip-contrib.net/Essayez-SPIP-2-1-RC

      A +

    • ayayay ! il fallait pas le supprimer ! j’ai tout compris de travers ! je m’excuse. Avant il fallait justement le remplacer, c’est pour cela que je ne me suis pas posé des questions. Enfin merci beaucoup à tous les trois. Gracias Luis, estupendo tema. Gracias por el cumplido (los churros estan un poco parados ahora pero vamos a relanzar la maquina pronto) y los consejos, paso en modo 2.1 en un momentito. Hasta pronto. +

    • J’ai supprimé par erreur squelettes dist je viens de m’en rendre compte ...
      Qu’est ce que je peux faire pou réparer ma boulette !!!

    • Désolé de vous donner une réponse plus qu’évidente. Il faudrait le remettre.

    • En faite c’est la première fois que je fais un site sur SPIP,
      donc ma question peut paraître bête, mais jle trouve ou ???
      Faut que je réinstalle SPIP ??

    • Oui, au moins le dossier dist ;-)

    • pas la peine de réinstaller SPIP.

      Juste le dossier squelettes-dist.

      Tu trouvera un zip de toutes les versions de SPIP à cette adresse http://files.spip.org/spip/archives/.

      Choisi la bonne version, dézippe et remet en ligne le dossier dist

    • Merci bcp de votre aide, ca y est erreur résolu seulement maintenant ca ne veux tjr pas m’afficher mes images, donc je ne vois pas mon squelette ... jvois uniquement le fond bleu !!! Je ne comprends pas pk, si jamais vous pouvez m’aider merci !!!

      Clémentine

    • vous auriez un site exemple ?

    • http://spip.toubatoo.fr

      ca c l’adresse de mon site si vous voulez voir rien ne s’affiche en image.

    • Oui jai créer mon Squelettes en html !!! jai tt fé et rien ne s’affiche et je n’ai aucun plugin pour le moment, faut-il que j’en télécharge un ?

    Répondre à ce message

  • 2

    Salut

    Il manque une image dans le theme pour le background de l’entete :

    Ligne 35 de habillage.css : images/speciale.png

    Répondre à ce message

  • 15

    Je rencontre un soucis de présentation des polices de caractère d’un site spip utilisant Zpresse.
    Les caractères semblent pixélisés, et cela ne se produit que sous Windows, plus précisement sous firefox et chrome, mais pas sous IE explorer

    Pour vous faire une idée :
    http://rictus-interactive.org/bug/firefox.png

    cordialement.

    • Je n’ai pas de machine tournant Windows, je ne peux donc pas vous aider sur ce point. Mais je ne pense pas qu’il soit une bonne idée de laisser tous les textes avec la police en question (j’ai fait ça pour voir le comportement d’une page entière avec cette technique) mais l’utiliser pour les h1, h2, h3 et laisser le texte courant dans une police « normale ». Une autre solution serait peut-être d’utiliser soit les Google fonts, soit le plugin webfonts (je ne l’ai jamais utilisé encore).

    • Je confirme, ce thème est plein de potentiel, mais la typo bave énormément sur Windows, Firefox comme Safari.

    • Merci pour les mamours ;-) La solution : convertir les fichiers .ttf (les polices) en .eot et les mettre dans le même dossier.

      Por ce faire il y a ttf2eot, mais je ne peux pas le faire avec mon Mac (vieux PPC)

      http://code.google.com/p/ttf2eot/

      Ensuite il faut faire un conditionnel à placer dans head.html, genre

      <!--[if IE ]>
      	<style>
      		@font-face { font-family:Aller_Display; src:url(polices/Aller/AllerDisplay.eot)format("eot"); }
      	</style>
      <![endif]-->

      Mais j’insiste sur le point que ça ne devrait concerner que la titraille (et encore pas toute). H1, H2, H3 et basta.

    • Par ailleurs, je viens de faire un tour chez GoogleFonts et ils ont plus de choix maintenant. En tout cas il y a la Yanonne et la PT Sans est très élégante.

      http://code.google.com/webfonts/family?family=PT+Sans&subset=latin

    • La meilleure solution pour convertir une fonte et obtenir le code optimal pour l’utiliser, c’est Font Squirrel : http://www.fontsquirrel.com/fontface/generator

      Je suis d’accord, il ne faudrait utiliser une fonte personnalisée que pour la titraille.

      Mais pitié, pas d’utilisation de l’API de Google Fonts, il faut utiliser une fonte locale, sinon ça ne marche pas quand on est en local ou en Intranet sans connexion Web.

    • Merci de ces pistes, je vais essayer la conversion.

      Par contre, je n’ai pas compris quel était le problème avec l’utilisation de ces polices en dehors des titres. Est-ce une raison technique, esthétique, une injonction de principe. Merci de clarifier de point.

      Et merci au passage Luis, ton thème est vraiment bien fait.

    • Ce qui me gène moi avec la typo sur tous les textes, c’est qu’elle est illisible sur Windows (testé avec Firefox et Safari) pour les textes simples. Elle ne devient lisible qu’à une plus grande taille.

    • Nicolas : j’avais entendu parler de FontSquirrel mais je croyais que c’était payant et passé outre. Le formulaire de conversion a l’air bien, et il a le bulletproof de Irish. Par contre en local j’affiche sans problèmes avec mon Mac.

      dut : pour la question esthétique (et ergonomique) il y a des polices qui sont peu lisibles à des petites ou moyennes tailles. La Verdana est une des plus lisibles, peut-être parce qu’elle a un grand œil (hauteur du x bas de casse) par rapport aux descendantes (un p) et ascendantes (un d). Par contre certaines fonctionnent mieux à partir d’une certaine taille (voilà pourquoi je dis limitons nous à la titraille).

      Techniquement, @font-face (la méthode pour afficher les polices) permet que si le visiteur de ton site n’a pas la police en local puisse la télécharger à la volée. L’idée est donc d’utiliser deux, voire trois polices maximum. Ça va fonctionner avec les grosses et les petites bécanes. Mais il faut surtout ne pas faire ce que j’ai fait.

    • Je pense qu’il faudrait se limiter à une police chargée avec @font-face pour les titres, et une police « web safe » pour le reste, afin de ne pas trop charger et réduire la performance. C’est relativement lourd, une typo.

      Plein de choses intéressantes sur ce site récent et déjà bien rempli : http://typographisme.net/

    • Sympa l’initiative, mais ternie par l’usage approximatif de l’orthographe. Je les ai engueulés (- ;

    • Super, je découvre plein de choses à l’occasion de ce fil.
      Peut-être serait-il judicieux d’indiquer plus clairement dans la doc du thème que toutes ces polices sont là à titre de démonstration, mais que pour un site en prod, il faut en resserrer le nombre.
      Perso j’aimerasi bien garder le texte des articles en Aller_Lt, est-ce si génant d’appliquer une police à l’ensemble du texte, si on se limite à cette seule ?

      Cette police est proposée en multiple versions, mais je crois comprendre que si la police du texte est Aller_Lt, une phrase mise en italique dans ce texte sera rendue par une déformation de caractère de Aller_Lt, mais pas par une utilisation de Aller_LtIt. Est-ce le cas ? Cela fait-il une grosse différence ?

    • Oui, il faudra être plus explicite dans la doc du thème, mais bon, ça un coté pédagogique aussi (- ; moi, je n’apprends qu’à force de faire des conneries.

      >j’aimerais bien garder le texte des articles en Aller_Lt, est-ce si gênant d’appliquer une police à >l’ensemble du texte, si on se limite à cette seule ?

      Faut faire des tests avec une grosse config et une petite (petite connexion, petite machine)

      >si la police du texte est Aller_Lt, une phrase mise en italique dans ce texte sera rendue par une >déformation de caractère de Aller_Lt, mais pas par une utilisation de Aller_LtIt.

      Exacte, le browser va italiser la police et ça va être affreux. Par ailleurs, je suis en train de faire des modifs sur le thème (oui, les polices faites avec FontSquirrel). Dès que j’ai fini, je commite. En tout cas, mes paramètres FontSquirrel sont…


      # Font Squirrel Font-face Generator Configuration File
      # Upload this file to the generator to recreate the settings
      # you used to create these fonts.

      « mode » :« expert »,« formats » :[« ttf »],« options_hinting » :« Y »,« options_vertical_metrics » :« Y »,« options_kerning » :« Y »,« options_subset » :« none »,« subset_custom » :« »,« subset_custom_range » :« »,« css_format » :« smiley »,« filename_suffix » :« ttf »,« emsquare » :« 2048 »,« spacing_adjustment » :« 0 »

    • Bon, c’est dans la boite (- ; Maintenant il faut attendre que le zip soit généré. J’ai ajouté les eot avec un conditionnel pour IE. Dites-moi si ça fait avancer le schmilblick.

    • Merci pour ces précieuses informations. Tout marche beaucoup mieux maintenant.

    Répondre à ce message

  • 2

    Bonjour,

    Je souhaite modifier les dimensions du body de mon site www.hackmein.fr.

    Cependant je rencontre des difficultés est ce que quelqu’un peut m’aider SVP.

    Merci à vous

    Cordialement

    • Bonjour,

      J’ai eu un peu de mal à comprendre comment le télécharger (je n’avais pas vu l’icône sur la droite), mais c’est fait. J’ai commencé à installer le template en local pour pouvoir le modifier plus facilement (bravo pour la conception, il est assez facile à comprendre). Je me lance donc dans les modifs avant de le balancer sur mon serveur. Je vous tiens informé une fois que mon projet est en ligne.

      En tout cas, merci beaucoup pour cette contribution, ça va me faire gagner beaucoup de temps.

      Amicalement,

      Sylvain

    • Notez tout de même qu’il n’est pas compatible IE, à l’heure actuelle

    Répondre à ce message

  • 2
    Catherinelle

    Bonjour
    Je voudrais faire apparaître un bloc « brèves » sous le bloc « recherche » dans la colonne de droite.
    Comme la brève que j’avais créée n’apparaissait pas spontanément, j’ai ajouté une boucle à la suite de la balise recherche dans le fichier dist.html, que j’ai placé dans squelettes/navigation.
    Résultat : la brève s’affiche (c’est déjà ça), mais dans la colonne de gauche, sous le menu de navigation... et sa présentation n’est pas terrible.
    Merci d’avance pour vos indications.

    • Catherine :
      Je suis désolé d’insister (et non que je ne veuille pas vous répondre), mais vous devriez lire cet article (au diable l’avarice : lisez toute les articles sur zpip) pour mieux comprendre la logique.
      http://www.spip-contrib.net/Le-Squelette-Zpip-dist
      Globalement, un thème ne s’occupe que de l’habillage des contenus déjà présents dans zpip (que c’est un squelette), et un squelette, oui, modifie l’affichage les contenus. Voilà pourquoi je vous disais que « Si vous voulez modifier le comportement d’une page vous devez recréer la structure de zpip à l’intérieur du thème lui-même. », en modifiant du coup son comportement de base.
      En clair : si vous voulez savoir quelle partie d’une page affiche quel élément vous devez le dépister d’abord dans zpip, récréer les pages et dossiers concernés dans le thème et les modifier ensuite.

    • Salut,

      Pour Catherinelle, il faut emballer la liste dans un conteneur, et bien la nommer aussi pour compatibilité avec les thèmes
      voir : http://www.spip-contrib.net/Conventions-de-nommage-dans-Zpip

      Un truc dans ce style :

      	<B_breves>
      	<div class="liste breves">
      			#ANCRE_PAGINATION
      			<h2 class="h2"><:breves:></h2>
      			<ul class="liste-items">
      					<BOUCLE_breves(BREVES) {par date}{inverse}{age<90} {doublons}>
      					<li class="item">[(#DATE|affdate_jourcourt) &ndash; ]<a href="#URL_BREVE">#TITRE</a></li>
      					</BOUCLE_breves>
      			</ul>
      		</div>
      	</B_breves>

      A toi de voir les critères : http://www.spip.net/fr_article898.html

    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