Un message rapide pour présenter la nouvelle interface graphique du site Valhalla, aux couleurs de l’automne. Le changement a du bon, même si le précédent thème graphique, tout en bleu, était vraiment magnifique. D’ailleurs, il n’est pas exclu qu’il réapparaisse cet été. Mais en attendant, les dominantes seront marron et orange foncé.
Le Dock
Vous avez sûrement remarqué la barre de navigation dans la partie gauche de la page. C’est une imitation du Dock de Mac OS X. Je la trouve particulièrement bien réalisée, même si j’aurais préféré que la légende de l’icône active s’affiche à côté d’elle et non à un endroit fixe, prédéterminé. Pour tous ceux qui voudraient mettre en place sur leurs propres sites un tel menu, le code source (distribué en GPL) est disponible en téléchargement ici : télécharger XMenu.
Le thème vient avec quelques icônes toutes prêtes. Sachez cependant que vous devrez éditer votre fichier header pour y ajouter quelques lignes :
Rajoutez d’abord ceci entre les balises head:
<!– XMENU –>
<link type="text/css" href="<?php echo get_settings('home'); ?>/CHEMIN VERS XMENU/xmenu/xmenu.css" rel="StyleSheet">
<script type="text/javascript" src="<?php echo get_settings('home'); ?>/CHEMIN VERS XMENU/xmenu/xmenu.js"></script>
<!– /XMENU –>
Il faudra ensuite modifier la balise body :
<body onload="xmenu_init();">
Le menu lui-même est contenu dans un tableau. On peut ajouter le nombre d’icône que l’on veut, mais attention à ne pas dépasser la hauteur de la fenêtre. Il est possible d’afficher une bande colorée sous les icônes (xmenu_bg) ; elle est ici désactivée. Dans l’exemple ci-dessous, une seule icône est présente ; vous pouvez copier-coller pour en ajouter d’autres :
<!– XMENU –>
<!– <div id="xmenu_bg"> –>
<table id="xmenu_menu"><tr><td>
<!–XMENU Images –>
<!– Articles essentiels –>
<a href="<?php echo get_settings('home'); ?>http://mon site….">
<img src="<?php echo get_settings('home'); ?/>/CHEMIN VERS XMENU/xmenu/images/mon_image.png" alt="Légende de cette icône" onmouseover="xmenu_hover(this)" onmouseout="xmenu_unhover(this)" width="32" >
</a>
<!– /XMENU Images –>
</td></tr></table>
<p id="xmenu_p" ><span style="display:none" id="xmenu_text"></span></p>
<!– /XMENU –>
Suite aux messages ci-dessous, voici quelques modifications ultérieures :
1) Pour que le dock s’affiche plus vite, il faut réduire la valeur de la propriété ms dans le fichier xmenu.js :
ms = 5; // avant, c’était à 50…
2) Pour déplacer la légende des éléments du Dock, c’est plus compliqué. J’ai bien essayé de placer la légende à côté de l’icône survolée, mais pas moyen… ce n’est pourtant pas compliqué en théorie, mais Safari 3 refuse obstinément de me donner la position de l’icône survolée (et je ne comprends pas pourquoi…). Que ce soit avec offsetTop/offsetLeft ou avec style.top/style.left, Safari ne veut pas retourner la bonne valeur. Bref, j’ai abandonné cette méthode et j’ai fait dans le bourrin (de chez bourrin).
- Dans le fichier xmenu.css, retirer tout le contenu de #xmenu_p et les lignes “position”, “top” et “left” de xmenu_p span.
- Placer xmenu_p, qui devient un div, en haut du tableau qui contient les icônes :
<tr><td>
<div id="xmenu_p" ><span style="display:none" id="xmenu_text"></span></div><br />
<!–XMENU Images –>
Les polices
Le logo Valhalla est écrit dans la police First Order.
Le corps du texte est écrit en Trebuchet MS (par défaut), Verdana (si précédente absente), Tahoma (si précédente absente), Arial (si précédente absente).
La règle CSS du corps de texte est la suivante :
{
/* On pourrait faire un roman sur cette propriété… on va aller à l’essentiel
1) Elle fonctionne sans unité, comme multiple de la hauteur de ligne
c-à-d 1.5 représente 150% de la hauteur “classique”
2) Elle fonctionne parfaitement sous Firefox MAIS…
3) Elle dépend de la police utilisée !!!!
=> avec la police Georgia, p. ex. Firefox et Omniweb refusent catégoriquement
de modifier la hauteur des lignes, même si l’on met une valeur gigantesque.
En revanche, Safari prend très bien en compte cette propriété.
Si l’on change la police, pour utiliser Verdana, Firefox prend de nouveau cette
propriété en compte, même pour de très petites valeurs (1.0).
Certains ont reporté qu’avec les polices Times, FF réagit à partir de 2em et pas
en dessous.*/
line-height: 1.5;
/* Taille de la police */
font-size: 1.1em;
/* Classique justification …*/
text-align: justify;
}
{ 7 comments… read them below or add one }
alors là bravo
les couleurs pastels, la feuille et le menu dock!
chapeau bas
C’est peut-être un peu moins beau que “l’été”, mais c’est très doux et très lisible.
C’est quand même beaucoup moins sobre que l’ancien thème.
Je préfère largement l’ancien, celui-là n’est pas pratique avec le dock qui “grossit” lentement, les titres qui s’affichent là où on ne pense pas à regarder, les polices grasses…
On peut cliquer sur les icônes du Dock pendant qu’elles sont en train de s’agrandir, pas besoin d’attendre. En revanche, c’est vrai que la légende apparaît en haut de l’écran et que ce n’est pas très pratique. Pour ce qui est des polices, je réfléchis à quelques changements pour, en effet, les rendre un peu moins grasses (mais je ne pense pas toucher à la taille, je trouve qu’en plus gros, c’est plus lisible). En tout cas, ce thème est pour l’automne. Cet hiver, il y en aura un autre. Il faudra donc patienter un peu
Hop, police changée : Lucida Sans, taille 1.1 em, interligne 1.7
La police rend déjà mieux.
).
Au contraire, moi je préfère quand c’est écrit petit (comme avant quoi
En fait, je critique le Dock surtout parce qu’on ne voit que les images (et qu’elles deviennent énormes quand y’a la souris dessus). Il faut mettre la souris dessus pour savoir de quoi ça parle, et à mon goût ce n’est pas pratique.
Dans la foulée, une petite mise à jour de WP 2.1 vers WP 2.3. Leur processus de mise à jour s’améliore… il n’y a plus besoin de désactiver les plugins pour les réactiver ensuite.