Accueil > SPIP > PopDev : thème Z fluide

PopDev : thème Z fluide

jeudi 12 mai 2011
Mis à jour le vendredi 22 février 2013

Il s’agit d’une présentation rapide et succincte du nouveau thème du site www.ceped.org, en cours de finalisation, avant une documentation plus complète sur SPIP-Contrib.

Bien que PopDev soit en cours de finalisation, il est d’ores-et-déjà accessible sur Spip Zone.

Présentation rapide de ses caractéristiques

  • Il s’agit d’un thème fluide s’adaptant à différentes tailles d’écran, afin d’être consultable à la fois sur un PC, une tablette tactile ou un smartphone. Il s’inspire en cela de Ipad CSS Layout. Essayez donc de redimensionner la fenêtre de votre navigateur. Dans un premier temps, la colonne de droite est déplacée en bas de page (les blocs étant positionnés en trois colonnes) puis la colonne de gauche disparait et les blocs situés en bas de page sont affichés sur une seule colonne.
  • Adapté pour Zpip-dist, il intègre quelques spécificités propres à Aveline, en particulier concernant l’affichage des forum qui n’est pas le même selon que les forum sont présentés en arborescence simple (comme sur ce site) ou complète. Par ailleurs, grâce à la balise #ME présente dans Aveline, les messages des auteurs de l’article sont stylés différemment.
  • Il intègre Iconize Texlink with CSS pour ajouter une icône à la suite des liens et en fonction du lien.
  • Certaines décorations (coins arrondis, dégradés...) sont effectués en CSS 3 et donc seulement visible avec un navigateur récent. Avec un navigateur ne supportant pas CSS 3 (comme Internet Explorer), le site aura donc un aspect légèrement différent mais reste tout à fait consultable.
  • Certains éléments sont recopiés et/ou déplacés en javascript comme les mots-clés ou le formulaire de recherche. Le formulaire de recherche est affiché dans l’en-tête de page. Les mots-clés, si présents dans la page sous forme d’une liste simple, sont affichés dans la colonne de gauche. Enfin, les notes de bas de page sont dupliquées afin d’être affichées dans la colonne de gauche au niveau de l’appel de note [1]. Si javascript n’est pas disponible, ces éléments sont simplement affichés à leur position habituelle. Rien n’est donc perdu.
  • Utilisation de jQuery Bread Crumb pour le fil d’ariane.
  • Toute la gamme de couleurs du site dérive d’une seule couleur initiale qui peut être définie avec le plugin Couleur de rubrique. Il est donc possible d’avoir des couleurs différentes pour chaque rubrique [2].
  • Utilisation de Webfonts Google.
  • On peut ajouter des CSS personnalisées en créant un fichier popdev-perso.css dans son répertoire squelette. Ce dernier sera chargé après les CSS du thème.
  • Il est possible d’ajouter un bandeau personnalisé, sous l’en-tête, en déclarant un fichier popdev-bandeau.html dans son répertoire squelette. Un exemple sera donné lors de la mise en ligne du nouveau site du CEPED.

Notes

[1En voici un exemple. Cela permet d’éviter d’avoir à faire défiler toute la page pour pouvoir lire la note.

[2Pour pouvoir charger la CSS adéquate en fonction de l’id_rubrique en cours, il a été nécessaire de surcharger le fichier structure.html de Zpip car les fichiers inc-theme-head.html et inc-insert-head.html sont appelés sans variable d’environnement. Il faudrait trouver une meilleure manière de faire.

Commentaires

  • Le 22 février 2013 à 03:27, par Foster

    bonjour !

    J’aime beaucoup votre thème et du courage pour ce merveilleux travail. J’aimerai l’adopter pour mon site en modifiant les couleurs pour obtenir du rouge vif au niveau du bandeau et du pied de page, et du rouge clair en arrière plan.

    Comment y procéder ?

    Merci

    • Le 22 février 2013 à 07:42, par Joseph LARMARANGE

      Bonjour,

      Le mieux est de créer un fichier popdev-perso.css à placer dans le répertoire squelettes. Vous pourrez alors effectuer vos personnalisations dans ce fichier.

      Pour l’en-tête et le pied de page, recopiez dans popdev-perso.css

      1. #header {
      2. background: #371515; /* for non-css3 browsers */
      3. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#120707', endColorstr='#6e2a2a'); /* for IE */
      4. background: -webkit-gradient(linear, left top, left bottom, from(#120707), to(#6e2a2a)); /* for webkit browsers */
      5. background: -moz-linear-gradient(top, #120707, #6e2a2a); /* for firefox 3.6+ */
      6. }
      7.  
      8.  
      9. #footer {
      10. background: #371515; /* for non-css3 browsers */
      11. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e2a2a', endColorstr='#120707'); /* for IE */
      12. background: -webkit-gradient(linear, left bottom, left top, from(#120707), to(#6e2a2a)); /* for webkit browsers */
      13. background: -moz-linear-gradient(bottom, #120707, #6e2a2a); /* for firefox 3.6+ */
      14. }

      Télécharger

      et effectuez les modifications que vous souhaitez.

      Répondre à ce message

Répondre à cet article

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

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 formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Retour haut de page
Site réalisé avec SPIP | Plan du site | Contact | Crédits | Mentions Légales | Suivre la vie du site RSS 2.0
Habillage visuel © Larma par Joseph Larmarange sous Licence Creative Commons Attribution 2.5 License