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.

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

Nos comments

L'actualité de la plateforme, c'est la personnalisation des commentaires de l'auteur du blog...

Je le sais bien, et je m'en suis emparé comme tout le monde. Pour aller plus loin, il faut me laisser le temps de comprendre le code. Disons, un certain temps... Puis je vous proposerai de vous l'approprier à votre tour.

À bientôt

08:54 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (4) | Tags : commentaires, personnalisé | |  del.icio.us | | Digg! Digg |  Facebook

27.03.2009

Andy s'en soucie-t-il ?

Après la disparition de la pub, voici que mes notes maladroitement tronquées dans la page d'accueil laissent la place à l'officiel format de note longue... Et pourquoi pas une newsletter ?

Je vous dois la vérité, c'est l'une des heureuses conséquences de la note d'Alexandra de dimanche dernier. Il y eut bien sûr la satisfaction narcissique de se voir mettre en avant quelques instants en très bonne compagnie, comme un fugace quart d'heure de Warhol alors que je préfère Andy.

Mais il y a surtout le cadeau de cet abonnement « pro » pour m'encourager dans le partage d'informations, de conseils qui permettent d'exploiter au mieux la plateforme, et de s'y sentir toujours mieux sans avoir des œillères pour autant. Un vrai chouette cadeau dont j'ai bien l'intention de profiter, pour que vous profitiez aussi des fonctionnalités disponibles.

Les aigris et les grincheux penseront que je me suis fait acheter, peu m'importe, je renonce à tenter de les convaincre. Qu'ils pensent seulement un instant à la situation qui sera la mienne si Hautetfort revient sur sa décision.

J'invite toutes les bonnes volontés à participer à la vie de ce blog, à faire en sorte que cet espace soit offert à la communauté de ceux qui bidouillent pour eux et pour les autres. Que chacun se sente libre de proposer une note, un tutoriel, une astuce, toute contribution sera accueillie avec bienveillance (à condition qu'elle n'en manque pas elle-même).

Et je profite d'ailleurs de l'occasion pour demander à l'auteur de Kezablog de se manifester (on peut le faire discrètement en récupérant mon adresse de courrier électronique). Je ne crois pas abuser en affirmant que Lavande et moi-même regrettons de voir que nos initiatives auraient pu en dissuader d'autres.

À moi de remercier Alexandra et l'équipe, à vous tous d'imaginer que vous pourriez ici faire des essais, des tentatives, partager, sans que cela ne nuise à vos propres projets.

Parlons-en !

11:27 Écrit par Gee Mee dans 1ère visite | Lien permanent | Commentaires (6) | Tags : hautetfort, kezablog | |  del.icio.us | | Digg! Digg |  Facebook

25.03.2009

Sources : Opened

J'ai le plaisir de vous confirmer que les soucres de ce blog vous seront intégralement offertes, contrairement à ce que j'avais dit .

L'équipe du blog HautetFort, tout en restant propriétaire du code, m'a autorisé à publier celui des modèles de page dans son intégralité. Du moins, celui auquel on accède via son interface de blogmestre. C'est une marque de confiance et d'intérêt que j'apprécie.

Je vais donc publier tous mes modèles, maintenir l'accès aux images, et vous tenir informés des évolutions de la CSS. Cela ne se fera pas en un jour, parce que c'est beaucoup de travail, mais je tiens à ce que vous puissiez profiter de ce que je fais. J'aimerai bien que cela puisse donner envie à d'autres "blogmestres" de partager leurs découvertes et bricolages...

Que ce joyeux petit chambard trouve son origine dans une note du 22 mars n'est pas pour me déplaire ;-)

24.03.2009

Redimensionner plusieurs images par lot et par le haut.

C'est une chose fastidieuse que de changer la taille de plusieurs images. Vous êtes pourtant bien obligés de passer par là pour préparer un album, ou une galerie que vous mettrez en ligne.


Voici une solution remarquée dans le magazine SVM du mois d'avril : Image Resizer.

Ce petit logiciel gratuit pour MS Windows permet, entre autre choses :

  • de traiter les images à l'unité ou par lot,
  • de modifier les originaux ou de créer des copies,
  • de renommer les fichiers avec une syntaxe paramétrable (date, séquence, etc.),
  • d'appliquer des effets (sepia, bouton...).

 

C'est presque de la pub, mais c'est toujours mieux qu'une note qui dit que je suis en retard...

12:00 Écrit par Gee Mee dans Boîte à outils, Traitement d'image | Lien permanent | Commentaires (0) | Tags : image resizer | |  del.icio.us | | Digg! Digg |  Facebook

22.03.2009

Feuille de styles de ce blog

26/03 : Première mise à disposition

Ce qu'il reste à faire (notamment) :

  • Calage des éléments graphiques dans les colonnes : manque le liseré du bas.
  • Gestion des rendus Firefox et IE, pour l'instant équivalent, sans le liseré du bas.
  • Gestion de l'arrière-plan général pour l'en-tête et la partie centrale

Lire la suite

Open source

Cette note a été contredite le 25 mars, et c'est tant mieux, par celle-ci : Sources opened.

J'ai créé ce blog dans l'intention de partager mes découvertes et mes progressions parfois chaotiques. Je m'apprêtais à rendre le code intégral des modèles Hautetfort disponible...

Et puis je me suis ravisé. Il n'est nulle part indiqué que cette source soit open. Vous devrez donc vous contenter de récupérer des portions de code dans les notes. Pour accéder à la feuille de styles, c'est plus simple, puisqu'il suffit de se rendre . Et pour toutes les images, vous trouverez un tableau plus bas dans cette note.

Il ne faut donc pas attendre que j'ai terminé mes modifications pour vous proposer un paquet prêt à l'emploi. Vous n'êtes de toutes façons intéressés que par des fractions de code (dans le meilleur des cas), et vous n'avez pas l'intention de faire une copie conforme de ce blog (vous pourriez).
Pour tous les modèles de page de mon blog, je vais préparer un tableau de mes avancées qui vous permettra de mieux suivre les évolutions.


Sauvegardez !

Avant de copier tout ou partie d'un de mes modèles dans l'un des vôtres, sauvegardez-le ! En particulier les modèles des colonnes droite et gauche, ainsi que la feuille de styles qui ne disposent pas de sauvegarde de l'original par Haut&Fort.

Si vous venez à peine de vous tromper, essayez CTRL+Z, pour annuler votre dernière action.

 

Bonne chance


Liste des images de l'interface est ici

12:30 Écrit par Gee Mee dans Modèles, images et CSS | Lien permanent | Commentaires (1) | Tags : template, modèle, css | |  del.icio.us | | Digg! Digg |  Facebook

20.03.2009

Jamendo vous remercie... graduellement.

Alors que l'on n'entend parler que de riposte, la plateforme de musique en ligne gratuite marque sa différence et lance le remerciement gradué.


Je ne tenterai pas de refaire ici le débat de la loi Hadopi. Il existe de nombreuses sources d'informations, dont celle-ci qui ne saurait être taxé de gauchisme avancé, de parti-pris de Nerds boutonneux et fanatiques. Sans rien retirer du sérieux des sources les plus engagées, le dossier Hadopi de SVM est assez complet et équilibré. Tout en étant résolument engagé. Pour le fun, vous pourrez vous renseigner ici à propos de la solidarité,  nécessaire et sans faille, avec le gouvernement à laquelle ont été rappelés récemment les jeunes de l'UMP.

Lire la suite

10:43 Écrit par Gee Mee dans Musique en ligne | Lien permanent | Commentaires (0) | Tags : jamendo hadopi, riposte graduée, remerciements gradués | |  del.icio.us | | Digg! Digg |  Facebook

15.03.2009

Fin provisoire de la lettrine

L'affichage d'une lettrine en premier paragraphe de note est plus complexe qu'il n'y paraît, aussi le code actuellement en place sera supprimé mardi 17 mars.

En attendant je prie les utilisateurs d'Internet explorer d'accepter mes excuses pour leur faire subir une mise en page assez peu élégante. De fait, ce site est "optimisé" pour Firefox 3, mais je ne compte pas laisser les utilisateurs d'IE avec ces défauts d'affichage. Il n'y en a pas que sur la page "lien permanent" d'ailleurs, et les raisons n'en sont que plus obscures.

Disons que cette expérience illustre une fois de plus la compatiblité relative des différents navigateurs avec des codes un peu plus avancés que d'habitude.

Cela étant, je n'abandonne pas.

17:30 Écrit par Gee Mee | Lien permanent | Commentaires (0) | |  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