PopDev : thème Z fluide

Joseph LARMARANGE — 2011-05-12T19:03:58Z

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.

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

[2] Pour 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.

Joseph Larmarange

PopDev : thème Z fluide

Présentation rapide de ses caractéristiques