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.

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.

 

 

Afficher le début d'un commentaire, dans la liste des derniers publiés

Hautetfort ne donne que l'auteur du commentaire et le titre de la note concernée. Nous ne sommes pas obligés de nous en contenter. (Mise à jour d'une note du 13 mai 2009)

Quand d'aucuns toujours ministres vous inciteraient à prendre le vélo parce que l'essence est trop chère, comme d'autres vous inciteraient à manger des brioches quand le pain viendrait à manquer, il est temps de se prendre en charge pour ne pas se laisser faire par le système. Modestement, et avec gentillesse, bousculons les habitudes de notre blog pour afficher le début des commentaires.

Cette note a été mise à jour...

D'abord publiée le 20 janvier 2009, cette note a été mise à jour le 2 avril, pour conseiller le blogmestre avisé de prolonger sa lecture par la note détaillant la création d'un nouvel élément. Une véritable refonte a été faite 13 mai, après la mise en place du "fil de discussion" dans les commentaires.

Si le code de l'élémént "Commentaires récents" n'a pas réellement évolué, une mise à jour semble s'imposer pour ceux qui l'avaient personnalisé. C'était l'occasion de réécrire le code et la note qui suivent.

Lire la suite

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

29.04.2009

Modifier la hauteur d'une colonne pour qu'elle "descende"

Depuis l'antiquité, nous sommes sensibles à l'harmonie des temples grecs, maisons carrées, peristyles et autres colonnades. Alors comment supporter que les colonnes de son blog ne fassent pas ce que l'on souhaite ?

C'est que, ce ne sont pas réellement des colonnes, comme on peut en avoir dans un tableau. Dans un modèle, vous avez la division "droite", la division "centre" et la division "gauche". Peu importe que vous ayez deux divisions seulement, ou dans un ordre personnalisé, dans le code vous retrouverez les trois dénominations que j'ai utilisé. Mais en anglais.

La hauteur d'une division est fonction de son contenu, c'est souvent la partie centrale la plus fournie, qui semble entrainer, les autres. Mais c'est une illusion. La division la plus "haute" détermine la hauteur du conteneur (container), qui lui comprend toutes les divisions. Chaque division a une hauteur propre. D'habitude, cela ne se voit pas. Si vous appliquez une couleur, ou un motif de fond, cela vous apparaîtra.

C'était la question de Thierry du blog Citrouille (Cette fois-ci les enfants qui se perdent ici, DOIVENT se retrouver là-bas avec leurs parents, ou tout adulte argenté pourvu qu'il soit bien intentionné). La colonne de gauche n'est pas assez haute à son goût, l'image de fond ne se poursuivant pas jusqu'en bas du conteneur.

 

Lire la suite

10:31 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (3) | Tags : modifier, colonne, module, hauteur | |  del.icio.us | | Digg! Digg |  Facebook

31.03.2009

Gérer le contenu des colonnes de votre blog

Dès la configuration standard, vous pouvez ajouter, supprimer, déplacer des modules au sein des colonnes de votre blog. Prenez garde à ce que le passage en configuration avancée ne vous fasse pas reculer.

C'était annoncée dans la note de la semaine dernière (Comment utiliser les modèles de ce blog ?), on ne badine pas avec les colonnes. Sans vous avertir, le mode avancé vous fait prendre le risque d'une réinitialisation involontaire, sinon catastrophique. Le mode avancé vous permet d'intervenir dans le code de chacune des colonnes, ce que je faisais régulièrement, et notamment pour faire en sorte que chaque module soit entouré d'images qui simulent une feuille parcheminée passablement cornée dans les angles. Oui, je sais, pour l'instant, il manque une image pour finir le tour. Au moins les utilisateurs d'IE ont-ils un rendu similaire à celui des utilisateurs de FF (mais c'est mieux avec FF).

HautetFort_Présentation_configuration_avancée.jpgBref, j'intervenais dans le code via Présentation / configuration avancée / modèle de la colonne... (capture de gauche) Au lieu d'utiliser la gestion proposée via Présentation / Contenu des colonnes (capture de droite) de l'administration du blog. Ce n'était pas une bonne idée. Le code Html du modèle de la colonne... est le résultat direct de vos interventions dans Présentation / Contenu des colonnes. Changez une virgule, et le code Html du modèle de la colonne est réinitialisé, effaçant toutes vos interventions directes dans le code.

C'est ainsi que l'activation de la Newsletter de ce blog vendredi soir a complètement cassé la mise en forme, rétablie lundi (j'étais dans mon jardin). Heureusement, j'avais une sauvegarde et un site de test, qui m'ont permis de récupérer la situation. Quand je vous dis de sauvegarder...

HautetFort_Présentation_Contenu_des_colonnes.jpgDans toute la mesure du possible donc, la personnalisation des colonnes doit être effectuée via Présentation / Contenu des colonnes. Les interventions directes dans le code doivent être exceptionnelles, et soigneusement sauvegardées pour pouvoir être rétablies. Au moment d'adopter le modèle d'un autre blog, cela vous paraîtra donc plus long, car il faudra faire module par module, au lieu de copier en une fois le contenu du code Html de la colonne. Mais ce sera plus sûr et plus souple.

Me reste à savoir comment je vais réussir à mettre l'inscription à ma lettre électronique dans mon "parchemin"...

11:22 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (6) | Tags : contenu, colonne, code, module, propriétés | |  del.icio.us | | Digg! Digg |  Facebook