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

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 ;-)

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

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