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.

30.12.2009

Comment utiliser les modèles de ce blog ?

Vous pouvez utiliser les modèles, les images, et la CSS de ce blog. Encore faut-il le faire avec un peu de méthode, si vous n'êtes pas très aguerri(e)s au "blogmastering". Bien entendu, cette méthode est valable pour tous les blogs HautetFort qui mettraient leurs sources à disposition. [Mise à jour d'une note publiée le 27 mars 2009]

Ces conseils paraîtront superflus aux pros du code, mais ils seront utiles à ceux qui veulent tenter l'expérience tout en craignant que cela ne soit trop compliqué. Ne faites cependant rien avant d'avoir lu cette note dans son intégralité, car celle-ci ne sera pas suffisante.

Les modèles disponibles sont les suivants :
- Modèle de la page acceuil
- Modèle de la page archives
- Modèle de la page toutes les archives
- Modèle de la page lien permanent
- Modèle de la page commentaires
- Modèle de la page catégories
- Modèle du calendrier

Le modèle du pied de la note est dans la note "Modifier le pied de la note, avec ou sans les mains." D'autres modèles de page existent, mais répètent pour l'essentiel ce qui est disponible par ailleurs, ou comportent encore trop de défauts. Cela étant, je rejette rarement les requêtes polies.

Je vais détailler plus bas la méthode pour tester chez vous l'un de mes modèles, mais d'abord le rappel d'un principe...

Lire la suite

01.12.2009

Créez une feuille de styles dédiée à l'impression

Nous avions abordé le principe dans « Pourquoi et comment adapter des feuilles de styles pour l'impression et les mobiles ? », voyons maintenant le procédé qui permettra d'imprimer sans faire mauvaise impression.

Copions d'abord la feuille de styles courante

Lire la suite

15:17 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, media, imprimer, print, style | |  del.icio.us | | Digg! Digg |  Facebook

27.11.2009

Pourquoi et comment adapter des feuilles de styles pour l'impression et les mobiles ?

Vous considérez peut-être avoir assez de difficultés comme cela avec une feuille de styles pour ne pas vous ennuyer avec plusieurs. Avez-vous essayé d'imprimer l'une de vos notes, d'en lire une sur un écran de téléphone portable ? Si certains services existent pour vous faciliter la tâche, vous pouvez tenter d'améliorer les différents rendus de votre blog par vous-même. Voyons d'abord le principe.

 

Lire la suite

09:50 Écrit par Gee Mee dans Configuration avancée, Modèles, images et CSS | Lien permanent | Commentaires (2) | Tags : css, media, imprimer, handheld, iphone, blog, mobile | |  del.icio.us | | Digg! Digg |  Facebook

12.05.2009

Intégrer le style citation à la feuille de styles

Après avoir jouer à être "border line", puis avoir exploré les espaces intérieurs (et au-delà), nous en sommes arrivés à l'intégration du style citation dans la feuille de styles. Et nous allons enfin aborder la logique de la montre carrée...

Voilà où nous avions laissé notre style citation :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

Lire la suite

10.05.2009

Un style pour les citations avec "margin" et "padding"

Créer un sytle pour les citations nous a déjà permis de revenir sur les bordures, c'est au tour des espaces intérieurs et extérieurs... Voire entre les deux.

J'ai ajouté une couleur de fond à notre style, pour que la démonstration à propos des espace soit plus visible. Cela nous donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="background-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

Le texte colle à la bordure de gauche, ce n'est pas très joli, et la citation se distinguerait plus encore du corps de texte si nous pouvions ajouter un décrochage. Ces deux paramètres se gèrent indépendamment.

Lire la suite

10:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, margin, padding, citation, style | |  del.icio.us | | Digg! Digg |  Facebook

06.05.2009

Un style pour les citations avec la propriété « border »

Dans un contexte toujours plus tendu autour de la propriété intellectuelle, il conviendrait de ne pas négliger la bonne présentation des extraits de texte auxquels vous souhaitez réagir, ou que vous utilisez pour illustrer votre propos.

La mise en forme des citations fait parfois partie des styles par défaut proposés dans les éditeurs de note des plateformes de blog, mais pas chez Hautetfort pour l'instant. Comme nous avons créé un style pour le code, nous allons en créer un autre pour les citations en abordant en trois notes : les bordures, les marges, et cette logique bizarre de montre carrée.

En CSS, "border" vous permet de créer une bordure autour de votre texte, vous pouvez très simplement l'utiliser en style attaché à un paragraphe de cette façon.

Exemple de texte avec "bordure".

<p style="border-style:solid; border-width:1px; border-color:#000;">Exemple de texte avec "bordure".</p>


Style de trait, épaisseur et couleur

Il est recommandé de donner ces propriétés dans cet ordre, même si certains navigateurs "supportent le désordre".

Les styles de trait les plus courants sont : continu (solid), avec des tirets (dashed), avec des points (dotted), ou doublé (double). Il en existe d'autres.

La commande de l'épaisseur se fait avec « width », généralement en pixels, mais éventuellement avec des adjectifs (length, thin, medium, thick). Notez qu'il est utile d'avoir au moins 3 pixels d'épaisseur pour avoir deux lignes visibles. De même, pour voir les points passer de « carrés » à « ronds » faut-il leur accorder un minimum de largeur.

La couleur se commande avec « border-color ».

Lire la suite

13:26 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, bordure, cadre, citation, style | |  del.icio.us | | Digg! Digg |  Facebook

28.04.2009

Créer un style pour afficher du code

Vous l'avez remarqué, je propose régulièrement de copier du code, le plus souvent des éléments de CSS mais parfois du HTML. Ceux qui sont déjà perdus vont devoir s'accrocher, désolé. Je me propose de le mettre en forme avec un "style", à vous de savoir le faire avec du style.

La problématique est la suivante. Quand vous utilisez un traitement de texte traditionnel, vous appliquez un "style" à une portion du texte et ce texte devient titre de niveau 1, 2, etc. Au "style" sont attachées des propriétés de famille de police, de taille, de mise en forme de caractère et de paragraphe. Ici, pas de style pour les notes, c'est à vous de faire les mêmes manipulations à chaque fois que vous voulez l'équivalent d'un titre 1, 2, etc. C'est vite fastidieux, et surtout, si vous changez d'avis sur ce que doit être un titre 1, vous devez tous les refaire.

L'idéal serait donc de créer des styles, et de pouvoir les mettre en œuvre facilement, une fois dépassée la pénible étape des réglages.

Lire la suite

10:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : code, css, style, modifier | |  del.icio.us | | Digg! Digg |  Facebook

14.04.2009

Créer un style pour les commentaires

Cette note a d'abord été publiée le 10 mars dernier, mais elle méritait d'être revue compte tenu des évolutions récentes imposées aux commentaires. Et elle le sera peut-être bientôt puisque cela va encore bouger de ce côté d'après la dernière newsletter de la plateforme.

Pour la personnalisation des commentaires, j'avais préconisé la modification du modèle de la page "lien permanent", l'insertion d'une instruction Html pour appeler un style disctinct à créer dans la feuille de style. Cela n'est plus nécessaire aujourd'hui, car la plateforme a modifié ses modèles et utilise d'emblée des styles distincts pour le contenu de la note, les commentaires, et selon qu'ils ont été proposés par des invités ou par l'auteur du blog (du moins une personne ayant donné l'adresse de courrier électronique que ce dernier a enregistré dans son compte Hautetfort). D'une certaine façon cela nous facilite les choses, à condition de retirer ses moufles avant de modifier la feuille de styles.

Je pars du principe que vous avez suivi les manipulations exposées dans la note du Blog.Hautetfort pour Distinguer ses réponses au sein des commentaires.

Lire la suite

13:00 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (1) | Tags : hautetfort, aspire, commentaire, css | |  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