Effet d'arrondi

Il faut modifier le fichier _head.html pour inclure le jQuery, celui contenu dans le thème default - et le script Curvy Corners - inclus dans le thème altowithjQuery.

<script src="tpl:BlogThemeURL/../default/js/jquery.js" type="text/javascript"></script>
<script src="tpl:BlogThemeURL/jq-corner.js" type="text/javascript"></script>

En terme de feuille de style, les aplats de couleurs sont définis pour chaque zone à arrondir comme le contenu des billets (.post) ou les listes des catégories (#sidebar .categories). Sur chacune de ces zones, le padding a été porté à 10px (padding: 10px;).

J'ai essayé d'optimiser l'effet arrondi car ce script est très consommateur de temps processeur, c'est un euphémisme… Il vaut mieux limiter le nombre de billet ainsi que le nombre de widget. De même, lors de recherche d'éléments de feuille de style, jQuery trouve plus rapidement les id - comme #top - que les balises html - comme div - que les classes - comme .links. Il est préférable d'utiliser #sidebar .links que .links.

Pour appliquer le même effet sur plusieurs zones, les tableaux sont acceptés ("elem1,elem2,…,elemn"). Le code, avec ouverture du DOM, donne.

<script type="text/javascript">
$(document).ready(function() {
$("#sidebar ul,#comments dd,#pings dd,#comment-form .hidecomment-form,#attachments ul,#content .post,#content .content-inner ul, body.dc-archive-month .content-inner, body.dc-tags ul.tags").corner();
});
</script>

Pour les arrondis, c'est déjà fini. Il y a plus à écrire dans la feuille de style que pour le code javascript ! Les arrondis débordent sur les éléments les précédents et les suivants, il est donc nécessaire de modifier l'espacement entre les différents éléments.

Une bannière changeante

Le thème alto utilise le php pour modifier la bannière du blog. Avec Dotclear 2, il est nécessaire de passer par un template et un fichier _public.php pour le thème.

Le thème contient 3 bannières que j'ai renommé round0.jpg, round1.jpg et round2.jpg. Dans un fichier _top.html, un script javascript de base est suffisant comme

<script type="text/javascript">
<!--
document.write("<img src='tpl:BlogThemeURL/img/round" + parseInt(Math.random()*3) + ".jpg' alt='banner' />");
-->
</script>

Mais, le script jQuery sera dans le _head.html.

Tout d'abord, il est nécessaire d'ajouter comme première ligne au fichier _top.html.

<div id="banner">&nbsp;</div>

Dans la feuille de style, il est créé l'espace nécessaire à l'image de fond puis le titre du blog est positionné sur la bordure noire des bannières et doit apparaître après le chargement de la bannière (z-index). Une classe par image est créée (round(n)).

#banner {
	display : block;
	position : absolute;
	background-color: transparent;
	width: 723px;
	height: 150px;
	top : 69px ;
	left : 79px ;
	z-index: 1;
	padding: 0;
	}

.round0 { background : transparent url(img/round0.jpg) no-repeat top left; }

.round1 { background : transparent url(img/round1.jpg) no-repeat top left; }

.round2 { background : transparent url(img/round2.jpg) no-repeat top left; }

#top h1 {
	position : absolute;
	top: 165px;
	left: 83px;
	z-index: 2;
	}

Pour fonctionner, le code pour l'affichage de la bannière doit être positionner avant l'effet d'arrondi. Il est donc positionné entre la déclaration du code javascript au DOM et le script sur les parties s'affichant après le _top.html. Le nombre aléatoire s'appuie sur le même code javascript standard, la fonction jQuery addClass permet d'ajouter une classe à la division #banner. Comme tout javascript, il est possible de constituer les éléments avec des variables et concaténation.

var round = parseInt(Math.random()*3);
$('#banner').addClass('round'+round);

Des fioritures pour l'affichage d'un billet

Le formulaire des commentaires occupe un espace important. Il est facile de l'afficher/masquer en se basant sur l'exemple précédent. Pour une meilleure utilisation, le fichier _post.html par défaut sera modifié. Un div (.hidecomment-form) est ajouté encadrant les deux fieldset de la division #comment-form ainsi le titre Ajouter un commentaire (h3) servira de bouton pour afficher/masquer le formulaire.
Comme le code ne concerne que l'affichage d'un billet et post.html est déjà modifié, le code est ajouté à ce fichier avant la division #comment-form.

<script type="text/javascript">
$(document).ready(function() {
$(".hidecomment-form").hide();
$("#comment-form h3").click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp() } else {
answer.slideDown();
}
});
});
</script>

La division contenant le formulaire des commentaires est cachée. Elle s'affiche/masque après un clic que Ajouter un commentaire avec un effet descendre/monter. Cela pourrait être suffisant mais lors d'une prévisualisation, le formulaire reste cacher et il faut de nouveau cliquer pour modifier ou pour envoyer le commentaire.
Je fais une vérification pas très orthodoxe de la présence de la division #pr. Je vérifie si elle est visible alors le formulaire des commentaires est affiché sinon il est masqué. #pr est préféré à .comment-preview pour la rapidité comme expliquer plus haut. La ligne de masquage du formulaire est remplacé par

if ($('#pr').is(':visible')) {$('.hidecomment-form').show()} else {$(".hidecomment-form").hide()};

Conclusion

Le thème altowithjquery est donc « kitté » à mort.

Avec un core 2 duo sous Mac OS X et un serveur local, 3 à 4 secondes sont nécessaires pour charger la bannière et obtenir les effets d'arrondis pour 20 billets et 8 listes dans la barre de menu. Avec un hébergement 1and1 et 9 effets d'arrondi, le chargement s'effectue en 4/5 secondes. Dans l'ordre de rapidité arrive Opera - quasi instantané -, Safari - bizarrement ! - et Firefox.

Avec un bon vieux Pentium III à 866 Mhz et windows 2000, on se traînaille à 6/7 secondes en accès sur ce site. La lenteur se voit car la bannière et les coins arrondis se font en même temps sous IE.

Visualiser le thème.