pyeb theme 2 dotclear

Arrivée de Dotclear 2 RC1, mise à jour des thèmes

pyeb — Thu, 01 May 2008 20:46:00 +0200

Dotclear vient - enfin ! - de passer en Release Candidate. Avec cette version, les fonctionnalités sont gelées jusqu'à l'éradication des derniers bugs avant l'arrivée de la première version de DC2. Les nouveautés ont été apportées jusqu'aux dernières heures avant la sortie officielle. DC2 RC1 est même arrivée dés les premières secondes de ce premier mai 2008. Chapeau à toute l'équipe !

Pour les thèmes, la modularité de DC2 a été augmentée et l'organisation est plus cadrée. Les plug-ins pourront maintenant fonctionner sans modification de fichiers. Les fichiers templates html sont maintenant rangés dans un dossier tpl. Sinon, il n'y a pas de changement profond dans les styles.

Mes thèmes sont déjà fonctionnels pour les plug-ins Pages - inclus dans DC2 - et dayMode - créé par Pep.

Mes thèmes et la future RC de Dotclear 2

pyeb — Tue, 15 Apr 2008 20:11:00 +0200

Actuellement avec les nigthly builds de DC2, les thèmes utilisant des templates spécifiques ont des problèmes dus au changement de noms des fonctions pour la gestion des rétroliens - modifier le mot trackback par ping - sinon ils sont fonctionnels.

Les modifications pour mettre à niveau mes thèmes sont déjà effectuées. J'attendrai la sortie officielle de Dotclear 2 RC pour les mettre en ligne car :

les thèmes ne fonctionnent pas correctement avec la beta 7
des améliorations peuvent encore survenir d'ici le 1er mai 2008

Tester et développer ses thèmes Dotclear sous mac intel : vérifier la compatiblité avec Internet Explorer

pyeb — Fri, 14 Dec 2007 15:58:00 +0100

Depuis qu'Apple a sorti Safari, Microsoft a arrêté le développement d'IE sur Mac. Du moins, Microsoft a suspendu tout développement de ses navigateurs web pendant de longues années... Pour rappel, IE 5 pour Mac était le seul navigateur à la sortie de Mac OS X.
A présent pour les différentes versions d'IE, plusieurs choix sont ouverts : l'utilisation de site web faisant des captures de votre site ou la virtualisation.

Capture d'écrans

Le plus simple est l'utilisation de site prenant des captures d'écrans comme Total Validator - merci Kozlika. Ce site permet la vérification xhtml & css ainsi que la capture d'écran pour différents navigateurs.
Un point négatif apparaît, c'est plutôt statique. Il est lent de vérifier toutes les pages et les différents éléments. Ensuite, la moindre correction demande une capture.

Bootcamp et virtualisation

Avec l'arrivée des Mac intel et de Bootcamp, il est facile de créer une partition Windows et d'installer le nécessaire (serveur web, dotclear). Mais comme IE 6 et IE 7 réagissent différemment - ont des bugs différents, c'est selon - et ne peuvent installer en même temps, le problème n'est régler qu'à moitié. De plus, il faut redémarrer... Mais bon, pour les feuilles de styles, il faut utiliser les règles standards puis adaptés le code à IE.
Une solution de virtualisation est obligatoire. De fait, il est nécessaire d'avoir deux systèmes. Comme VMWare et Parallels peuvent utiliser la partition Bootcamp, il faut juste une deuxième partition. Cela reste lourd et long mais cela fonctionne parfaitement ! Et il possible de trifouiller les règles css tout en vérifiant que cela ne casse pas la compatibilité avec les navigateurs modernes sur mac.

Bientôt tout en local ou presque : Wine et IEs4mac

Une troisième solution de virtualisation existe, c'est wine. Et il existe des projets qui porte IE sous linux, IEs4linux, et par extension sous mac, IEs4mac. Mais malheureusement, si IE 6 for mac fonctionne, IE 7 for mac est trop lent et l'affichage n'est pas toujours fait dans sa totalité. Le support d'IE 7 n'est encore qu'en beta et n'est pas utilisable actuellement en état.
Le plus simple est d'avoir Bootcamp avec IE 7 et d'utiliser IE 6 for mac.

Tester et développer ses thèmes Dotclear sous mac intel : les navigateurs disponibles

pyeb — Fri, 14 Dec 2007 15:01:00 +0100

Ce billet fait suite au billet sur les outils de développement pour dotclear sous mac.

Logiciel d'édition de texte avec coloration du code

J'utilise désormais TextMate. Pour la simple raison que je l'ai acheté en bundle avec d'autres logiciels - MacHeist ou MacUpdate ? - mais surtout qu'il est possible de rajouter des langages en les téléchargeant ou en les créant. Il y a le support de jQuery. Waouh !
Site de TextMate

Navigateurs disponibles sous Mac OS X

Safari

Depuis Panther 10.3, Mac OS X est livré avec Safari. Il utilise comme moteur de rendu Webkit qui est dérivé de KHTML.
La version 3 du navigateur vient de sortir et est inclus dans Léopard 10.5 ainsi que dans la mise à jour de Tiger 10.4.11. Cette version est plus véloce, gère mieux le javascript - enfin ! - et propose des outils de développement.

Safari 3 continue de supporter les extensions aussi bien les InputManager que ceux utilisant SIMBL. Pour trouver un listing d'extensions, il suffit de jeter un oeil sur Pimpmysafari. Par exemple, Safari Tidy indique les erreurs et les avertissements W3C et Safari Source colorie le source de la page.
J'utilise Safari comme navigateur par défaut car son rendu est supérieure à Firefox et que les extensions de Safari, que j'utilise, remplacent celles existantes sur Firefox (Saft, SafariBlock, Inquisitor).

Ces outils (inspecteur web, console javascript…) sont accessibles à partir du menu Debug dont il faudra autoriser l'affichage par la commande suivante à partir de l'application Terminal : defaults write com.apple.Safari IncludeDebugMenu 1

Par ailleurs, un debugger javascript Drosera est disponible avec les « nightly builds » du webkit.

Pour information, Shiira et Omniweb utilise également le moteur webkit. De même pour les téléphones mobiles, l'iPhone utilise bien sûr Safari 3 mais Nokia utilise également le webkit.

Firefox

Le panda rouge utilise le moteur de rendu Gecko mais sur Mac, il est plus lourdeau que sur PC. Du moins dans sa version 2. A priori la version 3 devrait être mieux intégré à Mac OS X.
La plupart des extensions sont compatibles PC/Mac dont l'indispensable Web Developper. L'extension IETab qui demande la présence d'Interner Explorer ne fonctionne évidemment pas sur Mac...

Deux autres applications utilisant le moteur Gecko existent. Tout d'abord Camino, ce navigateur s'appuie sur le look & feel de Mac OS X et sur les API d'Apple bien plus que Firefox. Ensuite, il y a Flock qui se présente comme le navigateur social et qui permet l'écriture de billets pour les blogs.

Opera

Le navigateur multiplateforme et multisupport Opera est disponible sous Mac sans problème.

I'm be back

pyeb — Fri, 02 Nov 2007 21:09:00 +0100

De retour d'un déplacement professionnel, je vous offre une jolie macro d'une orchidée. Cette fleur délicate s'épanouissait dans le jardin botanique de Deshaies. Sous un temps gris et lumineux, c'est une vraie horreur pour la photographie !

Je réponds donc aux commentaires en souffrance depuis une dizaine de jours. Et je vais commencer à mettre mes thèmes sur le nouveau site de référencement de dotclear tenu par Kozlika, Amalgame et Franck-Paul.

greyOne, photoblog thème

pyeb — Thu, 18 Oct 2007 18:37:00 +0200

Après plusieurs tentatives peu heureuses, j'ai fini par mettre en forme le thème photoblog qui me convient. Un cadre arrondi pour visualiser la photo, un style noir/gris aperture ou lightroom like, un peu web 2.0… Le menu est en javascript mais simple. Pas de librairie complémentaire à charger…

… sauf en utilisant dclightbox ou dcthickbox. Petit détail esthétique qui a son importance, le positionnement des images doit être soit aucun soit centré.

greyOne est un thème liquide de 950 px avec une colonne et peut accepter des photos de 800 px.

Support opérationnel à partir de novembre 2007. :roll:

Télécharger le thème.

Ornamentals thème pour photoblog, partie 2 - intégration des effets jQuery

pyeb — Tue, 11 Sep 2007 20:01:00 +0200

Voici, la seconde partie sur la conception du thème pour Photoblog ornamentals.

Ornamentals est un thème fluide, mais avec #content fixé à 700px, et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.

Télécharger le thème.

Mise à jour du 17/09/07 : compatible avec la pre alpha 5 Mise à jour du 17/11/07 : compatible avec Safari 3

Mise en place de l'effet accordéon dans la barre de navigation

La librairie Accordion permet de n'afficher le contenu que d'un seul élément d'un menu. Pour afficher, le contenu d'un autre menu, il suffit de cliquer sur le titre du menu.

Fonctionnement

Le chargement de la librairie Accordion se fait ainsi dans le fichier _head.html.

<script type="text/javascript" src="tpl:BlogThemeURL/jquery.accordion.pack.js"></script>

Le code jQuery pour l'effet accordéon est le suivant. Il s'applique à toutes les divisions de #sidebar, le titre est une balise h2 et la division ouverte est celle avec une balise h2@ ayant une classe selected. L'élément navigation: true permet une utilisation correcte d'Accordion et des listes, ici ul li@@.

$("#sidebar div").Accordion({
header: 'h2',
active: 'h2.selected',
navigation: true
});

La version 1.4 d'Accordion encadre les différents éléments affectés par la librairie par une balise fieldset. Elle m'a sauvé des griffes d'IE 7 qui ne réagissait pas correctement avec les marges et la balise li. Ainsi, la barre de navigation fonctionne avec des marges de 30px sans bug graphique. Comme tout navigateur normal, respectueux des normes W3C et bien codé devrait fonctionner…

Le contenu de la barre de navigation

La barre de navigation contient les liens vers les catégories, les tags, les archives et les liens. Il y a deux fichiers _sidebar.html et _sidebarnonav.html, le premier contient également les vignettes de photoblog et est utilisé uniquement par home.html et post.html.

Pour plus d'explication sur le fonctionnement des templates, voir le billet.

Pour les fichiers templates html autres que home.html et post.html, la barre de navigation est affiché par l'ajout de tpl:include src="_sidebarnonav.html" dans la division #sidebar.

Mise en place d'Imagebox

Le choix de la librairie Imagebox

Ce thème n'utilise que le javascript jQuery. Il serait utilisable avec dclightbox en modifiant le code jQuery comme l'explique ce billet. Mais le but est de faire un thème tout en un, sans ajout de plug-in et sans intervention de l'utilisateur du blog.

Il existe plusieurs librairies avec effet lightbox en jQuery. La plus connue - et ayant le plus de fonctionnalités - est thickbox mais elle a deux problèmes :

les photos sont ajustées à la résolution de la fenêtre du navigateur et sous windows, le rendu est catastrophique
l'activation passe par la déclaration d'une classe plutôt que par une balise rel.

Imagebox était donc la librairie parfaite, pas de réduction, activation par rel et proche en fonctionnalités de lightbox. Mais Interface, la suite comprenant Imagebox, est quasi non fonctionnelle sous Safari. Comme c'est mon navigateur par défaut…
Le libre étant ce qu'il est, j'ai trouvé une version modifiée qui fonctionne avec Safari. J'ai fait les corrections nécessaires pour compacter la librairie, elle en avait besoin. Mais, il en reste… :roll: La version non compactée est là.

Par bonheur, les effets d'animation d'Interface fonctionne sous Safari.

Fonctionnement

Imagebox fait partie de la suite Interface, il faut charger par morceaux les différents éléments non buggés. Ainsi, il faut charger toutes les librairies à partir du fichier _head.html :

<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/imagebox_pck.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifx.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxblind.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxdrop.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxslide.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/iutil.js"></script>

Les librairies ifx….js permettent les effets, iutil.js sert de librairie ressource. Ce sont des versions compactes pour réduire le poids et le temps de téléchargement.

Ne pas oublier la feuille de style à rajouter, elle est de type media="screen". Elle permet la transparence, le positionnement des éléments et les couleurs du cadre.

@import url(tpl:BlogThemeURL/imagebox/imagebox.css);

Le billet d'une photographie n'est affiché qu'avec les fichiers templates home.html et post.html, le code est donc inséré uniquement dans ses fichiers. Tout d'abord, il est nécessaire de nettoyer le code produit par Dotclear dans une utilisation standard. Vous avez la possibilité de positionner les images comme vous le souhaitez pour utiliser des thèmes différents. Le thème centre toutes les photos donc il faut supprimer les styles supplémentaires permettant l'alignement à droite par exemple.

$(".post-content img").removeAttr("style");

Il faut ensuite affecter l'effet Imagebox à un lien vers l'image. Le nom de l'image sert de titre. Cela n'interfère pas avec les autres liens présents dans le billet.

$(".post-content a").attr({rel: "imagebox", title: "tpl:EntryTitle"});

Ce code fonctionne pour un billet précis donc pour post.html. Pour home.html, il faut choisir, comme précédemment, un billet courant.

<tpl:Entries lastn="1">
$(".post-content a").attr({rel: "imagebox", title: "tpl:EntryTitle"});
</tpl:Entries>

La pagination reste également fonctionnelle. Le code précédent est placé avant la classe .post-content, le suivant servant à initialiser l'effet est placé, lui, après. Les options utilisées comprennent la taille du cadre, le lien vers un gif animé pour attendre le chargement de l'image ainsi que le lien vers l'image d'arrêt de l'effet.

$.ImageBox.init( {
border: 20,
loaderSRC: 'tpl:BlogThemeURL/imagebox/loading.gif',
closeHTML: '<img src="tpl:BlogThemeURL/imagebox/close.gif" />'
});

Pour quitter Imagebox, il faut aussi possible d'utiliser le bouton esc.

Mise en garde

Par contre, Imagebox a un gros défaut, il y a un bug graphique avec Tabs. Il est surtout sensible sous Internet Explorer, les onglets sont au-dessus des photos…

Quelques fioritures

Affichage du nombre de commentaires et de rétroliens

J'ai utilisé les templates de Mirovinben pour afficher uniquement le nombre de commentaires et de rétroliens. Ils sont aussi présent dans moreTpl de Kozlika.

Afficher/Masquer Ajouter un commentaire

J'ai utilisé le même principe que pour AltowithjQuery tout en ajoutant un icône dont l'état est contrôlé par les classes showul et hideul. Par ailleurs, j'ai ajouté la classe h3form au titre de l'ajout de commentaire, division #comment-form, pour que le titre de la zone de prévisualisation, division #pr, ne soit pas pris en considération.

<script type="text/javascript">
$(document).ready(function() {
if ($('#pr').is(':visible')) {$('.hidecomment-form').show()} else {$(".hidecomment-form").hide()};
$("#comment-form .h3form").addClass("hideul").click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp("fast");
$(this).removeClass("showul");
$(this).addClass("hideul");
} else {
answer.slideDown("slow");
$(this).removeClass("hideul");
$(this).addClass("showul"); }
});
});
</script>

Modifier #top

Pour mieux séparer visuellement #top du contenu du blog, il est possible d'utiliser un fond blanc. Dans le fichier style.css, il suffit d'ajouter */ à toutes les lignes /* header blanc ce qui décommentera la règle css. Il faudra également commenter les règles qui fixent un fond noir en supprimant */ à toutes les lignes /* header noir */.

Utiliser des widgets

Le code n'est pas présent mais il est possible d'utiliser des widgets. Il suffit de rajouter le code suivant avant </fieldset> dans les fichiers _sidebar.html et _sidebarnonav.html. N'oubliez pas d'ôter les widgets Liste des catégories, Tags, Liens de navigation, Liens d'abonnement et Liens pour éviter d'avoir les informations en double.

<div id="blognav">
tpl:Widgets type="nav"
</div>
<div id="blogextra">
tpl:Widgets type="extra"
</div>

Ornamentals thème pour photoblog, partie 1 - intégration du thème au greffon Photoblog

pyeb — Fri, 07 Sep 2007 20:20:00 +0200

Avec l'arrivée de Dotclear 2, il est possible de faire du multiblog c'est à dire avoir plusieurs blogs avec une même base de données et la même interface d'administration. Donc au lieu d'un blog fourre-tout, il est facile d'avoir un blog principal et de déporter ces photos sur un photoblog.

Julien Mudry - zeiram sur le forum de Dotclear - avait créé un greffon Photoblog pour DC1. Une alpha pour DC2 est sortie. Petite mise en garde, le greffon est en alpha donc il fonctionne correctement mais il est encore en phase de débugage.

Pour ce thème, plusieurs choix ont été privilégiés :

la mise en valeur des photographies
une interface de navigation réduite
l'intégration d'un effet lightbox

Ornamentals est un thème semi-fluide - le #content fixé à 700px - et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.

Télécharger le thème.

Mise à jour du 17/09/07 : compatible avec la pre alpha 5 Mise à jour du 17/11/07 : compatible avec Safari 3

Utilisation du greffon Photoblog et de ses templates

Conditions d'utilisation du thème avec le greffon

Pour utiliser photoblog, il suffit de choisir une photo dans le gestionnaire de media et l'insérer dans le contenu du billet. Pour le thème, une condition est obligatoire, un lien vers l'image doit être défini. Deux options, soit En tant que lien vers l'image originale en utilisation normale de Dotclear 2 soit En tant que lien vers l'image originale avec effet Lightbox si vous souhaitez utiliser d'autres thèmes utilisant le plug-in dclightbox.

Le choix de l'effet Lightbox n'interfère pas avec le thème, le code est modifié. Comme le choix de l'Alignement de l'image n'interfère pas avec le thème, le code est nettoyé. Les modifications seront présentées dans la partie consacrée à Imagebox.

Il est possible d'intégrer du texte dans le billet. Pour un meilleur rendu graphique du billet, il est nécessaire de séparer la photo soit par deux retours chariot soit en appuyant sur le bouton Passage à la ligne de la barre wiki après le lien vers la photographie.

Mise en place de la navigation dans les billets

Photoblog permet d'afficher les miniatures des photos contenues dans les billets. Ce thème utilise une navigation verticale, au plus, les deux billets suivants et précédents. Le template PhotoblogNav comprend différentes options :

dir permet de choisir la direction des billets : -1 pour précédent, 0 pour billet courant (défaut) et 1 pour suivant
nbEntries permet de choisir le nombre de billets précédents/suivants
reverse permet de choisir le sens de la chronologie : 0 chronologique (défaut), 1 antéchronologique

La photo du billet courant sera affichée en couleur alors que les précédentes et les suivantes seront affichés selon la teinte que vous avez choisi dans photoblog (sépia, argent…). Le template pour afficher le lien vers la vignette est PhotoblogGetThumb, les options sont :

type permet de choisir la couleur : bw pour la teinte (défaut) et color pour la vignette normale
archive, les vignettes pour la navigation ou les archives peuvent être différentes : 0 pour navigation (défaut), 1 pour archive

Les vignettes peuvent avoir des tailles personnalisées, il est donc impossible d'utiliser les feuilles de styles en cascade pour prendre en compte leur dimension. Il faudra utiliser le template PhotoblogThumbSize, les options sont :

size permet de choisir entre : height la hauteur et width la largeur
archive, les vignettes pour la navigation ou les archives peuvent être différentes : 0 pour navigation (défaut), 1 pour archive

Code html
La barre de navigation a ses éléments centrés, cela demande un peu gymnastique avec les miniatures… Présentation du code pour les billets suivants, les commentaires sont inclus dans celui-ci.

<div id="navigation">
…
<tpl:PhotoblogNav nbEntries="2" dir="1" reverse="1">
/*Affiche les deux billets suivants, l'ordre est inversé pour commencer par le plus récent*/
<li class="thumbnail"><p><a href="tpl:EntryURL" title="tpl:EntryTitle"
style="background-image: url(tpl:PhotoblogGetThumb type="bw");
/*Utilisation de la balise style pour introduire des règles css, choix des vignettes de navigation avec teinte*/
width: tpl:PhotoblogThumbSize dimension="width"px;
height: tpl:PhotoblogThumbSize dimension="height"px;">
/*L'espace d'affichage a la taille des vignettes de navigation fixé dans les préférences*/
<img src="tpl:BlogThemeURL/img/spacer.gif" style="width: tpl:PhotoblogThumbSize dimension="width"px;
height: tpl:PhotoblogThumbSize dimension="height"px;"
alt="transparent"/>
/*Image transparente dont la surface d'affichage est de la taille des vignettes, cela est obligatoire pour que l'espace soit réellement affiché*/
</a></p></li>
</tpl:PhotoblogNav>

Pour les billets précédents, le code est le même sauf les options de PhotoblogNav où dir="-1" et reverse="0". Le code suivant est pour la vignette du billet courant, elle est en couleur et occupe l'espace des vignettes.

<li class="thumbnail current"><p>
<img src="tpl:PhotoblogGetThumb type="color"" style="width: tpl:PhotoblogThumbSize dimension="width"px;
height: tpl:PhotoblogThumbSize dimension="height"px;" alt="Miniature de la photo courante" />
</p></li>

Effet teinte/couleur
Les vignettes teintées contiennent deux parties, une teintées et l'autre en couleur, leur hauteur est le double de celle des préférences. Il suffit de jouer sur leur positionnement, bottom/right ou top/left, pour afficher la partie en couleur dans l'espace d'affichage lors d'un survol de la souris.

.thumbnail a {
background-position: bottom right;
background-color: transparent;
background-repeat: no-repeat;
display: block;
}
.thumbnail a:hover {
background-position: top left;
}

Centrage des vignettes
Pour le centrage des vignettes, il a fallu utiliser jQuery. La largeur de la barre de navigation est 250px moins 30px de marge soit 190px utiles. Le centrage des vignettes se fait par l'ajout d'une règle d'espacement - padding - aux éléments de la liste non ordonnée - li.

var padthumb = (190-tpl:PhotoblogThumbSize dimension="width")/2;
$("#navigation ul li").css({padding:"0 "+ padthumb + "px"});

Inclure la navigation dans les billets pour les templates html
La navigation est uniquement présente pour les templates home.html et post.html puisque les autres modes ne sont pas utilisés pour l'affichage d'un billet unique. Le code jQuery est donc ajouté uniquement pour ces pages.
Par ailleurs, PhotoblogNav doit connaître le billet courant. Le fichier post.html est positionné sur un billet précis, ce n'est pas le cas de home.html qui est un mode d'affichage de plusieurs billets. Il est donc nécessaire de préciser un billet courant, ici le billet le plus récent et sans afficher son contenu, dans le fichier home.html. Le fichier _sidebar.html contient le code de la barre de navigation.

<tpl:Entries lastn="1" no_content="1"> tpl:include src="_sidebar.html" </tpl:Entries>

Le fichier post.html ne comprend que tpl:include src="_sidebar.html" dans la division #sidebar.

Catégories, tags et archives

Photoblog permet l'affichage des vignettes pour différents modes. Il est possible d'obtenir toutes les miniatures d'une catégorie, d'un tag ou d'un mois particulier. Voici le code pour category.html et tag.html. Comme précédemment, les dimensions de la division est définie sur celles des vignettes des archives.

<tpl:Entries lastn="49"> <div class="post-thumbnail"> <div class="post-thumbnail-image"><p><a href="tpl:EntryURL" title="tpl:EntryTitle" style="background-image: url(tpl:PhotoblogGetThumb archive="1"); width: tpl:PhotoblogThumbSize dimension="width" archive="1"px; height: tpl:PhotoblogThumbSize dimension="height" archive="1"px;"> </a></p></div></div> … </tpl:Entries>

La taille par défaut des vignettes est 90px x 90px alors que le contenu de la division #content est limité à 700px, cela équivaut à 7 vignettes par lignes avec des marges de 5px. D'où le choix de limiter le nombre maximal de vignettes à 49 par page, cela soulagera le serveur tandis que la pagination permettra de charger les éléments suivants.
Pour archive_month.html, il n'y a pas de limite. En standard, il n'y a pas de pagination.

Pour l'effet teinte/couleur, le code css est identique à celui présenté précédemment. Pour faire flotter les divisions et définir les marges, la règle css suivante est nécessaire.

.post-thumbnail { float: left; margin: 5px; }

La seconde partie porte sur l'intégration des effets javascript jQuery est là.

Ornamentals, mon premier thème pour photoblog (màj : 05/08/07)

pyeb — Tue, 31 Jul 2007 16:46:00 +0200

Ceci est mon premier thème pour photoblog, il utilise le greffon photoblog 0.1 pre-alpha--2--4 de Julien Mudry ou zeiram sur le forum de Dotclear. ~~Pour la présentation de ce greffon, je vous invite à lire le billet de présentation.~~ Petite mise en garde, le greffon est en alpha donc il fonctionne mais il est encore en phase de débugage.

Le thème est, lui aussi, en version beta. Il a été testé sous Firefox 2 (Mac & PC), Safari 2 et 3 (Mac & PC), IE 6 & 7 (après de longues épreuves…) ainsi que sous Opera 9.2 (Mac). En dehors du greffon photoblog, il y a une condition obligatoire pour qu'il soit pleinement fonctionnel : cocher, lors de l'ajout d'une photo, En tant que lien vers l'image originale. Et pourquoi ?

Ornamentals est un thème utilisant la librairie jQuery et les librairies Accordion et imagebox en version modifiée. Pour mettre en valeur les photos, la barre latérale ne montre qu'une division à la fois en accordéeon. Imagebox est la version la plus proche de lightbox en jQuery, il suffit de cliquer sur la photo. D'où la présence d'un lien sur la photo.

Il est possible de mettre du texte dans un billet en plus de la photo. Par contre, il faudra séparer la photo du texte soit par 2 retours à la ligne ou l'utilisation du retour chariot dans la barre d'outil de l'édition de billet sinon cela perd de son charme…

L'explication de texte et débugage pour plus tard. Après quelques retours et autres demandes. Cliquez sur la photo pour accéder au photoblog de test.

màj 05/08/07 : J'ai adapté le thème à la dernière version du greffon et de ses nouveaux templates. La barre de navigation utilise l'effet N&B/couleur, les flux RSS sont envoyés dans le footer et J'ai corrigé quelques bugs.

Télécharger le thème.

Mises à jour mineures et majeures…

pyeb — Sun, 29 Jul 2007 21:27:00 +0200

… sur un air de Led Zep.

Comme le W3C a décidé de modifier son validateur, il fallait mettre à jour tous les templates .html. J'ai donc profité de cette amusement pour ajouter le bouton Envoyer pour les thèmes qui n'est profitaient pas. Tous les thèmes ont été mis à jour.

Moins trivial - enfin presque -, j'ai fait des modifications sur certains thèmes pour qu'ils utilisent les fichiers templates par défaut :

Pastel like et Orangeworld
DoTunes

Plus pervers, les images du thème Lueurs n'avaient pas un fond vraiment noir. J'ai repassé les images à la moulinette et fait quelques ajustements pour préserver les lueurs…

Bientôt quelques amusements en jQuery…

Les thèmes jQuery et dclightbox compatibles

pyeb — Thu, 26 Jul 2007 21:36:00 +0200

Grâce aux commentaires laissés par Gérald, il n'y a plus de conflit entre jQuery et dclightbox. Il suffisait d'utiliser les bons termes pour empêcher les conflits entre les librairies jQuery et prototype…

Dans le fichier _head.html de freshyOne, il faut remplacer les lignes du script par :

jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#frame').tabs({fxSlide: true});
jQuery('a.presearch').click( function() {
jQuery('.menu li').removeClass('tabs-selected');
jQuery('div.fragment').hide();
jQuery('li.first_menu').addClass('tabs-selected');
jQuery('#tabsearch').show();
}); });

Par ailleurs, la version de altowithjquery est la version 1.1 sur le post initial.

Du conflit entre jQuery et dclightbox à la correction d'un bug pour freshyOne et tabsOne

pyeb — Mon, 16 Jul 2007 20:20:00 +0200

Suite aux problèmes d'incompatibilité entre jQuery et dclightbox ainsi que le conflit entre les librairies tabs et imagebox, j'ai fait quelques essais infructueux. La mise en comptabilité entre deux librairies javascript demandent la réécriture de chaque librairie jQuery à chaque mise à jour. Donc, le plus simple est d'utiliser une alternative jQuery à dclightbox mais thickbox réduit les images à la taille de l'écran. La solution pour arrêter l'interpolation est donnée sur le forum de thickbox.

Sinon la dernière mise à jour de tabs ne fonctionne pas avec mes thèmes au moins sous IE 7. Donc, il faut que je plonge dans le code et teste sous IE 6 & 7. Donc, je me pencherai sur le problème quand j'aurai de longues heures devant moi et en utilisant la virtualisation…

Et j'ai fini par trouver un bug au niveau du prélude - Allez à… -, la redirection ne fonctionnait pas depuis que j'avais mis à niveau les deux thèmes freshyOne et tabsOne. C'est déjà ça de gagner.

Thèmes et Dotclear 2 beta 7

pyeb — Sat, 14 Jul 2007 15:11:00 +0200

La migration de mon blog sous DC2 b7, c'est déroulée sans anicroche. J'ai fait une vérification sous Safari et sous firefox, pour les thèmes en jQuery, et il ne semble pas qu'il est de problème.

Le retour de la revanche, une nouvelle librairie pour alto with jQuery

pyeb — Mon, 07 May 2007 21:15:00 +0200

J'ai trouvé une librairie qui fonctionne avec les principaux navigateurs ! C'est curvyCorners for jQuery. Les problèmes avec Safari sont résolus. Le bug avec post-tags sous Opera reste comme avec les autres librairies, cela me laisse perplexe…

En nouveauté, la prévisualisation des commentaires est correcte et la liste des pages connexes s'entoure d'un joli bleu. Sinon, toujours la même punition, je ne sais pas ce que cela donne avec une vidéo flash sous IE 7. A priori, cela devrait fonctionner.

Télécharger alto with jQuery 1.1.

Bréderode, Slottsbacken & Thames Street, pattern is hype

pyeb — Sun, 22 Apr 2007 00:38:00 +0200

En cette journée toute présidentielle, trois nouveaux thèmes avec une barre de navigation à gauche, à droite et au centre - en bas quoi. Surtout rien à l'extrême-droite ni rien sur l'identité nationale. Fini les grands aplats de couleur, le papier peint est à la mode. Nostalgie quand tu nous tiens ! Un cadre tout doré pour encadrer des photos, des tableaux.

Avec les navigateurs modernes - suivez mon regard… -, la transparence laisse paraître les motifs gris et bleus. Le rouge se marrie avec l'orange mais juste dans les rêves éveillés. Sous l'ineffable IE 6, la transparence disparaît et la structure devient fixe mais tout est fonctionnel. Ouf ! Un grand au revoir avant la prison.

Les thèmes sont plutôt adaptés à une résolution 1024 x 768 px même si le 800 x 600 px est fonctionnel.

Télécharger Bréderode, Slottsbacken et/ou Thames Street.

Template pour le plug-in Related

pyeb — Sat, 24 Mar 2007 17:28:00 +0100

En attendant, une version "stable" du plug-in Related, l'équipe de Dotclear propose une version sans support.

Voici, les fichiers templates pour mes différents thèmes ayant des structures différentes du thème par défaut :

123, 123 Blue, 123 Ice
~~tous les pastels like dont Orangeworld~~
Cinema et lueurs
~~doTune~~s
freshyOne
tabsOne

Les autres thèmes utilisent le template de Related. Il suffit de mettre le fichier external.html du thème concerné dans son dossier.

Télécharger l'archive.

Ajout de l'onglet Liens pour les thèmes freshyOne et tabsOne

pyeb — Thu, 22 Mar 2007 22:19:00 +0100

Après m'être amusé avec le plug-in blogrollpage de SiMON, taho m'a donné un moyen simple pour afficher les liens gérés par DC2.

tpl:Blogroll

C'est simple dotclear ! Je vous mets les liens freshyOne et tabsOne.

Modification de la librairie pour le thème altowithjquery, petit test de comptabilité.

pyeb — Tue, 06 Mar 2007 21:42:00 +0100

J'ai fini par utiliser la librairie Rounded Corner pour le thème altowithjquery. Safari a toujours de légers problèmes mais tant qu'on n'utilise pas la dernière version de jquery, c'est vivable…

La principale raison du changement est une plus grande variété d'options. Ainsi, les commentaires sont tout de rose vêtue comme pour la version initiale. Et la taille de l'arrondi est de 10 pixels. Le fichier _head.html ne comprend plus les éléments arrondis pour le mode post, ils ont été introduits uniquement sur le fichier post.html.

Au niveau des css, plusieurs modifications. Tout d'abord, la liste des galeries du plug-in Galery à une jolie couleur jaune. Ensuite, plus important, il est nécessaire d'ajouter un fond blanc sur la balise englobant l'élément avec des coins arrondis. Par exemple, la règle background: #fff; doit être ajoutée à la division #content englobant la division avec une classe .post (la division d'un billet). La règle css se trouve à la ligne 233 ou se situe dans /*Couleurs après la définition de couleurs des éléments avec des coins arrondis. Si vous ajoutez des éléments avec des coins arrondis à la liste, n'oubliez pas d'ajouter les balises englobantes. Sinon, certains de vos visiteurs risquent d'avoir de mauvaises surprises…

Des problèmes avec le plug-in flash étaient survenus sous IE 7 avec la précédente librairie, les vidéos de youtube ne fonctionnaient pas. N'ayant pas ça à la maison ni au boulot. oO) Si une bonne âme pouvait tester - avec la version de jquery de DC et si problème, avec la dernière version 1.1.2 -, cela m'arrangerait…

Télécharger la version modifiée.

NB : sur le billet Deuxième pas avec jquery, la version d'altowithjquery n'a pas été modifiée. Par contre, lors de la visualisation du thème, c'est la version modifiée qui s'affiche.

tabsOne with jQuery

pyeb — Sat, 24 Feb 2007 18:51:00 +0100

tabsOne est un thème 1 colonne utilisant le script jQuery Tabs permettant de substituer une partie de la sidebar par des onglets. Les widgets Recherche, Liste des Catégories, Tags, Liens de navigation, Langues du blog et Liens d'abonnement font partis des onglets. Les autres widgets s'affichent normalement dans le menu latéral après les billets.

Le thème par défaut est anis/noir/orange mais il existe aussi des feuilles de styles en bleu/noir/orange et magenta/noir/anis.

Attention pour assurer un thème valide, il faut absolument que le widget Recherche ne soit pas dans les bandeaux du menu latéral.

Télécharger le thème.

Troisième pas en jQuery avec Dotclear 2, création d’onglets avec effets de transition et intégration au thème Freshy

pyeb — Tue, 06 Feb 2007 11:20:00 +0100

La mise en œuvre d’un menu de navigation par onglet demande de modifier les fichiers de structure de Dotclear 2, cela va permettre un peu de créativité et donc de chambouler la structure classique d’un blog DC2.

Le script jQuery utilisé est Tabs. Deux exemples, tout d’abord celui de l’auteur, exemple des différents possibilités et effets de transition, et, ensuite, celui de Pep tant qu’il ne change pas de thème.

La première partie portera sur la construction et l’intégration d’un menu de navigation par onglet s’insérant dans la structure de Dotclear 2. La deuxième partie s’intéressera à l’imbrication des effets affichage/masquage dans un menu de navigation existant – celui intégré dans le somptueux thème Freshy -, à l’utilisation des templates de Dotclear 2 et à la bataille de la comptabilité avec les principaux navigateurs internet.

Télécharger le thème freshyOne.

Menu de navigation par onglet avec des effets de transition

L’environnement Tabs comprend une fonction jQuery, un modèle html et deux feuilles de styles – l’une standard et l’autre pour Internet Explorer évidemment – pour fonctionner correctement.

La structure html

Le modèle html se découpe en deux parties : les titres des onglets et le contenu des onglets. Une division encadre la structure html, un id, tabs, lui est affecté et servira à appeler la fonction jQuery. Une liste non numérotée est utilisée pour les titres des onglets, la classe anchors lui est appliquée pour gérer précisément cette liste avec les feuille de styles.

<div id="tabs">
<ul class="anchors">
<li><a href="#tabs1">Section 1</a></li>
<li><a href="#tabs2">Section 2</a></li>
<li><a href="#tabs3">Section 3</a></li>
</ul>

Chaque élément de la liste pointe vers la division du contenu d’un onglet, ex : <a href="#tabs2">.
A chaque division du contenu d’un onglet, la classe fragment est ajoutée. L’affichage/masquage de chaque contenu des onglets est géré par le script Tabs.

<div id="tabs1" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div> <div id="tabs2" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="tabs3" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>

Le chargement du script et des feuilles de styles

Le fichier _head.html contient les éléments suivants.

<style type="text/css" media="screen">
@import url(tpl:BlogThemeURL/style.css);
</style>
<style type="text/css" media="print"> @import url(tpl:BlogThemeURL/../default/print.css);
</style>

Pour ajouter Tabs dans un thème, le fichier _head.html doit être soit créé en insérant le code ci-après soit modifié en remplaçant le code précédent par le code suivant.

<style type="text/css" media="screen">
@import url(tpl:BlogThemeURL/style.css);
@import url(tpl:BlogThemeURL/tabs.css);
@import url(tpl:BlogThemeURL/tabs-ie.css);
</style>
<style type="text/css" media="print"> @import url(tpl:BlogThemeURL/../default/print.css);
</style>
<script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/jquery.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
});
</script>

Les feuilles de styles pour Tabs sont importées puis la librairie jQuery et le script Tabs.
L’appel du script Tabs se fait sur la division des onglets ici avec l’id tabs avec le code $('#tabs').tabs();.

Les princiales options du script jQuery Tabs

{fxSlide: true} (effet de transition)
L’onglet précédent monte puis l’onglet activé descend.
{fxFade: true} (effet de transition)
L’onglet précédent s’éclaircit puis l’onglet activé apparaît.

Ces deux efets peuvent être combines entre eux.

{fxSpeed: 'slow'/'normal'/'fast'/’0 à 1000’}
Cette option permet de définir la vitesse des effets, elle peut être définie selon la rapidité ou en millisecondes.

{fxShow: {height: 'show', opacity: 'show'}} et {fxHide: {height: 'hide', opacity: 'hide'}} (effet de transition)
Effet d'animation qui réduit les onglets et éclaircie ou opacifie les onglets.

Choisir l'onglet sélectionné par défaut Par défaut, le premier onglet, ici la Recherche, est sélectionné. Il suffit d'indiquer le numéro d'onglet à sélectionner par défaut. Par exemple, l'onglet tabs3 sera l'onglet par défaut, le code sera $('#tabs').tabs(3);. Le nombre est celui de la position de l'onglet. Le code avec l'application d'effet est $('#tabs').tabs(3,{fxFade: true});

freshyOne, jQuery et template Dotclear 2

L’utilisation et l’installation du script jQuery Tabs sont assez simples. Son imbrication dans un menu sophistiqué comme celui de Freshy percute les comportements erratiques des différents navigateurs. Le principal point noir reste Internet Explorer mais pas que lui…

Au travail ! L’utilisation du script Tabs permet de se passer du menu latéral, les templates de DC2 permettent d’obtenir le code html des principaux widgets à l’exception notable des Liens. C’est un choix radical de navigation. Ainsi, le menu de navigation comprend la recherche, les catégories, les tags, les archives, les langues et les flux de syndication.

Modifier les fichiers template

Le contenu du fichier _head.html reste le même, il faut juste remplacer $('#tabs').tabs({}); par $('#frame').tabs({fxSlide: true});.

Le fichier _top.html comprend :

<div id="top">
<h1><span><a href="tpl:BlogURL">tpl:BlogName encode_html="1"</a></span></h1>
</div>
<div id="header"> </div>
tpl:include src="_menu.html"
<p id="prelude"><a href="#main">tpl:lang To content</a> |
<a href="#frame">tpl:lang To menu</a> |
<a href="#search">tpl:lang To search</a></p>

La structure html des onglets se trouve dans un nouveau fichier _menu.html. Tout d’abord, le code pour le titre des onglets sans template DC2 mais avec l’imbrication du menu de navigation de Freshy.

<ul class="menu">
<li class="page_item"><a class="first_menu" href="#search">Recherche</a></li>
<li class="page_item"><a href="#categories">Catégories</a></li>
<li class="page_item"><a href="#tags">Tags</a></li>
<li class="page_item"><a href="#archives">Archives</a></li>
<li class="page_item"><a href="#languages">Langues</a></li>
<li class="last_menu"><a class="last_menu" href="#rss">RSS</a></li>
</ul>

La classe page_current_item gérant l’onglet sélectionné de Freshy a été substituée par celle, classe tabs-selected, du script Tabs. Et a contrario, la classe anchors de Tabs a été remplacée par menu de Freshy.

Le but est de perfectionner l’affichage des onglets en l’internationalisant et en n’affichant que les titres utilisés. Comme exemple, les templates Categories seront utilisés, les autres templates fonctionnent sur le même principe (Tags, Archives, Langues, Syndication).

tpl:lang Categories affiche Catégorie dans la langue par défaut du blog.
<tpl:Categories> est un fonction déclarative pour l’affichage des éléments des catégories. Le code html avec cette fonction template d’affichage est répété pour chaque catégorie.
<tpl:CategoriesHeader>, en-tête, et <tpl:CategoriesFooter>, pied de page, bloque l’effet de boucle de la fonction précédente, leur utilisation est essentielle pour l’affichage d’un titre ou l’insertion de la balise html ul.

<tpl:Categories>
<tpl:CategoriesHeader><li class="page_item">
<a href="#categories">tpl:lang Categories</a></tpl:CategoriesHeader>
<tpl:CategoriesFooter></li></tpl:CategoriesFooter> </tpl:Categories>

Pour les titres des onglets, la boucle ne doit pas fonctionner, il n’y a donc pas de code entre l’en-tête et le pied de page. L’onglet Categorie ne s’affichera que si des billets comportent des catégories.

Catégories, Tags et Langues ne seront affichés que s’ils sont utilisés sur le blog, de même pour le contenu des onglets. La présentation est donc impeccable, cela a aussi le mérite de réduire l’envoi de données. Utile pour avec la limitation des hébergeurs.
De ce fait, la Recherche, Archives et RSS sont toujours présents.

<tpl:Categories>
<tpl:CategoriesHeader><div id="categories" class="fragment"><ul></tpl:CategoriesHeader>
<li><a href="tpl:CategoryURL">tpl:CategoryTitle</a></li> <tpl:CategoriesFooter></ul></div></tpl:CategoriesFooter>
</tpl:Categories>

Les liens vers les catégories font parti de la boucle.

Faire fonctionner le prélude pour la recherche (ajout)

L'appel de la div #search avec un lien ne permet pas de modifier son état de visibilité. C'est le script Tabs qui affiche/masque les différents contenus des onglets. Tabs possède une fonction triggerTabs() pour visualiser un onglet mais le renvoi sur une ancre, ici #search, ne fonctionne pas. Il faut donc faire cela à la main…
Mais jQuery est là ! Dans _head.html, il suffit alors d'ajouter après $('#frame').tabs({fxSlide: true}); :

$('a.presearch').click( function() {
$('.menu li').removeClass('tabs-selected');
$('div.fragment').hide();
$('li.first_menu').addClass('tabs-selected');
$('#search').show(); });

Son action enlève le style sélectionné des titres d'onglets et leur contenu n'est plus visible puis le premier titre, ici Recherche, est sélectionné et son contenu affiché. Ces modifications surviennent lorsqu'un lien avec la classe presearch est cliqué. Dans le fichier _top.html, la classe presearch est ajouté (<a class="presearch" href="#search">tpl:lang To search</a>).

Les options de couleurs et d'image

Le choix de l'image pour le top et de l'éléménet sélectionné pour le menu de navigation vient de mon appétit sans fin de l'orange... Mais, un autre monde est possible.
Le thème Freshy comprend plusieurs images pour le top, j'en ai retenu 9 qui sont dans le dossier img/headers de freshyOne. Les éléments sélectionnées peuvent avoir une couleur anis, cyan, bleu, violet et magenta et sont le dossier img/menu2. Il faut modifier dans la feuille de style style.css, l'élément #header en changeant le nom du fichier header_image7.jpg :

background: transparent url(img/headers/header_image7.jpg) no-repeat top left;

Pour les éléments sélectionnés du menu de navigation, tout d'abord, il faut modifier dans le fichier style.css .menu li.page_item.tabs-selected, .menu li.first_menu.tabs-selected a et .menu li.last_menu.tabs-selected a en changeant le nom du fichier :

background:url(img/menu2/menu_selected_orange.png)

Ensuite, il faut modifier dans le fichier tabs-ie6.css .menu li.tabs-selected a en changeant le nom du fichier

background:url(img/menu2/menu_selected_orange.png)

Les problèmes avec les navigateurs

Internet Explorer 6 et 7 ne possèdent pas les mêmes tares pour la compréhension des standards web. Quand on règle le problème pour IE 6, IE 7 peut mal réagir et vice versa.
Tout d'abord le débordement de IE, il peut apparaître avec de l'italique ou une mauvaise prise en compte des espacements et autres marges. Un overflow: visible; sur les division concernées règle les problèmes sans affecter les autres navigteurs. Ouf !
Entre Freshy et Tabs, le mélange entre l'affichage sur une ligne du titre des onglets, le survol des liens sous IE et l'alignement vertical font bugger IE 6 et 7. Pire, IE 6 a du mal avec les éléments ayant plusieurs classes. Donc, j'ai réglé le problème en modifiant le fonctionnement de menu de navigation de Freshy et en utilisant ça, juste pour les IE hors 7, à ajouter dans _head.html :

Les problèmes de débordements de Safari et Opéra entre le titres des onglets et leur contenu ont été réglés en réduisant la taille des éléments et en ajoutant de l'espace supplémentaire.

Le thème freshyOne est compatible avec Firefox 2, IE6, IE 7, Safari 2, Opera 9.1 et Konqueror 3.5.