Aux couleurs de l'automne

vendredi 9 novembre 2007

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é.

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 :

.entry /* = le corps du texte du billet, sur la page d’accueil et ailleurs /
{
/
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;</p>

/* Taille de la police */
font-size: 1.1em;

/* Classique justification …*/
text-align: justify;
}