Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

21.05.2010

Personnaliser l'apparence du moteur de recherche Hautetfort

Nous avons vu comment rechercher dans un blog Hautetfort, voyons maintenant comment le faire avec du style.

L'austérité de l'apparence par défaut ne doit pas vous rebuter. Google lui-même a fait sa place en proposant une mise en forme réduite à presque rien. Cela ne nous empêche pas de vouloir un module qui soit plus conforme à l'image de notre blog. Nous pouvons nous contenter de modifier la feuille de styles, ou aller plus loin en récupérant le code de l'élément de colonne pour modifier les textes, voire remplacer le bouton par une image.


Modifier la feuille de styles

Les styles appliqués au moteur de recherche ne commande normalement que la largeur du champs de saisie (110 pixels) et du bouton de validation (40 pixels). Le code par défaut de la feuille de styles d'un template de base :

#box-search form input.search_button {
width: 40px;
}
#box-search form input {
width: 110px;
}

Je vous conseille d'inverser l'ordre des deux éléments pour garder à l'esprit la cascade des styles. Ce qui est appliqué au formulaire s'applique au bouton, sauf style contraire. Dans le code suivant, une couleur de fond a été appliqué au formulaire, mais une image a été appliquée en plus au bouton, masquant la couleur de fond visible dans le champs de saisie.

rechercher-1.png#box-search form input {
width: 110px;
background-color: #DDB866;
}
#box-search form input.search_button {
width: 40px;
background:url("http://geemee.hautetfort.com/images/aspire/content-bg.jpg") repeat scroll 0 0;
}

Vous pouvez modifier l'apparence du champs en supprimant les bordures, soit effectivement avec border:0px; ou visuellement en attribuant la couleur de fond pour préserver l'alignement (ce qui est le cas ci-dessous). Pour l'exemple nous passeront celle du bouton en pointillés.

rechercher-2.png#box-search form input {
width: 110px;
background-color: #DDB866;
border:1px solid #FFFFFF;
}
#box-search form input.search_button {
width: 40px;
background:url("http://geemee.hautetfort.com/images/aspire/content-bg.jpg") repeat scroll 0 0;
border:1px dotted #663300;
}

Modifier le code s'avère nécessaire si l'on veut changer le texte du bouton de validation et ou le changer pour une image.

 

Récupérer le code du moteur de recherche

Il y a la méthode « faites le vous-même » qui consiste à :

- activer l'élément de colonne « Rechercher » dans PRÉSENTATION, Contenu des colonnes
- cliquer sur Configuration avancée, puis sur
- Modifier le template à droite de Modèle de la colonne gauche ou Modèle de la colonne droite
- identifier la portion de code commençant par <form method="post" action="{$blog.url}" et finissant par </form>
- copier cette portion, et la coller dans un éditeur de texte (genre bloc note ou notepad).

Sinon, vous pouvez copier le code ci-dessous :

<form method=" action="{$blog.url}" name="search" onsubmit="return false;"><input type="text" name="keyword" value="" />
<input type="button" name="submit" value="{t}Ok{/t}" onclick="if(this.form.elements['keyword'].value)window.location = '{$blog.url}search/'+this.form.elements['keyword'].value;return false;" class="search_button"/>
</form>

Vous devez faire une première modification avant de créer un élément de colonne personnalisé, au niveau de la troisième ligne. En fait, le « moteur » crée une adresse avec le mot clé que vous entrez, mais le déplacement du script va « provoquer » une adresse du type http://geemee.hautetfort.com/{$blog.url}search/zorglub ce qui ne fonctionne évidemment pas. Le code utilisable est donc :

form method=" action="{$blog.url}" name="search" onsubmit="return false;">
<input type="text" name="keyword" value="" />
<input type="button" name="submit" value="{t}Ok{/t}" onclick="if(this.form.elements['keyword'].value)window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="search_button"/>
</form>

Maintenant, dans PRÉSENTATION, Contenu des colonnes, vous pouvez Ajouter un élément personnalisé, et en l'occurrence Ajouter le code HTML / Javascript.


Que pouvez-vous personnaliser dans le formulaire du moteur de recherche ?

• Si vous voulez un contenu par défaut dans le champs de saisie, il faut modifier la deuxième ligne comme suit :

<input type="text" name="keyword" value="Rechercher...">

Pour que ce texte par défaut disparaisse d'un clic de l'utilisateur, il faut compléter le code de la façon suivante :

<input type="text" name="keyword" onBlur="if (this.value == '') {this.value = 'Rechercher...';}" onFocus="if (this.value == 'Rechercher...') {this.value = '';}" name="keyword" value="Rechercher..." />


• Si vous voulez changer le texte du bouton « Ok » par « Et hop! » (c'est un exemple) vous modifiez la troisième ligne pour avoir :

<input type="button" name="submit" value="Et hop!" onclick="if(this.form.elements['keyword'].value)window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="code><p><input type=">


• Si vous voulez une image pour remplacer le bouton « Ok » par une image.

- Créez une image d'une vingtaine de pixels de haut maximum.
- Téléchargez là sur votre blog via TABLEAU DE BORD , Fichiers, Répertoire images/ puis Ajouter un fichier
- Modifiez la troisième ligne comme suit (en admettant que l'image s'appelle bien bouton-ok.gif et qu'elle se trouve à l'emplacement spécifié :

<input type="image" name="submit" src="http://votreblog.hautetfort.com/images/bouton-ok.gif" onclick="window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="code><p><input type=">

Le code ci-dessous a permis de générer la capture ci-contre. Vous noterez que les styles ont été passés en direct plutôt que d'être appelés par la feuille de styles. Il n'est pas toujours facile d'obtenir un résultat satisfaisant compte tenu des styles déjà en place. Les alignements sont à surveiller de près entre les différents navigateurs. Je vous accorde que remplacer un bouton Ok par une image Ok...

rechercher-3.png<form method=" action="{$blog.url}" name="search" onsubmit="return false;">
<input type="text" name="keyword" onBlur="if (this.value == '') {this.value = 'Rechercher...';}" onFocus="if (this.value == 'Rechercher...') {this.value = '';}" name="keyword" value="Rechercher..." / style="background-color: #EFE6C5; border:1px solid #DDB666;height:14px;">
<input type="image" style="vertical-align: top;" name="submit" src="http://geemee.hautetfort.com/images/aspire/ok-button.gif" onclick="window.location = 'search/'+this.form.elements['keyword'].value;" class="search_button"/ >
</form>

Vous n'avez plus qu'à réviser vos propriétés de bordure et d'arrière-plan en Css, puis faire une belle image pour avoir un formulaire qui vous convienne sur la forme.

La prochaine fois nous verrons comment ajouter et personnaliser un moteur de recherche Google.

17.11.2009

Personnaliser "Tags populaires" pour accéder à tous les tags dans la page "toutes les archives"

Cet élément de colonne par défaut propose les 10 tags les plus populaires dans votre blog. Pour accéder à tous les autres, il faut se rendre dans la page "Toutes les archives". Voyons comment favoriser un accès direct à l'ensemble des tags. Il nous faudra d'abord avoir des "ID" clairs dans le modèle "Toutes les pages", puis établir des liens hypertextes.


Personnalisons le modèle de page "Toutes les archives"

Il nous faut être précis, car plusieurs modèles de page comportent le mot "archives". Par ordre d'apparition à l'écran, dans la liste des modèles accessibles en configuration avancée, on a "Modèle de la page archives", "Toutes les archives" et "Modèle de la page toutes les archives".

C'est bien la seconde qui nous intéresse. On y trouve toutes les périodes d'archivage des notes, toutes les catégories, et tous les tags.

Lire la suite

16.10.2009

Personnalisez l'affichage de vos listes de liens en proposant une description dans une infobulle

Personnalisez l'affichage de vos listes de liens en donnant quelques informations aux visiteurs qui s'apprêtent à les suivre. Révision d'une note publiée le 27/01/2009.

Parmi tous les trucs qui m'énervent, il y a le fil rouge des fromages fondus du bovin souriant, et l'huile des sardines en boîte bien sûr, mais aussi les cases de formulaire inutiles. Quand vous créer une liste de liens avec le module Hautetfort, et que vous faites une description appliquée, aussi pertinente que concise... Elle ne sert à rien. Elle est dans le formulaire, vous retrouvez la description dans le module d'administration, mais pas moyen d'afficher sur la partie publique du blog. Ou alors, et c'est possible, je ne comprend rien à rien.

Je vous propose de rendre cette description disponible dans une infobulle, cette zone qui s'affiche au survol d'un lien hypertexte. C'est déjà en place pour la liste de liens « Échangeur », mais vous pouvez voir un module de test ici.

Lire la suite

10.10.2009

Changer l'affichage des dernières notes

Personnalisons l'affichage du module "Notes récentes", en modifiant le nom du module, le nombre d'items, en précisant la date de publication, et en finissant par un lien avec les archives. Et tout ça en une note (mise à jour d'une note déjà révisée le 2 avril 2009).

La mise à jour de la note consacrée à la personnalisation des éléments de colonne m'a obligé à revoir celle-ci pour vous proposer un code "facilement" exploitable, et légèrement modifié. J'espère que c'est maintenant le cas.


Mais où est passé "Notes récentes" ?

Sur ce blog, effectivement, il n'y en a plus. On trouve à l'emplacement qui était le sien, un module nommé "Denières notes", qui affiche les 8 dernières notes, datées, et propose un accès aux archives.

J'ai dû chercher le code dans le modèle de page de la colonne où il était installé, pour trouver quelque chose comme :

Lire la suite

06.10.2009

Personnalisez les éléments des colonnes sans (trop) intervenir dans le code

Il n'est pas toujours nécessaire de passer en configuration avancée pour modifier le fonctionnement des modules situés dans les colonnes de votre blog. À condition de disposer du code adéquat, vous pouvez utiliser la gestion du "contenu des colonnes". (Mise à jour d'une note du 2 avril 2009)

J'ai déjà tenté de vous dissuader de modifier le code des éléments de colonne, en intervenant directement dans le code Html, des modèles de page « colonne de droite » ou « colonne de gauche ». Cela fonctionne correctement, mais toute intervention via le module d'administration de « Contenu des colonnes » effacerait vos interventions précédentes.

Je vous recommande donc d'utiliser l'administration de « Contenu des colonnes », accessible sans passer en configuration avancée, en réservant cette dernière à la récupération du code.

Comment récupérer le code d'un élément de colonne ?

Vous trouverez de nombreux exemples de code à récupérer dans mes notes, ce n'est peut-être pas la source la plus fiable, mais c'est celle que je connais le mieux. J'essaie de mettre la version d'origine avant mon code personnalisé, ce qui vous évite de passer en configuration avancée.

Pour récupérer le code d'un élément qui vous intéresse, il faut qu'il soit activé sur votre blog, puis passer en configuration avancée pour aller chercher dans le code des modèles de page « colonne de droite » ou « colonne de gauche ». Si vous avez peur de vous tromper, rien ne vous empêche de ne temporairement laisser activé que l'élément qui vous intéresse. Pour mémoire, la petite croix à côté de « colonne de droite » ou « colonne de gauche » ne fait que désactiver un élément. Pour « supprimer », il faut vraiment cliquer sur ce mot dans la liste des éléments, et H&F vous demande de confirmer.


Comment intégrer un code personnalisé.

Le principe est assez simple, il faut ajouter un élément personnalisé de texte, et y coller le code. Je vous le redis, les instructions spécifiques à la plateforme Hautetfort doivent être placées dans un élément « texte » et non « code Html / Javascript ».

Rappel : La mise à jour du contenu des colonnes réinitialise totalement le code Html de vos colonnes. Sauvegardez d'abord votre code personnel si vous en avez déjà.

  1. Dans l'administration, allez à Présentation / Contenu des colonnes

    341434024.jpg

  2. En bas de page, vous trouvez "Ajouter un élément personnalisé", choisissez « Ajouter un texte »

    Hautetfort_ajouter_element_personalisé_texte_code_personnalise.png
  3. Donnez un nom dans "Nom de l'élément"

  4. Dans "Contenu de l'élément" collez le code

  5. Selon le cas choisissez d'afficher ou non le "Nom de l'élément"

  6. Selon le cas choisissez d'aligner ou non le contenu du module

  7. Ces deux dernières options seront facile à modifier.

  8. Cliquez sur [Ajouter cet élément]

  9. Vous avez un nouvel élément dans votre liste, il faut choisir entre Ajouter à gauche ou Ajouter à droite (si vous avez les deux colonnes de côté).

  10. Remontez en haut de la page pour régler la position de l'élément dans la colonne

  11. Cliquez sur [Mettre à jour ces informations] sous la liste des éléments

Voilà, vous avez un nouvel élément dans votre liste, qui fait référence à votre CSS. Pensez à désactiver l'ancien en cliquant sur la petite croix que l'on voit à côté du contenu de chaque colonne.

 

 

01.05.2009

Mettre un sommaire "À propos" sans composer en html

Vous avez suivi les conseils de la note de Gee Mee pour Personnaliser les éléments des colonnes sans intervenir dans le code, ou Gérer le contenu des colonnes de votre blog, et vous avez tout de même rencontré des difficultés ? Votre page en est toute tourneboulée, ou votre module apparaît avec une vilaine mise en forme ? C'est sans doute que le html que vous avez copié n'est pas au point !

Si votre besoin est simplement de proposer un sommaire de certaines notes ou liens permanents, alors voici une astuce toute simple pour contourner le problème... sans doute connaissiez-vous déjà la solution, sans avoir pensé à l'utiliser !

Image 6.pngPrenons un exemple : la forme du module "À propos" ne vous convient pas.

Vous voulez qu'il apparaisse comme les autres modules, et non pas avec ces deux mots si discrets que l'on remarque à peine. C'est moche, n'est-ce pas ?

De plus vous voulez que cette présentation renvoie vers deux pages :

- A propos de ce blog
- A propos de l'auteur

Si comme moi vous êtes nul(le) pour rédiger du HTML, vous hésitez à vous lancer car alors il vous faut rédiger des "a href" et peut-être même (et justement je n'en sais rien !) des "li" pour faire apparaître votre sommaire correctement avec des puces. Boouh, trop de boulot, trop de rigueur d'écriture... Alors comment faire simple ?

Et bien, réfléchissez un peu... Haut et fort ne propose-t-il pas déjà une solution clé en main ?


Lire la suite

14:33 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (6) | Tags : personnaliser, module, colonne, liste | |  del.icio.us | | Digg! Digg |  Facebook

13.03.2009

Afficher une lettrine en début de note, grâce à la feuille de styles (révisée)

Mise à jour du 17 mars : L'affichage automatique de la lettrine par les CSS est neutralisé en attendant que l'interprétation du code par les navigateurs soit homogène. Autant dire que nous ne serons pas loin des calendes grecques. Pour la révision de cette note, j'ai triché.

J'ai retiré <div class="texte_note"> du modèle de la page, et sans rétablir ma feuille de style dans son état préalable, je suis intervenu dans le code Html de la note. J'ai encadré le premier paragraphe de <div class="texte_note"> et </div>.

 

*** Note d'origine ***

Je vous ai déjà donné une méthode en novembre dernier, en voici une autre, et vous jugerez de celle qui vous convient le mieux. Peut-être aucune.

Dans une note qui commence à sérieusement dater, à l'échelle de la péremption ultra-rapide des informations communiquées sur un blog, je vous disais comment afficher une lettrine avec un tableau. Ce n'était pas forcément la méthode la plus aisée, puisqu'il fallait rentrer dans le code HTML. Au titre des avantages, on peut tout de même retenir que l'on peut utiliser une image de fond pour « enluminer ». La méthode requérant votre intervention, il vous est loisible de ne presque jamais vous en servir, ou de multiplier les lettrines dans un même texte, fut-ce au dam des typographes patentés (qui en ont vu d'autres). Mais du passé...

Tabula rasa
Dans la méthode actuellement utilisée sur ce blog, le traitement est automatique, puisque que l'on se repose sur les propriétés CSS. C'est tout ou rien. On tâtonne pour trouver un résultat satisfaisant, mais après c'est très confortable.

Je vous donne le code avant quelques explications
Dans le modèle de la page « lien permanent » j'ai modifié les lignes suivantes :
<h3 id="p1"><span>{$post.title}</span></h3>
<div class="posttext">
<div class="posttext-decorator1">
<div class="posttext-decorator2">
{if $post.extended}<div class="introductory">{/if}
{$post.source|trimlonglines:60}
{if $post.extended}</div>{/if}
{if $post.extended}<a id="more"></a><br />{$post.extended}{/if}
<div style="clear:both;"></div>
</div>
</div>
</div>


pour ne changer que cela :
<h3 id="p1"><span>{$post.title}</span></h3>
<div class="texte_note">
<div class="posttext-decorator1">
<div class="posttext-decorator2">


Dans la feuille de styles, après l'élément .content ul li on trouve dorénavant les instructions suivantes :
/**************************************************/
.texte_note p {
padding: 5px 28px 5px 28px;
margin: 5px 0px 5px 0px;
font-size: 1em;
line-height: 1.25em;
}
.texte_note p + p {
margin: 0;
}
.texte_note p:first-letter { /*** Pour la 1ère lettre du 1er § ***/
font-size: 3.5em; /*** La taille est multipliée par 3,5 ***/
line-height: 1em;
font-weight: 400; /*** "graisse" normale, donc maigre ***/
float: left;
margin: 0;
}
.texte_note p:first-line { /*** Pour la 1ère ligne du 1er § ***/
font-weight: 800; /*** "graisse" accentuée ***/
}
.texte_note p + p:first-letter { /*** Pour la 1ère lettre des autres § ***/
font-size: 1em; /*** La taille revient à la normale ***/
line-height: 1.25em;
float: none;
margin: 0;
}
.texte_note p + p:first-line { /*** Pour la 1ère ligne des autres § ***/
font-weight: 400; /*** La graisse revient à la normale ***/
}

/*** à partir du code http://jontangerine.com/silo/typography/p/ ***/

/*****************************************************/


Comment ça marche ?


L'élément « texte_note » donne des indications pour p et p+p ; en fait pour le premier paragraphe, puis pour les suivants.
Le code utilise les « pseudo-formats » CSS first-letter et first-line pour appliquer des styles particuliers à la première lettre et à la première ligne du premier paragraphe (p), puis les corrige, rétablit la normale, en appliquant d'autres styles aux paragraphes suivants (p+p).

Mais la méthode a ses limites. En rétablissant la « graisse » de la première lettre, de la première ligne, des paragraphes suivants, le code retire le gras que vous avez éventuellement appliqué en début de paragraphe dans l'éditeur de note. Et pourtant me direz-vous, il y a bien ici des « sous-titres » avec un début de paragraphe en gras ? Oui mais, j'ai triché, il y a un retour à la ligne avant la première lettre. Et si je ne le fais pas...

Voilà ce que cela donne.

C'est pire encore avec Internet explorer qui semble ne pas accepter l'argument (p+p), et donc ne pas savoir distinguer le premier paragraphe des suivants.

Je m'en contente, considérant même que ce retour à la ligne forcé contribue à la bonne mise en forme du texte. Mais c'est une affaire de goût. Le code d'origine comportait une identation (un retrait positif en première ligne), mais cela rendait visible cette astuce du retour à la ligne pour récupérer le gras dès le premier caractère. Il y a peut être une solution plus élégante techniquement, et il ne faut pas hésiter à critiquer tant que l'on apporte une solution.

Sauf à vouloir faire afficher un autre lettrine (et sous IE seulement), il ne faut utiliser que des sauts de lignes (Maj+Entrée). C'est finalement trop pénible à l'usage de vérifier tous les sauts de lignes, aussi vais-je ce code dans la CSS mardi prochain avant de trouver une solution acceptable.

Et merci CUI ?

Merci à Comme Une Image d'avoir éclairé ma lanterne en me donnant l'adresse du site Jon TANgerine. Il est exclusivement anglophone, ce qui peut-être un avantage quand on maîtrise mal l'italien [;-)], et vous donne ici douze modes de mise en forme "typo" de paragraphe.

08:20 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : personnaliser, blog, hautetfort, lettrine, css | |  del.icio.us | | Digg! Digg |  Facebook

Afficher une image d'arrière plan en mosaïque, en motif (révisée)

Parce que vous ne trouverez pas forcément d'image à la taille idéale, et notamment parce que la zone à occuper n'a pas une surface constante, vous pouvez utiliser une image en motif, en mosaïque. Cette note publiée le 3 février a été mise à jour après le re-design de ce blog.

La partie centrale de ce blog, comme la colonne de droite sont habillées par des images en mosaïque, notammment. Il s'agit d'un motif, une petite image répétée autant de fois que nécessaire. Pour la colonne de droite, il s'agit de celle-ci :

body-bg.jpg

Dans la feuille de style

Vous trouverez dans le fichier les paramètres de la colonne de droite. Le code est maintenant le suivant :

#right {
overflow: hidden;
float: right;
width: 225px;
background: #ddb866 url(images/aspire/body-bg.jpg);
color: #000000;
}

La répétition d'une image en arrière-plan est activée par défaut. Il suffit donc de donner l'adresse de l'image pour qu'elle soit utilisée en motif. Dans ce code, il s'agit d'une adresse "relative" au domaine en cours en l'occurence geemee.hautetfort.com. Le code avec l'adresse absolue serait background: #ddb866 url("http://geemee.hautetfort.com/images/aspire/body-bg.jpg");

Il vous faut donc d'abord télécharger votre image-motif via Tableau de bord / Fichiers dans le répertoire images ou dans un nouveau dossier comme celui que j'ai nommé aspire.

Après vous modifiez la feuille de styles via Présentation / Configuration avancée / Feuille de styles : Modifier le template.

Trop facile non ?

30.01.2009

Afficher une image d'arrière-plan fixe

Je vous rassure, c'est un discours sur la méthode... pas sur le résultat. Un jour j'aurai le temps d'avoir du goût.

Vous en avez assez des ces aplats de couleur ? Vous voulez de l'image, et de la belle, pour arrière-plan ? Voici comment faire.

Je compte sur votre goût et votre débrouillardise personnelle pour trouver une belle image, que vous utiliserez sans violer son auteur, notamment dans son droit moral. Avant de partir à sa recherche, vous devrez savoir si vous souhaitez un motif répétitif (comme pour un papier peint avec raccord) ou une image unique et suffisamment grande. Et suffisamment grande c'est combien ? C'est... une certaine taille.

Je vois bien que cette première réponse vous déçoit, mais analysons ensemble les données du problème. Vous pourriez considérer que la bonne taille, c'est la votre. Celle de votre écran je veux dire. Je ne suis pas loin de penser que vous avez raison. Mais réfléchissez tout de même à la taille des écrans de vos visiteurs, qui disposent d'affichages différents du votre. Une personne qui visiterait mon site avec une résolution de 800x600 pixels ne verrait pas la moitié de l'image car elle mesure 1280x800 pixels. Si mon image est trop petite, le visiteur verra du blanc à droite et en dessous. Pour une image fixe, il faut bien faire un choix qui ne peut pas contenter tout le monde.

Pour une image répétée, ce problème n'existe pas, puisque précisément, l'image est répétée sur toute la surface affichée. C'est pourquoi nous voyons maintenant l'image fixe, et bientôt l'image répétée (comme dans la colonne de droite).

Afficher une image fixe en arrière plan de la page.

Une fois l'image choisie et modifiée par vos soins, vous la chargez sur le blog via Tableau de bord / Fichiers / Images / UI1. Vous n'avez pas de dossier UI1 ? Mais créez le donc pour y enregistrer les différentes images de "User Interface 1". Vous pouvez l'appeler Guernica ou Catherine_de_medicis si vous voulez, cela vous regarde.

Ensuite, vous allez modifier la feuille de style, en allant sur Présentation / Configuration avancée / Feuille de styles et Modifier le template.

RAPPEL : Il n'y pas de sauvegarde de la feuille de style, soyez prudents.
- Copiez le contenu et enregistrez le dans un fichier en mode texte avec l'extension .CSS
- Commentez vos interventions dans la feuille de style en utilisant les balises /* commentaire */
- D'ailleurs plutôt que de supprimer les paramètres existants, vous les encadrerez de balise de commentaire pour les neutraliser. Il vous sera plus facile de faire marche arrière.

Vous pouvez accéder à la feuille de styles pour geemee.hautetfort.com en cliquant ici.

Il faut intervenir sur l'élément "body", celui qui se situe au plus haut niveau.

Le code de body est maintenant :

body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #FFFFFF;
/*** mon arrière plan >>> ***/
background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") /** repeat-y 0% 0% **/ ;
background-repeat: no-repeat ; background-attachment:fixed;
/*** <<< mon arrière plan ***/
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

background-color: #FFFFFF; indique la couleur à afficher, sous l'arrière-plan. C'est utile quand l'image est plus petite que l'espace d'affichage.

background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") indique l'adresse de l'image d'arrière-plan.

/** repeat-y 0% 0% **/ est contradictoire avec notre objectif de non répétition, je l'ai donc mis en commentaire.

background-repeat: no-repeat ; impose la non répétition de l'image, même si elle devait être trop petite.

background-attachment:fixed; permet de fixer l'image, elle ne défilera pas avec le texte.

Seul le code entre /*** mon arrière plan >>> ***/ et /*** <<< mon arrière plan ***/ a été ajouté.

Le code de #container est devenu :

#container {
line-height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
text-align: left;
/***neutralisation >>***
background: #aaaaaa url("http://static.hautetfort.com/backend/graphics/design/preview/set8/cab22a/f_general.gif") repeat-y 0% 0%; *** << neutralisation ***/
width: 988px; /* IE 5 */
}

J'ai neutralisé l'arrière plan de #container, pour que l'image f_general.gif ne vienne pas recouvrir l'arrière-plan.

Et voilà ! La prochaine fois, nous verrons l'image répétée, ou en mosaïque.

09.01.2009

En mâchant du template : Home

Vous êtes passés en configuration avancée ? Vous allez manger du template et de la feuille de style. Quelques modifications anecdotiques pour commencer.

J'ai préparé un document à télécharger qui contient le contenu initial du template "page d'accueil" et une forme de visualisation de la structure de la page d'accueil. On voit nettement deux éléments pour la bannière supérieure, un bloc pour chaque colonne et un bloc pour la partie centrale.

Je ne rentrerai pas maintenant dans le détail de chacun des éléments. Pour l'instant, appréciez (si vous le pouvez) l'imbrication de chacun des éléments, et le soin que vous devrez apporter à vos interventions.

Vous constaterez qu'il y en a déjà eu sur ce blog.

Dans le template, modifier le favicon.

La procédure est très bien expliquée sur le Blog Haut&Fort dans cette note que je vous incite à lire. Une fois l'icône préparée, l'intervention dans le template est mineure.

À la quatrième ligne, il faut remplacer ce qui est surligné <link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />,  par l'adresse de l'image que vous aurez téléchargée via Tableau de bord / Fichiers / Images. En l'occurence, la ligne est devenue <link rel="icon" href="http://geemee.hautetfort.com/images/favicon1.ico" type="image/x-icon" />. Et un jour j'en mettrai une jolie.

Dans la feuille de styles, modifier la police principale

C'est une intervention mineure dans la feuille de style avec de grandes conséquences pour le blog.

Je n'ai rien contre la police Arial, précisément parce qu'on en dit rien, aussi lui préféré-je Verdana. Normalement, on peut personnaliser son modèle standard et changer l'ordre des familles de polices, mais avec moi, cela ne voulait pas fonctionner. Une fois en configuration avancée, il "suffit" de modifier la feuille de style.

Dans la classe "body", la première, j'ai modifié l'ordre des polices utilisées pour que Verdana passe en premier
body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #aaaaaa;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

L'un des principes des CSS, c'est la mise en cascade, la hiérarchie descendante des intructions. Modifier "Body" c'est modifier tout le blog, sauf instruction contraire. Comme le passage en Verdana modifiait la description du blog "Modeste contribution à l'émancipation technique du mardi et du vendredi à 12h30" en provoquant un retour à la ligne, j'ai modifié le style concerné.

Je suis donc intervenu sur la classe suivante en ajoutant l'instruction surlignée qui remet la police Arial en première position.
#banner h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
padding: 10px 25px 0px 25px;
}

En analysant le document à télécharger, vous comprendrez plus vite que c'est bien sur cette classe qu'il fallait intervenir.

Ces quelques interventions illustrent juste le principe, je vous proposerai bientôt des modifications plus ciblées et détaillées. D'ailleurs, avez-vous des priorités ?